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

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

2 голосов
/ 20 июня 2011

Вот проблема: У меня есть несколько видео на 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>

Это, в основном, прямо из материалов Google js api на Youtube. 1 Отлично работает только для ОДНОГО видео на страницу.

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

НО - видео не перестает воспроизводиться при нажатии на ссылки навигации по ползунку. (

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

Я в тупике. Halp

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

<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>

Ответы [ 3 ]

5 голосов
/ 22 июня 2011

Неправильный подход. Зачем использовать два или более проигрывателя 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

1 голос
/ 18 марта 2015 
<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>
0 голосов
/ 20 июня 2011

Сохраните ссылки на каждого игрока в массиве, а затем, когда вы захотите остановить их все, переберите массив.Если бы вы могли опубликовать больше своего 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();
   }
}

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

...