All geek questions in one place

Handling multiple YouTube videos

I have three YouTube videos that I want to stop when a user clicks a link to a page. this is my code

var tag = document.createElement('script'); tag.src = "//www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var youtubePlayer1; var youtubePlayer2; var youtubePlayer3; function onYouTubeIframeAPIReady() { youtubePlayer1 = new YT.Player('firstPlayer', { }); youtubePlayer2 = new YT.Player('secondPlayer', { }); youtubePlayer3 = new YT.Player('thirdPlayer', { }); } function stopVideo() { if (youtubePlayer1 != null) { youtubePlayer1.stopVideo(); } if (youtubePlayer2 != null) { youtubePlayer2.stopVideo(); } if (youtubePlayer3 != null) { youtubePlayer3.stopVideo(); } }

This is the html code

 <div id="blog"> <!--///////////// UN ORDERED LIST /////////////--> <ul> <!--///////////// LIST /////////////--> <li> <!-- iframe --> <h3> <strong>ืœื”ืงืช ืงื•ืœื•ืช - ื‘ื”ืจืงื“ื” ื—ืกื™ื“ื™ืช...</strong></h3> <br /> <iframe id="firstPlayer" width="800" height="485" src="http://www.youtube.com/embed/F0eR1KFkt58" style="border:0" ></iframe> <br /> <br /> <img src="images/bg3.PNG" alt="" /><p> <span>ืชืื•ืจ ื”ื•ื™ื“ืื•: </span>ื˜ืงืกื˜ ืื•ื“ื•ืช ื”ื•ื™ื“ืื•, ืชืืจื™ืš</p> </li> <!--///////////// SECOND IMAGE /////////////--> <li> <!-- iframe --> <h3> <strong>ืœื”ืงืช ืงื•ืœื•ืช - ื‘ื”ืจืงื“ื” ื™ืฉืจืืœื™ืช ืžื•ื˜ืจืคืช...</strong></h3> <br /> <iframe id="secondPlayer" width="800" height="485" src="http://www.youtube.com/embed/mPTX4guU1W8" style="border:0" ></iframe> <br /> <br /> <img src="images/bg3.PNG" alt="" /><p> <span>ืชืื•ืจ ื”ื•ื™ื“ืื•: </span>ื˜ืงืกื˜ ืื•ื“ื•ืช ื”ื•ื™ื“ืื•, ืชืืจื™ืš</p> </li> <!--///////////// THIRD IMAGE /////////////--> <li> <!-- iframe --> <h3> <strong>ืœื”ืงืช ืงื•ืœื•ืช - ื‘ื•ืื™ ื‘ืฉืœื•ื...</strong></h3> <br /> <iframe id="thirdPlayer" width="800" height="485" src="http://www.youtube.com/embed/E-_ONZOcScU" style="border:0"></iframe> <br /> <br /> <img src="images/bg3.PNG" alt="" /><p> <span>ืชืื•ืจ ื”ื•ื™ื“ืื•: </span>ื˜ืงืกื˜ ืื•ื“ื•ืช ื”ื•ื™ื“ืื•, ืชืืจื™ืš</p> </li> </ul> </div>

when a user clicks on a link that calls the stopVideo function, which goes through all the players and stops them.

for some reason I can only make it work on the youtubePlayer2 object, what am I doing wrong here?

Remember, when I debug an application using the chrome debugger, I see that the objects are defined and that the function is being called.

+4
source share
5 answers

Try it, it worked.

Note http:// missing from src because stackoverflow shows an error message when publishing using src. so correct it and check.

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> tag.src = "//www.youtube.com/iframe_api";

Full working code

 <!DOCTYPE HTML> <html> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> <body> <div id="firstPlayer"></div> <div id="secondPlayer"></div> <div id="thirdPlayer"></div> <script> var tag = document.createElement('script'); tag.src = "//www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var youtubePlayer1; var youtubePlayer2; var youtubePlayer3; function onYouTubeIframeAPIReady() { youtubePlayer1 = new YT.Player('firstPlayer',{ height: '240', width: '320', videoId: 'F0eR1KFkt58', events: { 'onReady': onPlayerReady1 } }); youtubePlayer2 = new YT.Player('secondPlayer', { height: '240', width: '320', videoId: 'mPTX4guU1W8', events: { 'onReady': onPlayerReady2 } }); youtubePlayer3 = new YT.Player('thirdPlayer', { height: '240', width: '320', videoId: 'E-_ONZOcScU', events: { 'onReady': onPlayerReady3 } }); } function onPlayerReady1(event) { event.target.playVideo(); $('a').click(function(e) { youtubePlayer1.stopVideo(); e.preventDefault(); }); } function onPlayerReady2(event) { event.target.playVideo(); $('a').click(function(e) { youtubePlayer2.stopVideo(); e.preventDefault(); }); } function onPlayerReady3(event) { event.target.playVideo(); $('a').click(function(e) { youtubePlayer3.stopVideo(); e.preventDefault(); }); } </script> <a>Stop</a> </body> </html>
