I have tried to create custom start and stop in youtube video.Its working fine in reference fiddle reference link
I have tried in html file.Its not working in html file,I have given my code below
<html>
<head>
<script>
/*call player*/
function callPlayer(frame_id, func, args) {
if (window.jQuery && frame_id instanceof jQuery) frame_id = frame_id.get(0).id;
var iframe = document.getElementById(frame_id);
if (iframe && iframe.tagName.toUpperCase() != 'IFRAME') {
iframe = iframe.getElementsByTagName('iframe')[0];
}
if (iframe) {
// Frame exists,
iframe.contentWindow.postMessage(JSON.stringify({
"event": "command",
"func": func,
"args": args || [],
"id": frame_id
}), "*");
}
}
</script>
</head>
<body>
<div id="whateverID" class="video-container"><iframe width="640" height="390" id="yt" frameborder="0" title="YouTube video player" type="text/html" src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe></div>
<div id="playButton" class="playVideo">Play button</div>
<div class="close_icon" >Pause close</div>
</body>
</html>
it sounds like your page didnt finish to load before the script start,
try to cut your script tag and move it to the end of the body like that(so your page will load first and then your script will load) :
<html>
<head>
</head>
<body>
<div id="whateverID" class="video-container"><iframe width="640" height="390" id="yt" frameborder="0" title="YouTube video player" type="text/html" src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe></div>
<div id="playButton" class="playVideo">Play button</div>
<div class="close_icon" >Pause close</div>
<script>
/*call player*/
function callPlayer(frame_id, func, args) {
if (window.jQuery && frame_id instanceof jQuery) frame_id = frame_id.get(0).id;
var iframe = document.getElementById(frame_id);
if (iframe && iframe.tagName.toUpperCase() != 'IFRAME') {
iframe = iframe.getElementsByTagName('iframe')[0];
}
if (iframe) {
// Frame exists,
iframe.contentWindow.postMessage(JSON.stringify({
"event": "command",
"func": func,
"args": args || [],
"id": frame_id
}), "*");
}
}
</script>
</body>
</html>
Related
I have several youtube iframes with TV channels on my website page.
<div>
<iframe id="ytplayer" src="https://www.youtube.com/embed/ntBxGznOML0?rel=0&enablejsapi=1&autoplay=0&controls=1&showinfo=0&loop=1&iv_load_policy=3&modestbranding=0" frameborder="0" allowfullscreen></iframe>
</div>
<div>
<iframe id="ytplayer" src="https://www.youtube.com/embed/zl4aeAfhdro?rel=0&enablejsapi=1&autoplay=0&controls=1&showinfo=0&loop=1&iv_load_policy=3&modestbranding=0" frameborder="0" allowfullscreen></iframe>
</div>
<div>
<iframe id="ytplayer" src="https://www.youtube.com/embed/URD4UWm-edg?rel=0&enablejsapi=1&autoplay=0&controls=1&showinfo=0&loop=1&iv_load_policy=3&modestbranding=0" frameborder="0" allowfullscreen></iframe>
</div>
<div>
<iframe id="ytplayer" src="https://www.youtube.com/embed/75j9l956bVs?rel=0&enablejsapi=1&autoplay=0&controls=1&showinfo=0&loop=1&iv_load_policy=3&modestbranding=0" frameborder="0" allowfullscreen></iframe>
</div>
I'm trying to use one java script to play video muted and to stop it on pause event but it doesnt work for me. The script is following
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('ytplayer', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event){
player.stopVideo(0);
}
}
function onPlayerReady(event) {
player.mute();
player.playVideo();
}
I need to full stop video on pause event, because it is live tv channel, so if I press pause now, in 10 minutes I will get a record but not a live stream. How can I make my script work?
UPDATE
OP has multiple players and uses plain JavaScript, the following changes are:
Multiple players shared the same id, now each player has a unique id.
Added a <button class='stop' data-id='yt*'>STOP</button> for each player.
Each button has a data-id. It's value corresponds to it's player's id.
Wrapped <section id='videoChannels'></section> around everything.
Added the eventListener to #videoChannels so when a button is clicked #videoChannels is referred to as the target.currentTarget which can be compared to the event.target to determine the button that was clicked (i.e. event.target).
After the capture eventPhase the event chain reaches event.target (the button that was clicked) and the function ytCommand() is called on the player that corresponds to the button (see step 2.)
Working Demo
PLUNKER
Stopping YouTube Player
Access the iframe by using contentWindow method
Next cross-domain communication through an iframe is possible with the postMessage API.
Next post commands from YouTube iFrame API
Relevant Code
$('#stop').on('click', function() {
$('#ytPlayer')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
});
Working Demo
FIDDLE
Snippet
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Stop YTPlayer</title>
</head>
<body>
<section id="videoChannels">
<div>
<iframe id="yt0" class="player" src="https://www.youtube.com/embed/8IzxdjVr5ZI?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<button class='stop' data-id='yt0'>STOP</button>
</div>
<div>
<iframe id="yt1" class="player" src="https://www.youtube.com/embed/AhenpCh6BO4?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<button class='stop' data-id='yt1'>STOP</button>
</div>
<div>
<iframe id="yt2" class="player" src="https://www.youtube.com/embed/HrmF-mPLybw?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<button class='stop' data-id='yt2'>STOP</button>
</div>
<div>
<iframe id="yt3" class="player" src="https://www.youtube.com/embed/6KouSwLP_2o?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<button class='stop' data-id='yt3'>STOP</button>
</div>
</section>
<script>
var vidCh = document.getElementById('videoChannels');
vidCh.addEventListener('click', ytCommand, false);
function ytCommand(event) {
if (event.target != event.currentTarget) {
var btn = event.target.getAttribute('data-id');
var ytp = document.getElementById(btn);
ytp.contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
}
}
</script>
</body>
</html>
I want to make 4 channel in my website, but I want to make start for the first channel automatically and after 5 second start the second channel ... etc
code of channel
The Code
window.addEventListener("load", function() {
var interval = setInterval(function() {
iframes[++n].src = urls[n - 1];
iframe[n].style.display = "block";
console.log(n);
if (n === iframes.length -1)
{
clearInterval(interval); console.log("all iframes loaded")
}
},
5000)
})
.channel1, .channel2, .channel3{
display:none;
}
<html>
<head>
<script type="text/javascript" src="js.js"></script>
<link rel="stylesheet" href="css.css">
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/BqPmcSGgs3U?autoplay=1" frameborder="0" allowfullscreen></iframe>
<iframe class="channel1" width="560" height="315" src="https://www.youtube.com/embed/BqPmcSGgs3U?autoplay=1" frameborder="0" allowfullscreen></iframe>
<iframe class="channel2" width="560" height="315" src="https://www.youtube.com/embed/BqPmcSGgs3U" frameborder="0" allowfullscreen></iframe>
<iframe class="channel3" width="560" height="315" src="https://www.youtube.com/embed/BqPmcSGgs3U" frameborder="0" allowfullscreen></iframe>
</body>
</html>
This code doesn't work, I can listen the commutator talk but I cant see the channel why ?
You can set iframe elements 1-4 src to empty string, utilize setInterval to set src of each iframe 1-4 to a url within an array every five seconds until all iframe elements have src set.
window.addEventListener("load", function() {
var urls = ["data:text/plain,b", "data:text/plain,c", "data:text/plain,d"];
var iframes = document.querySelectorAll("iframe");
var n = 0;
var interval = setInterval(function() {
iframes[++n].src = urls[n - 1];
console.log(n);
if (n === iframes.length -1) {
clearInterval(interval);
console.log("all iframes loaded")
}
}, 5000)
})
<iframe src="data:text/plain,a"></iframe>
<iframe src=""></iframe>
<iframe src=""></iframe>
<iframe src=""></iframe>
I am having a hard executing a chunk of HTML code inside my JavaScript logic, i was wondering if someone could point out what i am doing wrong? What i am trying to achieve is run either video based on probability. Here is my code:
<html>
<head>.</head>
<body>
<script>
function myFunction() {
var chance = (( Math.random()*100)+1)
if (chance>= 0 || chance<=50){
<video controls autoplay name="media">
<source src="http://webmup.com/195a3/vid.webm" type="video/webm">
</video>
}
else {
<video controls autoplay name="media">
<iframe width="420" height="315"
<source src="https://www.youtube.com/embed/IdtKbq3Omkw" type="video/webm">
</ifrmae>
</video>
}
}
</script>
</body>
</html>
As the comments state.. That is not how you should go about.. You can try this though, perhaps it will get you an idea on how to work with javascript in combination with html:
<html>
<head>
</head>
<body>
<div id="container"></div>
<script>
var container = document.getElementById('container');
function myFunction() {
var chance = (( Math.random()*100)+1)
if (chance>= 0 || chance<=50){
container.innerHTML = '<video controls autoplay name="media"><source src="http://webmup.com/195a3/vid.webm" type="video/webm"></video>';
}
else {
container.innerHTML = '<video controls autoplay name="media"><iframe width="420" height="315"><source src="https://www.youtube.com/embed/IdtKbq3Omkw" type="video/webm"></iframe></video>';
}
}
</script>
</body>
</html>
html tags such as <video> should be put outside of a JavaScript function and inside the html's <body> tag.
First, you want to query your video element with getElementById. In both scenarios, we are creating a source element, so we can declare that outside of the conditional block.
We can set attributes such as src and type with the setAttribute function. We can then add the source element as a child to the video element with the appendChild function.
<body>
<video id="my-video" controls autoplay name="media">
</video>
</body>
function myFunction() {
var video = document.getElementById("my-video");
var source = document.CreateElement("source");
source.setAttribute("type", "video/webm");
var chance = (( Math.random()*100)+1)
if (chance >= 0 || chance <= 50) {
source.setAttribute("src", "http://webmup.com/195a3/vid.webm");
video.appendChild(source);
} else {
var iframe = document.createElement("iframe");
iframe.setAttribute("width", "420");
iframe.setAttribute("height", "315");
video.appendChild("iframe");
source.setAttribute("src", "https://www.youtube.com/embed/IdtKbq30mkw");
iframe.appendChild(source");
}
}
Since you didn't tag this with jQuery, I'll assume you aren't looking to use it. You can still use "templates" though, even without it:
Put each template in a script tag with type="text/template":
<script id="withIframe" type="text/template">
<p>With Iframe</p>
<video controls autoplay name="media">
<iframe width="420" height="315" <source src="https://www.youtube.com/embed/IdtKbq3Omkw" type="video/webm">
</iframe>
</video>
</script>
<script id="withoutIframe" type="text/template">
<p>Without Iframe</p>
<video controls autoplay name="media">
<source src="http://webmup.com/195a3/vid.webm" type="video/webm">
</video>
</script>
<div id="holder">
</div>
Then in your javascript load the correct one based on your logic:
var iframe = document.getElementById("withIframe").innerHTML;
var noiframe = document.getElementById("withoutIframe").innerHTML;
function myFunction() {
var chance = ((Math.random() * 100) + 1);
var output = '';
if (chance <= 50) {
output = noiframe;
} else {
output = iframe;
}
document.getElementById("holder").innerHTML = output;
}
myFunction();
Note, there were some typos in your HTML and you condition would always return true:
chance>= 0 || chance<=50
All positive numbers are greater than 0 or less than 50.
Here is a working fiddle: https://jsfiddle.net/mcgraphix/5cr4j1r7/
For more complex templates where you can pass data in to populate your template, you may want to look at Mustache or Handlebars.
You can't do that.
But you can use templates.
Both w/wo jQuery
function jq(){ return $('#useJquery').prop('checked') }
function replace(){ return $('#replace').prop('checked') }
$(function(){ $('#button').click(function(){run();}) })
function run(){
if (jq()) {
if (replace()) {$("#container").html('');}
$("#container").append($((Math.round(Math.random()) ? $("#template1") : $("#template2")).html()));
} else {
if (replace()){document.getElementById("container").innerHTML = ''}
document.getElementById("container").innerHTML += document.getElementById( (Math.round(Math.random()) ? "template1" : "template2")).innerHTML;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="useJquery"> Use jQuery ?
<input type="checkbox" id="replace"> Replace ?
<input type="button" id="button" value="Randomize!"/>
<script type="text/template" id="template1"><div>I chose : VIDEO 1</div></script>
<script type="text/template" id="template2"><div>I chose : VIDEO 2</div></script>
<div id="container"></div>
I've tried every possible solution I can find, but I can't seem to mute my iframe vimeo video. I've referenced "//f.vimeocdn.com/js/froogaloop2.min.js" in the head. And I'm using the following javascript at the bottom of the page...
<script type="text/javascript">
var iframe = document.getElementById('vimeo_player');
var player = $f( iframe );
player.addEvent('ready', function() {
player.api('setVolume', 0);
});
</script>
You can see my attempt here: http://walkinthedog.com/video-test/
Any help is most appreciated.
Use setVolume from the api in your vimeo embed.. player.api('setVolume', 0); it will be like this...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//f.vimeocdn.com/js/froogaloop2.min.js"></script>
<iframe id="vimeo_player" src="http://player.vimeo.com/video/4415083? title=0&byline=0&portrait=0&color=d01e2f&autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script>
var iframe = $('#vimeo_player')[0],
player = $f(iframe),
status = $('.status');
player.addEvent('ready', function() {
player.api('setVolume', 0);
});
</script>
With the latest version, there's an even easier solution:
<iframe id="vimeo_player" src="http://player.vimeo.com/video/4415083?autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
var player = new Vimeo.Player(document.getElementById("vimeo_player"));
player.on('play', function() {
player.setVolume(0)
});
</script>
I have a page with six ifrmaes inside it. Each frame has individual id, so it is easy to detect the frame. All these frames have commono src. And each source I set
window.onload=function(){
alert(' this has been alerted from Iframe with id#");
}
How can I know the ID of the frame from which the alert is alerting?
Thanks.
You can do it like this:
Frameset:
<html>
<body>
<iframe src="frame.html" id="frameID1" name="frameName1"></iframe>
<iframe src="frame.html" id="frameID2" name="frameName2"></iframe>
<iframe src="frame.html" id="frameID3" name="frameName3"></iframe>
<iframe src="frame.html" id="frameID4" name="frameName4"></iframe>
<iframe src="frame.html" id="frameID5" name="frameName5"></iframe>
<iframe src="frame.html" id="frameID6" name="frameName6"></iframe>
</body>
</html>
Frame:
<html>
<head>
<script type="text/javascript">
window.onload=function() {
alert('This has been alerted from frame with id#: ' + GetFrameID(this.name));
}
function GetFrameID(frameName) {
var frames = top.document.getElementsByTagName('iframe');
if (frames != null) {
for (var i = 0; i < frames.length; i++) {
if (frames[i].name == frameName) return frames[i].id;
}
}
return null;
}
</script>
</head>
<body>
</body>
</html>