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

【问题标题】：custom youtube playlist with custom start and end time具有自定义开始和结束时间的自定义 youtube 播放列表
【发布时间】：2019-01-21 20:55:17
【问题描述】：

我正在尝试根据示例 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>

【问题讨论】：

标签： javascript youtube-javascript-api

【解决方案1】：

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

您可以通过控制台在onStateChange 函数中记录state.data 来查看它。

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

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/

【讨论】：

谢谢。但不起作用。在第一个视频后停止。也许小提琴会有所帮助
@michael 我已经通过将 startSeconds_arr[i] 更改为 endSeconds_arr[i] 并添加 jsfiddle 链接来更新代码
state=0 会是 youtube api 中的某种错误吗？
我不太确定，但可能是这样。这也可能与浏览器下载/缓存数据的方式有关。