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

问题描述

有没有简单的方法让页面上嵌入多个嵌入的YouTube视频，并在页面打开后第一个开始播放第二个视频时开始播放？

我希望像这样的事情能够发挥作用：

 < object width =425height = 350>< param name =movievalue =http://www.youtube.com/v/OdT9z-JjtJk&autoplay=1>< / param>< embed src =http： //www.youtube.com/v/OdT9z-JjtJk&autoplay=1type =application / x-shockwave-flashwidth =425height =350>< / embed>< / object> ; 
< br> 
< object width =425height =350>< param name =movievalue =http://www.youtube.com/v/NlXTv5Ondgs&autoplay=2> < / param>< embed src =http://www.youtube.com/v/NlXTv5Ondgs&autoplay=2type =application / x-shockwave-flashwidth =425height =350 >< /嵌入>< /对象> 
  

第一个但不是第二个。我想我可能需要深入API。任何人有任何建议吗？

解决方案

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

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

 < div id =player>< / div> 
< script src =// www.youtube.com/iframe_api\"> < / script> 
 
< script> 
 / ** 
 *将您的视频ID放入此阵列
 * / 
 var videoIDs = [ 
'OdT9z-JjtJk'，
'NlXTv5Ondgs'
]; 
 
 var player，currentVideoId = 0; 
 
 onYouTubeIframeAPIReady（） {
 player = new YT.Player（'player'，{
 height：'350'，
 width：'425'，
 events：{
'onReady '：onPlayerReady，
'onStateChange'：onPlayerStateChange 
} 
}）; 
} 
 
函数onPlayerReady（event）{
 event。 target.loadVideoById（videoIDs [ currentVideoId]）; 
} 
 
函数onPlayerStateChange（event）{
 if（event.data == YT.PlayerState.ENDED）{
 currentVideoId ++; 
 if（currentVideoId< videoIDs.length）{
 player.loadVideoById（videoIDs [currentVideoId]）; 
} 
} 
} 
< / script> 
  

Is there any simple way to have multiple embedded YouTube videos on a page and have them start playing as soon as the page is opened and when the first one finished have the second one start?

I was hoping something like this would work:

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

And it does for the first one but not the second. I would imagine that I may need to dive into the API. Anyone have any suggestions?

解决方案

Using the Youtube IFrame API, you can do this easily.

The only part you need to configure here is the array of youtube IDs. You can retrieve those from the part after the /v/ in the URL (If need be, you can modify the javascript to load URLs instead of IDs. I just like this way better.

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

这篇关于获取多个嵌入式Youtube视频以按顺序自动播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！