Как управлять воспроизведением нескольких видеороликов Youtube с помощью api Youtube JS?

Вот в чем проблема:
У меня есть несколько видео youtube в слайдере, и я хочу, чтобы видео перестало воспроизводиться, когда ссылка, которая управляет слайдером, нажата. Это действительно раздражает, когда видео просто продолжают играть, когда вы не можете его видеть.



Я использовал этот код: 



<div id="ytapiplayer2">

    You need Flash player 8+ and JavaScript enabled to view this video.

</div>

<script type="text/javascript">

    function onYouTubePlayerReady(playerId) {ytplayer2 = document.getElementById("myvideo");}

    var params = { allowScriptAccess: "always" };var atts = { id: "myvideo" };

    swfobject.embedSWF("http://www.youtube.com/v/hCarSDT7cSQ?enablejsapi=1&version=3&playerapiid=myvideo","ytapiplayer2", "425", "270", "8", null, null, params, atts);

    function play() {if (ytplayer2) {ytplayer2.playVideo();}}

    function pause() {if (ytplayer2) {ytplayer2.pauseVideo();}}

</script>


Который в основном непосредственно из материала Youtube JS api Google.1 он отлично работает только для одного видео на страницу.



Моя проблема в том, что у меня есть несколько страниц, где я хочу иметь несколько видео в тот же слайдер. Видео содержатся в divs и называются точно так же, как показано выше в каждом соответствующем div.



