嵌入和循环播放 youtube 视频 (html5) 的一部分

Question

有没有办法用 HTML5 播放器循环播放 YouTube 视频的一部分？我试过这段代码（开始 7 秒，结束 12 秒）

第一个“循环”显示我想要的部分，第二个和其他循环显示整个视频。

它在 Flash 中工作，但我在移动设备的 HTML 5 中遇到问题。

这是我的嵌入代码：

<iframe allowfullscreen="" frameborder="0"  width="960" height="720" src="http://www.youtube.com/embed/Bpu0TIXzI1w?version=3&start=7&end=12&amp;autohide=1&amp;hl=en_US&amp;rel=0&amp;loop=0&amp;modestbranding=1&amp;playlist=Bpu0TIXzI1w"></iframe>

Answer 1

您可能需要使用 Javascript API。它有点复杂，但您可以完全控制视频播放。

文档：https://developers.google.com/youtube/iframe_api_reference

工作示例：http://jsfiddle.net/pbosakov/Lo6gwtff/

代码：

<div id="player"></div>
<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
<script type="text/javascript">
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'Bpu0TIXzI1w',
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}
function onPlayerReady(event) {
    loopStart();
    player.playVideo();
}
function loopStart() {
    player.seekTo(7);   // Start at 7 seconds
}
function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
        setTimeout(loopStart, 5000); // After 5 seconds, restart the loop
    }
}
</script>