0
source

I think this way works:

http://jsfiddle.net/ZLMF8/3/

 <!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2/swfobject.js"></script></head> <body> <div id="ytplayer1"> <p>You will need Flash 8 or better to view this content.</p> </div> <div id="ytplayer2"> <p>You will need Flash 8 or better to view this content.</p> </div> <div id="ytplayer3"> <p>You will need Flash 8 or better to view this content.</p> </div> <script type="text/javascript"> var params = { allowScriptAccess: "always" }; swfobject.embedSWF("http://www.youtube.com/v/F0eR1KFkt58&enablejsapi=1&playerapiid=ytplayer1", "ytplayer1", "425", "365", "8", null, null, params); swfobject.embedSWF("http://www.youtube.com/v/mPTX4guU1W8&enablejsapi=1&playerapiid=ytplayer2", "ytplayer2", "425", "365", "8", null, null, params); swfobject.embedSWF("http://www.youtube.com/v/E-_ONZOcScU&enablejsapi=1&playerapiid=ytplayer3", "ytplayer3", "425", "365", "8", null, null, params); function stop() { if (ytplayer1) { ytplayer1.stopVideo(); } if (ytplayer2) { ytplayer2.stopVideo(); } if (ytplayer3) { ytplayer3.stopVideo(); } }โ€‹ </script> <a href="javascript:void(0);" onclick="stop();">Stop</a> </body> </html>โ€‹
+1
source

This sample code should work without problems, and in my testing it worked without errors. Make sure the script tag is added at the bottom of the page. This will help ensure that frames are loaded by the time they are called. Also try http://www.youtube.com/html5 to see if it has more reliable experience.

+1
source

I donโ€™t see the need for an if statement if your code just works when you cannot find youtubeplayer, but I once solved the problem in the same way by adding an else statement that would make something happen, which might explain why this only happens from time to time time.

Only a small copy and paste is required.

 function stopVideo() { if (youtubePlayer1 != null) { youtubePlayer1.stopVideo(); } else { youtubePlayer1.stopVideo(); } if (youtubePlayer2 != null) { youtubePlayer2.stopVideo(); } else { youtubePlayer2.stopVideo(); } if (youtubePlayer3 != null) { youtubePlayer3.stopVideo(); } else { youtubePlayer3.stopVideo(); } }
+1
source

Mohamed Navas answer (first answer) helped me come up with this:

 <br> <button id="pause">Pause</button> <br> <br> <div id="firstPlayer"></div> <div id="secondPlayer"></div> <div id="thirdPlayer"></div> <script> var tag = document.createElement('script'); tag.src = "//www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var youtubePlayer1; var youtubePlayer2; var youtubePlayer3; function onYouTubeIframeAPIReady() { youtubePlayer1 = new YT.Player('firstPlayer',{ height: '240', width: '320', videoId: 'qV9HxRU4ozY', events: { 'onReady': onPlayerReady } }); youtubePlayer2 = new YT.Player('secondPlayer', { height: '240', width: '320', videoId: 'nBRpWJ0QUH0', events: { 'onReady': onPlayerReady } }); youtubePlayer3 = new YT.Player('thirdPlayer', { height: '240', width: '320', videoId: 'E-_ONZOcScU', events: { 'onReady': onPlayerReady } }); } function onPlayerReady(event) { document.getElementById('pause').onclick = function() { youtubePlayer1.pauseVideo(); youtubePlayer2.pauseVideo(); youtubePlayer3.pauseVideo(); e.preventDefault(); }; }; </script>

https://jsfiddle.net/tonhaoln/ancz2vkn/

0
source

Source: https://habr.com/ru/post/1441734/

More articles:


All Articles