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

Answer 2

首先注意，如果一个人不熟悉基础知识之外的html或javascript，maiermic回答中的youtube播放器api链接将提供开发解决方案所需的一切 - 在一页上没有大量的略读。

另外，如果有人希望添加一个hh：mm：ss转换器，可以接受几秒钟的时间 - 使用以下内容添加/修改maiermic在答案中提供的代码;

var timeStart = "HH:MM:SS";
var timeEnd = "HH:MM:SS";

var loopStart = getSeconds(timeStart);
var loopEnd =  getSeconds(timeEnd);

var section = {
  start: loopStart,
  end: loopEnd
};

并添加功能;

function getSeconds(str) {
    var p = str.split(':'),
    s = 0, m = 1;

    while (p.length > 0) {
        s += m * parseInt(p.pop(), 10);
        m *= 60;
    }

    return s;
}

如果想要使用此代码将播放速度降低到正常速度，请使用

更改以下功能

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
        var duration;

        var playerSpeed = player.getPlaybackRate();

        if (playerSpeed == .25)
            duration = (section.end - section.start) * 4;
        else if (playerSpeed == .5) 
            duration = (section.end - section.start) * 2;
        else if (playerSpeed == .75) 
            duration = (section.end - section.start) * 1.5;
        else if (playerSpeed == 1) 
            duration = (section.end - section.start);

        setTimeout(restartVideoSection, duration * 1000);
    }
  }

以及

    function onPlayerReady(event) {
        player.seekTo(section.start);
        player.setPlaybackRate(.25);     // choose .25, .50, .75, or 1
        player.playVideo();
    }

当然，每次您想要不同的视频/视频部分时，您都必须修改代码中的视频ID / HH：MM：SS字段。另外，如果选择如上所述包括对可变玩家速度的支持，则必须根据需要添加这些值。如果包含上面的代码，可以通过播放器按钮改变播放速度，但如果在播放期间更改播放速度，则视频在视频再次开始播放之前不会刷新。

如何在循环中播放YouTube视频的一部分？

2 个答案: