多个 YouTube 视频嵌入自动播放序列

Question

嗨，各位 SO 用户，我已经开始开发一个音乐存档站点，用户可以在其中共享 YouTube 视频（仅限音乐）。

我想合并一个系统，允许在上一个播放完后自动播放这些视频的列表。

以下代码可用于自动播放一组视频，这将使用一个播放器而不是播放器列表。用伪术语来说，我想创建的系统将按以下方式布置；

播放器 1，视频 1

播放器 2，视频 2

播放器 3，视频 3

播放器 4，视频 4

<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: 'uO7kCUjUaUE',
            events: {
                'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
            }
        });
        player2 = new YT.Player('player2', {
            height: '350',
            width: '425',
            videoId: 'Bt9tTEZjYG8'
        });
    }

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

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

一个现有主题：http://goo.gl/5neM6Z 涉及到这个问题（脚本来源），但是没有回答来自 OP 的扩展想法。包括播放一个视频时，所有其他视频都暂停的想法。

我的问题是，是否有修改此代码以实现此目的的简单方法，或者是否必须编写新脚本？这个系统是否存在于其他地方？ JWPlayer 可以解决吗？

非常感谢对此主题的讨论和建议！

Answer 1

在 JW 播放器中，播放列表的默认行为是自动播放每个项目。

这可能会如你所愿吗？

<!DOCTYPE html>
<html>
<head>
    <title>4 Videos</title>
</head>
<body>
    <script src="http://p.jwpcdn.com/6/11/jwplayer.js" type="text/javascript"></script>
    <div id="player1"></div>
    <script type="text/javascript" language="javascript">
    jwplayer("player1").setup({
        playlist: [{
            file: "http://www.youtube.com/watch?v=xSE9Qk9wkig"
          },{
            file: "https://www.youtube.com/watch?v=NKPiIoLNMpA"
          },{
            file: "https://www.youtube.com/watch?v=hS5CfP8n_js"
          },{
            file: "https://www.youtube.com/watch?v=MZoO8QVMxkk"
          }
        ],
        primary: "flash"
    });
    </script>
</body>
</html>

Answer 2

这是另一个例子，可以做更多你想要的事情：

<!DOCTYPE html>
<html>
<head>
    <title>4 Videos</title>
</head>
<body>
    <script src="http://p.jwpcdn.com/6/11/jwplayer.js" type="text/javascript"></script>
    <div id="player1"></div>
    <div id="player2"></div>
    <div id="player3"></div>
    <div id="player4"></div>
    <script type="text/javascript" language="javascript">
    jwplayer("player1").setup({
        file: "http://www.youtube.com/watch?v=xSE9Qk9wkig"
    });
    jwplayer("player2").setup({
        file: "https://www.youtube.com/watch?v=NKPiIoLNMpA"
    });
    jwplayer("player3").setup({
        file: "https://www.youtube.com/watch?v=hS5CfP8n_js"
    });
    jwplayer("player4").setup({
        file: "https://www.youtube.com/watch?v=MZoO8QVMxkk"
    });
    jwplayer("player1").onComplete(function(){
        jwplayer("player2").play();
    });
    jwplayer("player2").onComplete(function(){
        jwplayer("player3").play();
    });
    jwplayer("player3").onComplete(function(){
        jwplayer("player4").play();
    });
    jwplayer("player4").onComplete(function(){
        jwplayer("player1").play();
    });
    jwplayer("player1").onPlay(function(){
        jwplayer("player2").stop();
        jwplayer("player3").stop();
        jwplayer("player4").stop();
    });
    jwplayer("player2").onPlay(function(){
        jwplayer("player1").stop();
        jwplayer("player3").stop();
        jwplayer("player4").stop();
    });
    jwplayer("player3").onPlay(function(){
        jwplayer("player1").stop();
        jwplayer("player2").stop();
        jwplayer("player4").stop();     
    });
    jwplayer("player4").onPlay(function(){
        jwplayer("player1").stop();
        jwplayer("player2").stop();
        jwplayer("player3").stop();
    });
    </script>
</body>
</html>

或

jwplayer("player1").onComplete(function(){
    jwplayer("player2").play();
    jwplayer("player1").stop();
});

等等

多个 YouTube 视频嵌入自动播放序列

Multiple YouTube video embedded autoplay sequence

javascript

video

youtube-api

jwplayer

autoplay