让多个嵌入式 Youtube 视频按顺序自动播放

Posted 2023-02-24

【中文标题】让多个嵌入式 Youtube 视频按顺序自动播放

【英文标题】：Get Multiple Embedded Youtube Videos to Play Automatically in Sequence

【发布时间】：2013-02-18 09:58:57

【问题描述】：

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

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

<object  ><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"  ></embed></object>
<br>
<object  ><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"  ></embed></object>

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

【问题讨论】：

您为什么不将所有这些视频添加到 YouTube 播放列表中并将播放列表嵌入您的网站。当第一个视频结束时，下一个视频将开始:)

【参考方案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>

【讨论】：

好的，太好了！谢谢您的帮助。现在有没有办法让他们在单独的播放器中显示并连续播放？

也许我误解了确切的要求——你想让它们都显示在屏幕上吗？然后一个接一个地玩？这样您仍然可以看到每个的缩略图/完成的屏幕？如果是这样，那就有点不同了——你只需获取所有玩家的 ID 作为 videoIDs 对象的键——然后循环遍历它。如果您需要帮助，请明确说明您想要什么 - 我会提供帮助。

感谢亚伦。是的，这正是我想做的。我想让所有的玩家都出现在屏幕上，并让它循环播放。这样做的原因是用户可以通过单击新播放器来更改视频。

你对目标仍然不是很清楚。因此，您希望屏幕上有多个播放器，每个播放器在前一个播放器停止后开始播放 - 再加上您希望点击行为。是点击的视频停止播放另一个视频然后进程从那里起飞（即再次播放之后的所有内容） - 还是一劳永逸地停止自动播放？

嘿，Aaron.. 你能帮我解决这个问题吗？我添加了我的 ID，但我不断收到错误消息。我什至尝试上传具有单个 ID 的单个视频，只是为了查看我是否错误地键入了数组的元素。它仍然无法正常工作并呈现错误。我喜欢你在这里的解决方案，如果我能让它工作，那就太棒了！这是我在我的网站上谈论的错误：floridashuttleservices.com

【参考方案2】：

这是使用YouTube Iframe Player API 的示例。

有两个独立的嵌入（player1 和 player2）。视频在 player1 加载后自动播放，并在 player2 完成时启动。

Here is the jfiddle if you want to play around with it.

还有代码：

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

【参考方案3】：

我不擅长 javascript。但我之前也有类似的问题。

you could referece

判断第一个视频完成，然后运行第二个。你可以设置2个函数。

<div id="player1"></div>
<br>
<object  ><param name="movie" id="player2-param" value="http://www.youtube.com/v/OdT9z-JjtJk"></param><embed src="http://www.youtube.com/v/OdT9z-JjtJk" type="application/x-shockwave-flash"   id="player2-embed"></embed></object>

然后

function onPlayerStateChange(event)         
            if(event.data === 0)           
                $('#player2-param').attr('value','http://www.youtube.com/v/OdT9z-JjtJkautoplay=1');//jquery
                $('#player2-embed').attr('src','http://www.youtube.com/v/OdT9z-JjtJkautoplay=1');//jquery

            
        

希望这可以帮助您并编写一些更好的代码，谢谢。

【参考方案4】：

使用 youtube API 并将自动播放设为 true；在 youtube 上制作播放列表并提供链接。

【参考方案5】：

基于上一个示例代码。我创建了 Basic Vanilla JavaScript Youtube Player- 带有播放列表。结帐Youtube Player- With playlist

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Basic Vanilla  JavaScript Youtube Player- With playlist</title>
</head>
<body>
<div class="player" style="width: 480px;height:360px;max-width: 50%;margin: 0 auto;">
    <div id="youtube" style="width: 100%;height: 100%"></div>
    <div class="controls" style="text-align: center;margin: 0 auto;">
        <button style="padding: 10px;width: 100px;background-color: #167AC6;"
                onclick="YouTubePlayer.playPrevious()">Prev
        </button>
        <button style="padding: 10px;width: 100px;background-color: #167AC6;margin-left: 30px;"
                onclick="YouTubePlayer.playNext()">Next
        </button>
    </div>
</div>
<script src="//www.youtube.com/iframe_api"></script>
<script>
    var YouTubePlayer = 
        current: 0,
        player: null,
        /**
         * Tracks ids here...
         */
        videos: [
            'vQMnaDNw5FQ',
            'Dp6lbdoprZ0',
            'OulN7vTDq1I'
        ],
        currentlyPlaying:function()
            console.info('Current Track id', YouTubePlayer.videos[YouTubePlayer.current]);
            return YouTubePlayer.videos[YouTubePlayer.current];
        ,
        playNext: function () 
            YouTubePlayer.increaseTrack()
            if (YouTubePlayer.player) 
                YouTubePlayer.currentlyPlaying();
                YouTubePlayer.player.loadVideoById(YouTubePlayer.videos[YouTubePlayer.current]);
             else 
                alert('Please Wait! Player is loading');
            
        ,
        playPrevious: function () 
            YouTubePlayer.decreaseTrack()
            if (YouTubePlayer.player) 
                YouTubePlayer.currentlyPlaying();
                YouTubePlayer.player.loadVideoById(YouTubePlayer.videos[YouTubePlayer.current]);
             else 
                alert('Please Wait! Player is loading');
            

        ,
        increaseTrack: function () 
            YouTubePlayer.current = YouTubePlayer.current + 1;
            if (YouTubePlayer.current >= YouTubePlayer.videos.length) 
                YouTubePlayer.current = 0;
            
        ,
        decreaseTrack: function () 
            YouTubePlayer.current = Math.max(YouTubePlayer.current - 1, 0);
        ,
        onReady: function (event) 
            event.target.loadVideoById(YouTubePlayer.videos[YouTubePlayer.current]);
        ,
        onStateChange: function (event) 
            if (event.data == YT.PlayerState.ENDED) 
                YouTubePlayer.playNext();
            
        
    
    function onYouTubeIframeAPIReady() 
        YouTubePlayer.player = new YT.Player('youtube', 
            height: '350',
            width: '425',
            events: 
                'onReady': YouTubePlayer.onReady,
                'onStateChange': YouTubePlayer.onStateChange
            
        );
    
</script>
</body>
</html>

【参考方案6】：

别复杂，用iframe就行了

<iframe   src="https://www.youtube.com/embed/nWHpU7H7Clc?playlist=b6KzNmLMW6o,qWE6g8puu98" frameborder="0" allow="autoplay; encrypted-media" style="width:900px;height:400px" autoplay="true"></iframe>