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视频嵌入式自动播放序列

2 个答案: