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

Question

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

javascriptvideoyoutube-apijwplayerautoplay

3

大家好，作为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可能是解决方案吗？

非常感谢对这个话题的讨论和建议！

- Ballard

2个回答

1

这是另一个更符合您需求的示例：

<!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();
});

etc.

- emaxsaun

谢谢，看起来很不错，我会缩短这段代码以提高效率： jwplayer("player1").onComplete(function(){ jwplayer("player2").play(); jwplayer("player1").stop(); }); - Ballard

如果您允许的话，我想再次向您请教一下：我想研究一种注入系统，其中视频URL可以更改为存储在数据库中的URL。PHP？ - Ballard

这肯定是可能的，我想，但我以前从未尝试过这样的事情。 - emaxsaun

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- emaxsaun · Accepted Answer

在JW Player中，播放列表的默认行为是自动播放每个项目。这可能会达到您想要的效果吗？

<!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>