当视频结束时,Youtube javascript会加载另一个视频

时间:2018-03-15 00:58:37

标签: javascript youtube-api

我想播放另一个视频,我将从我的数据库中获取该视频,但我尝试使用一些示例,这根本不起作用,这是我的示例代码:

<script>

// create youtube player
var player;
function onYouTubePlayerAPIReady(id) {

    if (id == null) {var t = '0Bmhjf0rKe8';}

    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: t,
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
}

// autoplay video
function onPlayerReady(event) {
    event.target.playVideo();
}

// when video ends
function onPlayerStateChange(event) {        
    if(event.data === 0) {              
     // Here I want to call function again, function executes, but video will not played
       onYouTubePlayerAPIReady('yeDkcSZta2Y');
    }
}

在那里你可以看到,当视频结束时,我用新视频ID调用YouTubePlayerAPIReady(),它也会执行,但视频不会播放。我认为这是因为onPlayerReady()没有执行,或者是什么。

如何解决这个问题,或者做些什么改变才能正常工作?

1 个答案:

答案 0 :(得分:0)

这是一个有效的例子。调用queueVideo()加载一个字符串,其中包含您要播放的所有视频或仅一个视频的逗号分隔视频ID。如果队列中没有剩余视频,则会播放默认视频“0Bmhjf0rKe8”。我从不使用onPlayerReady()。事实上,如果我没记错的话,它从未被调用过,所以我使用下面显示的技术实现了它。

<script type="text/javascript">
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
//
// Replaces the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
var videosQueuedCount;
function onYouTubePlayerAPIReady() {
  videosQueuedCount = 1;
  var vars = {
     autoplay: 1,
     enablejsapi: 1,
     controls: 1
  }
  player = new YT.Player('ytplayer', {
    height: '390',
    width: '640',
    playerVars: vars,
    videoId:'0Bmhjf0rKe8',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}
function onPlayerReady(evt) {
}
function playVideo(VID) {
  window.top.scrollTo(0,410);
  videosQueuedCount = 1;
  player.loadVideoById(VID);
}
function queueVideo(queuedCount,VID) {
  window.top.scrollTo(0,410);
  videosQueuedCount = queuedCount;
  player.loadPlaylist(VID);
  player.playVideo();
}
function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.ENDED) {
    videosQueuedCount -= 1;
    if (videosQueuedCount < 1) {
      videosQueuedCount = 1;
      playVideo('0Bmhjf0rKe8');
    }
  }
}
</script>
<div class="video-container"><div id="ytplayer"></div></div>