youtube - 如何循环播放youtube视频的一部分？

Question

我正在尝试在视频的特定部分制作youtube视频循环。

https://www.youtube.com/v/zeI-JD6RO0k?autoplay=1&loop=1&start=30&end=33&playlist=%20zeI-JD6RO0k

据我所知:

开始和结束:

start=30&end=33

要使其循环:

autoplay=1&loop=1&playlist=%20zeI-JD6RO0

问题是它在我指定的时间没有启动下一个循环

Answer 1

您可以使用Youtube Iframe-API循环播放视频部分。

将此标记放在您的HTML页面中:

<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>

加载Youtube Iframe-API

// 2. This code loads the IFrame Player API code asynchronously.
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 section = {
  start: 30,
  end: 33
};

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player(
    'player',
    {
      height: '360',
      width: '640',
      videoId: 'zeI-JD6RO0k',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    }
  );
}

function onPlayerReady(event) {
  player.seekTo(section.start);
  player.playVideo();
}

function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PLAYING) {
    var duration = section.end - section.start;
    setTimeout(restartVideoSection, duration * 1000);
  }
}

function restartVideoSection() {
  player.seekTo(section.start);
}

See this example in action