Блог

Как я могу вставлять разные видеоролики YouTube в разные места на странице с помощью API YouTube? (Это означает, что они не могут использовать один и тот же <div> «плеер».) Они также запускаются в разное время на основе разных onclick событий. Мой код отлично работает, когда на странице есть только одно видео, но я ни за что на свете не могу придумать код, позволяющий всему этому работать с 2 или более!

Сначала я пытался просто добавить несколько экземпляров кода, где я хотел, чтобы каждый из них был, но это не сработало. Я читал, что всех игроков нужно добавить в один <script> , поэтому я попробовал это:

(Кроме того, имеет ли значение, ГДЕ на странице <script> находится и где <div> находятся s? Может <script> ли запись в a <div> независимо от того, где они находятся на странице?)

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

 // inside other containers with with relative and absolute positioning
// that fadeIn and fadeOut using jQuery
<div id="video1"></div>

// inside other containers with with relative and absolute positioning
// that fadeIn and fadeOut using jQuery
<div id="video2"></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 player1;
var player2;

function onYouTubeIframeAPIReady() {
    player1 = new YT.Player('video1',{
                width: '320',
                height: '216',
                videoId: 'VIDEO_ID_1',
                playerVars: {rel: 0, controls: 0, autohide: 1, disablekb: 1, enablejsapi: 1, modestbranding: 1, showinfo: 0 },
                events: { 'onStateChange': onPlayerStateChange1 } });;
    player2 = new YT.Player('video2',{
                width: '320',
                height: '216',
                videoId: 'VIDEO_ID_2',
                playerVars: {rel: 0, controls: 0, autohide: 1, disablekb: 1, enablejsapi: 1, modestbranding: 1, showinfo: 0 },
                events: { 'onStateChange': onPlayerStateChange2 } });; }

function startVideo1() {
            player1.playVideo();
            $('#video_box_B1').delay(1000).fadeIn();
            $("#video_box_B1").delay(20000).hide();
        };
function onPlayerStateChange1(event) {        
            if(event.data === 2) {
                $("#video_box_B1").hide();
            }
        }
function startVideo2() {
            player2.playVideo();
            $('#video_box_E5').delay(1000).fadeIn();
            $("#video_box_E5").delay(20000).hide();
        };
function onPlayerStateChange2(event) {        
            if(event.data === 2) {
                $("#video_box_E5").hide();
            }
        }
</script>

// onclick triggers at various places on the page
<img src="image_1.jpg" onclick="startVideo1()" />
<img src="image_2.jpg" onclick="startVideo2()" />
  

Есть ли кто-нибудь, кто может сказать, что я делаю не так? Кстати, эти контейнеры, которые исчезают и исчезают, отлично работают, если я использую неподвижное изображение, только текст или только с одним видео на странице, так что причиной этого являются не эти исчезающие контейнеры. Это должен быть скрипт YouTube. Кто-нибудь может помочь?

Кажется, работает в этом jsbin:

http://jsbin.com/catuhimo/3/edit

В каком браузере вы это пробуете? Если вы используете Safari новейшей версии 8.0 (10538.39.41) в Yosemite, у jsfiddle и JSBin возникли некоторые проблемы с рендерингом. Я опробовал ваш код в последней версии Chrome и заменил заполнители фактическими идентификаторами видео, и это сработало.

Это помогает? Я упускаю суть вашего вопроса? Исходя из того, что вы спросили, для меня это работает нормально.