获取多个嵌入式 Youtube 视频以自动顺序播放

Question

有没有什么简单的方法可以在页面上嵌入多个 YouTube 视频，并在页面打开后立即开始播放，当第一个视频播放完毕后，第二个视频开始播放？

我希望这样的事情会起作用：

 <object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/OdT9z-JjtJk&autoplay=1"></param><embed src="http://www.youtube.com/v/OdT9z-JjtJk&autoplay=1" type="application/x-shockwave-flash" width="425" height="350"></embed></object>
<br>
<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/NlXTv5Ondgs&autoplay=2"></param><embed src="http://www.youtube.com/v/NlXTv5Ondgs&autoplay=2" type="application/x-shockwave-flash" width="425" height="350"></embed></object>

它适用于第一个但不是第二个。我想我可能需要深入研究 API。有人有什么建议吗？

原文由 clifgray 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 Youtube IFrame API，您可以轻松做到这一点。

您需要在此处配置的唯一部分是 youtube ID 数组。您可以从 URL 中 /v/ 之后的部分检索这些内容（如果需要，您可以修改 javascript 以加载 URL 而不是 ID。我只是更喜欢这种方式。

 <div id="player"></div>
<script src="//www.youtube.com/iframe_api"></script>

<script>
    /**
     * Put your video IDs in this array
     */
    var videoIDs = [
        'OdT9z-JjtJk',
        'NlXTv5Ondgs'
    ];

    var player, currentVideoId = 0;

    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '350',
            width: '425',
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    function onPlayerReady(event) {
        event.target.loadVideoById(videoIDs[currentVideoId]);
    }

    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
            currentVideoId++;
            if (currentVideoId < videoIDs.length) {
                player.loadVideoById(videoIDs[currentVideoId]);
            }
        }
    }
</script>

原文由 Aaron Saray 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

下面是一个使用 YouTube Iframe Player API 的示例。

有两个独立的嵌入（player1 和 player2）。播放器 1 加载后视频自动播放，播放器 2 加载完成后开始播放。

如果您想使用它，这里是 jfiddle。

和代码：

 <div id="player1"></div>
<div id="player2"></div>
<script>
    var tag = document.createElement('script');
    tag.src = "//www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player1;
    var player2;

    function onYouTubeIframeAPIReady() {
        player1 = new YT.Player('player1', {
            height: '350',
            width: '425',
            videoId: 'OdT9z-JjtJk',
            events: {
                'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
            }
        });
        player2 = new YT.Player('player2', {
            height: '350',
            width: '425',
            videoId: 'NlXTv5Ondgs'
        });
    }

    function onPlayerReady(event) {
        event.target.playVideo();
    }

    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
            player2.playVideo();
        }
    }
</script>

原文由 Matt Koskela 发布，翻译遵循 CC BY-SA 3.0 许可协议