Question

我正在尝试根据示例here制作自定义的youtube播放列表。

但是，YouTube播放器被“卡住了”并跳过了视频（在我的情况下，中间视频被跳过了）。该代码应该遍历下面的数组并一次播放一个视频，每个视频都有不同的开始/结束时间。

如何使这项工作正常进行。（请注意，下面的代码需要上传到网站才能正常工作。显然是从本地计算机上无法正常工作的）这是我正在使用的代码：

<html>
<body>

<div id="ytplayer"></div>


<script>// 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);

var i = 0;
var videoId_arr = ['O57DyNMRGY8','-Yh2QGJBd2U','M7lc1UVf-VE'];
var startSeconds_arr = [41,26,17];
var endSeconds_arr = [50,40,30];

// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;

var playerConfig = {
  height: '360',
  width: '640',
  videoId: videoId_arr[i],
  playerVars: {
    autoplay: 1, // Auto-play the video on load
    controls: 1, // Show pause/play buttons in player
    showinfo: 1, // Hide the video title
    modestbranding: 0, // Hide the Youtube Logo
    fs: 1, // Hide the full screen button
    cc_load_policy: 0, // Hide closed captions
    iv_load_policy: 3, // Hide the Video Annotations
    start: startSeconds_arr[i],
    end: endSeconds_arr[i],
    autohide: 0, // Hide video controls when playing
  },
  events: {
    'onStateChange': onStateChange
  }
};


function onYouTubePlayerAPIReady() {

  player = new YT.Player('ytplayer', playerConfig);
}

function onStateChange(state) {
  if (state.data === YT.PlayerState.ENDED) {
    i++;
    if(typeof videoId_arr[i] === 'undefined')
        return;

    player.loadVideoById({
      videoId: videoId_arr[i],
      startSeconds: startSeconds_arr[i],
      endSeconds: endSeconds_arr[i]
    });
  }
}

</script>
</body>
</html>

Answer 1

我已经测试了您的代码，并且发现状态由于某些未知原因而在迅速变化。尽管未播放视频，但该州有时的值0等于YT.PlayerState.ENDED。

您可以通过state.data函数中的控制台日志记录onStateChange看到它。

一个小小的改动就解决了这个问题：

function onStateChange(state) {
   var _video_url = state.target.getVideoUrl();
   var _video_id = _url.split('v=')[1];
   var _current_index = videoId_arr.indexOf(_video_id) +1; 

   console.log('State: ', _video_id, _current_index, state );

  // ensure that the video has been played
  if (state.data === YT.PlayerState.ENDED && player.getCurrentTime() >= endSeconds_arr[i]) {
    i++;
    if(typeof videoId_arr[i] === 'undefined'){
        i = 0; // rest the counter
        return;
    }
  }
}

为使代码正常运行，您应禁用Video Resumer之类的浏览器插件-因为它们可以更改youtube视频的状态或从上次停止播放的视频继续播放视频

提琴：https://jsfiddle.net/_kdts/Lx91ehdw/

具有自定义开始和结束时间的自定义youtube播放列表

1 个答案: