API YouTube iFrame Player не воспроизводит второе видео в массиве - PullRequest
Новая
       77

API YouTube iFrame Player не воспроизводит второе видео в массиве

0 голосов
/ 02 июля 2018

У меня есть массив (playListArray) из 3 хешей, каждый хеш представляет клип YouTube с идентификатором youtubeID, временем начала и окончания.

Когда я загружаю YouTube iFrame Player, он успешно загружает первый видеоклип в массиве. Я нажимаю на кнопку воспроизведения игрока и вижу, как играет 2-секундный сегмент, пока он не закончится в заранее определенное время окончания. До этого момента файлы console.logs выглядят так:

Консоль 

done is: false
Playlist index on state change is: 0
Video Unstarted 
done is: false 
Playlist index on state change is: 0 
Video Buffering
done is: false 
Playlist index on state change is: 0 
Video Playing 
done is: true 
Playlist index on state change is: 0 
Video Buffering
done is: true 
Playlist index on state change is: 0 
Video Playing 
done is: true 
Playlist index on state change is: 0
Video Paused
done is: true 
Playlist index on state change is: 0
Video ended

Проблема, с которой я столкнулся, заключается в том, что плеер не воспроизводит второе видео в массиве. Консоль регистрирует изменения состояния игрока, то есть «играет», «приостанавливает» и «заканчивает» в течение этого времени, но делает это мгновенно, не воспроизводя его через игрока на экране. Затем он быстро переходит к воспроизведению следующего клипа в массиве. Остальные журналы консоли выглядят так:

консоль (продолжение) 

done is: false
Playlist index on state change is: 1
Video Playing
done is: true
Playlist index on state change is: 1
Video Paused
done is: true
Playlist index on state change is: 1
Video ended
done is: false
Playlist index on state change is: 2
Video Unstarted
done is: false
Playlist index on state change is: 2
done is: false
Playlist index on state change is: 2
Video Unstarted
done is: false
Playlist index on state change is: 2
Video Buffering
done is: false
Playlist index on state change is: 2
Video Unstarted
done is: false
Playlist index on state change is: 2
Video Buffering
done is: false
Playlist index on state change is: 2
Video Playing
done is: true
Playlist index on state change is: 2
Video Buffering
done is: true
Playlist index on state change is: 2
Video Playing
done is: true
Playlist index on state change is: 2
Video Paused
done is: true
Playlist index on state change is: 2
Video ended
done is: false
Playlist index on state change is: 3
Video Playing
done is: true
Playlist index on state change is: 3
Video Paused
done is: true
Playlist index on state change is: 3
Video ended
done is: false
Playlist index on state change is: 3
Video Unstarted
done is: false
Playlist index on state change is: 3
done is: false
Playlist index on state change is: 3
Video Unstarted
done is: false
Playlist index on state change is: 3
Video Buffering
done is: false
Playlist index on state change is: 3
Video Playing
done is: true
Playlist index on state change is: 3
Video Buffering
done is: true
Playlist index on state change is: 3
Video Playing
done is: true
Playlist index on state change is: 3
Video Paused
done is: true
Playlist index on state change is: 3
Video ended
done is: false
Playlist index on state change is: 3
Video Playing
done is: true
Playlist index on state change is: 3
Video Paused
done is: true
Playlist index on state change is: 3
Video ended

app.js 

loadYouTubeIframeAPI();

function loadYouTubeIframeAPI() {
    var tag = document.createElement("script");
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}

var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player("player", {
        height: "390",
        width: "640",
        enablejsapi: 1,
        playerVars: {
            autoplay: 1,
            controls: 1,
            rel: 0,
            showinfo: 0,
            iv_load_policy: 3,
            modestbranding: 0
        },
        events: {
            onReady: onPlayerReady,
            onStateChange: onPlayerStateChange
        }
    });
}

var playListArray = [
{youtubeID: "ZM_8-c1EqOY", start: 10, end: 12},
{youtubeID: "Zs5NOrYYV2s", start: 20, end: 22},
{youtubeID: "ZM_8-c1EqOY", start: 10, end: 12}
];


var playlistIndex = 0;

function onPlayerReady(event) {
    event.target.loadVideoById({
        videoId: playListArray[playlistIndex].youtubeID,
        startSeconds: playListArray[playlistIndex].start,
        endSeconds: playListArray[playlistIndex].end
    });
    event.target.playVideo();
}

var done = false;
function onPlayerStateChange(event) {
    console.log("done is: " + done);
    console.log("Playlist index on state change is: " + playlistIndex);
    if (event.data == YT.PlayerState.ENDED && done == true) {
        console.log("Video ended");
        if (playlistIndex <= playListArray.length - 1) {
            event.target.loadVideoById({
                videoId: playListArray[playlistIndex].youtubeID,
                startSeconds: playListArray[playlistIndex].start,
                endSeconds: playListArray[playlistIndex].end
            });
            playlistIndex++;
        }
        done = false;
    } else if (event.data == YT.PlayerState.CUED) {
        console.log("Video Cued");
    } else if (event.data == YT.PlayerState.PLAYING) {
        console.log("Video Playing");
        done = true;
    } else if (event.data == YT.PlayerState.BUFFERING) {
        console.log("Video Buffering");
    } else if (event.data == YT.PlayerState.PAUSED) {
        console.log("Video Paused");
    } else if (event.data == YT.PlayerState.UNSTARTED) {
        console.log("Video Unstarted");
    }
}

function stopVideo() {
    player.stopVideo();
}

1 Ответ

0 голосов
/ 03 июля 2018

Просто измените это в соответствии с вашими спецификациями, Youtube IFrame Getting Started .

Вот важные части. 

 var player;
 var ctr = 0; //we create a counter to track the index of the playlist

.. 

//after playing the very first video, we queue a list of videos
 var done = false;  
 function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED && done) {
           console.log("load another video");
           player.loadPlaylist(["au2n7VVGv_c","SC4xMk98Pdc","SLsTskih7_I"],ctr);
           ctr++; //increment ctr so we don't keep playing the 1st video. 
                  //Instead this will play all videos in playlist.          
        }      
  }

.. вот полный код. Копировать , Вставить , Выполнить . 

<!DOCTYPE html>
<html>
  <body>
    <div id="player"></div>

    <script>
      var tag = document.createElement('script'); 
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      var player;
      var ctr = 0;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      function onPlayerReady(event) {
        event.target.playVideo();
      }

      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          //setTimeout(stopVideo, 6000);
          done = true;
        }
        if (event.data == YT.PlayerState.ENDED && done) {
           console.log("load another video");
           player.loadPlaylist(["au2n7VVGv_c","SC4xMk98Pdc","SLsTskih7_I"],ctr);
           ctr++;          
        }

      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
  </body>
</html>
...