Но-видео не прекращают воспроизводиться теперь, когда переход по ссылкам для слайдера нажат. : (



Я попытался изменить имена переменных и идентификаторов, чтобы они были уникальными каждый раз, когда вызывается скрипт. Я даже изменил имя функции с функции onYouTubePlayerReady на onYouTubePlayerReady2 ... но ничего не получается.



Я в тупике. Помочь?




Изменить на показать более подробную настройку кода: 



<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script><!--Uses Google API library-->

<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script><!--Uses Google API library-->

</head>

<body>

<div id="bodyContent">

    <div id="leftCol">

        Content

    </div><!-- #leftCol -->

        <div id="middleCol">

        <ul id="subNav">

                 <li class="category">Mini Header</li>

                 <li><a href="#link1">Link 1</a></li>

                 <li><a href="#link2">Link 2</a></li>

                 <li><a href="#link3">Link 3</a></li>

        </ul><!--subNav-->

                </div><!-- #middleCol -->

                <div id="rightCol" class="slider">

                    <div class="scroll">

                        <div class="scrollContainer">                  

                            <div id="link1" class="panel">

                            <div id="ytapiplayer1">

                                You need Flash player 8+ and JavaScript enabled to view this video.

                                </div>

                                <script type="text/javascript">

                                function onYouTubePlayerReady(playerId) {ytplayer1 = document.getElementById("myVideo1");}

                                var params = { allowScriptAccess: "always" };var atts = { id: "myVideo1" };

                                swfobject.embedSWF("http://www.youtube.com/v/67aIIRv-dYU?enablejsapi=1&version=3&playerapiid=ytplayer1","ytapiplayer1", "425", "347", "8", null, null, params, atts);

                                function play() {if (ytplayer1) {ytplayer1.playVideo();}}

                                function pause() {if (ytplayer1) {ytplayer1.pauseVideo();}}

                                </script>

                            </div><!-- #link1 -->

                            <div id="link2" class="panel">

                            <div id="ytapiplayer2">

                                You need Flash player 8+ and JavaScript enabled to view this video.

                                </div>

                                <script type="text/javascript">

                                function onYouTubePlayerReady(playerId) {ytplayer2 = document.getElementById("myVideo2");}

                                var params = { allowScriptAccess: "always" };var atts = { id: "myVideo2" };

                                swfobject.embedSWF("http://www.youtube.com/v/67aIIRv-dYU?enablejsapi=1&version=3&playerapiid=ytplayer1","ytapiplayer2", "425", "347", "8", null, null, params, atts);

                                function play() {if (ytplayer2) {ytplayer2.playVideo();}}

                                function pause() {if (ytplayer2) {ytplayer2.pauseVideo();}}

                                </script>

                            </div><!-- #link2 -->

                    <div>Video 3 set up is same as above...</div>

                        </div>

                    </div><!-- .scroll -->

                </div><!-- #rightCol -->

</div><!-- #bodyContent -->

</body>
824   3  

3 ответов:

Неправильный подход. Зачем использовать два или более плеера YouTube, Если вы можете выполнить задачу с помощью одного плеера, особенно если вы используете YouTube JS API.

Соответствующий код: 

<div id="ytapiplayer">
    You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<a href="#" onclick="load('hCarSDT7cSQ'); return false;">Video 1</a>
<a href="#" onclick="load('67aIIRv-dYU'); return false;">Video 2</a>

<script type="text/javascript">
function load(id) {
    if (ytplayer) {
        ytplayer.loadVideoById(id);
    }
}
</script>

Демонстрация решения 1

Поочередно вы можете создать несколько игроков и выяснить, каким образом можно сохранить количество игроков на странице в переменной. Я думаю, что достаточно хранить id игрока. Не путайте id с (i) идентификатором вы присваиваете div (ii) идентификатор, который вы передаете как playerapiid.

swfobject.embedSWF() заменит div либо тегом object, либо тегом embed, которому присваивается идентификатор, передаваемый этому методу в последнем параметре. Это идентификатор, который вы можете позже использовать для ссылки на игрока(игроков).

Демонстрация решения 2

5  
2012-07-30 09:34:17 
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<script>                
    var player1st;
    var player2nd;
    function onYouTubePlayerAPIReady() { 
    player1st = new YT.Player('frame1st', {events: {'onStateChange': onPlayerStateChange}}); 
    player2nd = new YT.Player('frame2nd', {events: {'onStateChange': onPlayerStateChange}});
        }              
    //function onYouTubePlayerAPIReady() { player2nd = new YT.Player('frame2nd', {events: {'onStateChange': onPlayerStateChange}}); }                
    function onPlayerStateChange(event) {
    alert(event.target.getPlayerState());        
    }        
</script>                        
<iframe id="frame1st" style="position: relative; height: 220px; width: 400px" src="http://www.youtube.com/embed/1g30Xyh6Wqc?rel=0&amp;enablejsapi=1"></iframe><br>
<a href="javascript: void(0)" onclick="player1st.playVideo(); return false">play1st</a><br>
<a href="javascript: void(0)" onclick="player1st.pauseVideo(); return false">pause1st</a><br>
<a href="javascript: void(0)" onclick="player1st.stopVideo(); return false">stop1st</a>                
<iframe id="frame2nd" style="position: relative; height: 220px; width: 400px" src="http://www.youtube.com/embed/T39hYJAwR40?rel=0&amp;enablejsapi=1"></iframe><br>    
<a href="javascript: void(0)" onclick="player2nd.playVideo(); return false">play2nd</a><br>
<a href="javascript: void(0)" onclick="player2nd.pauseVideo(); return false">pause2nd</a><br>
<a href="javascript: void(0)" onclick="player2nd.stopVideo(); return false">stop2nd</a>
1  
2015-03-18 09:13:35

Храните ссылки на каждого игрока в массиве, а затем, когда вы хотите остановить их все, выполните цикл через массив. Если бы вы могли опубликовать больше вашего HTML / JavaScript для настройки нескольких видео, у меня могло бы быть более конкретное предложение, в противном случае заполните пробелы самостоятельно: 

// add a global array of video refs
var myVideos = [];

// some code to create the first video, similar to OP code
// ...
myVideos.push(ytplayer2);

// some code to create second video
// ...
myVideos.push(anotherVideoRef);

// some code to create third video
// ...
myVideos.push(thirdVideoRef);

// etc.

function pauseAllVideos(){
   for (var i = 0; i < myVideos.length; i++) {
      myVideos[i].pauseVideo();
   }
}

Я бы предпочел настроить видео в цикле, а не по одному, как я сделал выше, но я не знаю, как структурирован остальной код, так что...

0  
2011-06-20 10:52:19

Comments

    Ничего не найдено.
Click here to cancel reply.