如何使用iframe API同时播放两个Youtube视频

时间:2014-04-03 16:24:14

标签: javascript youtube youtube-api youtube-javascript-api youtube-iframe-api

您好我希望能够使用Youtube的iframe API同时播放两个(或更多)视频。

我已经能够添加两个视频但一个看起来正在播放而另一个暂停播放。如果我在暂停的一个上执行playVideo(),它会开始播放但播放的内容会暂停...

有没有办法一次只覆盖一个视频的默认行为?

创建视频的代码的一些部分:

self.player = new YT.Player(self.playerId, {
    videoId: self.options.videoId,
    playerVars: {
        controls: 0,
        showinfo: 0,
        modestbranding: 1,
        wmode: 'transparent'
    },
    events: {
        'onReady': self.playerReady,
        'onStateChange': self.playerStateChange
    }
});

self.playerReady = function(e) {
    if (self.options.mute) e.target.mute();
    e.target.seekTo(self.options.start);
    e.target.playVideo();
};
self.playerStateChange = function(state) {
    if (state.data === 0 && self.options.repeat) { // video ended and repeat option is set true
        self.player.seekTo(self.options.start); // restart
}

谢谢!

1 个答案:

答案 0 :(得分:0)

以下是一个示例代码,可同时播放2个YouTube视频。

<html>
 <head>
  <h1>Two youtube videos Playing Simultaneously</h1>
 </head>
 <body>
  <br>
  <iframe width="560" height="315" src="//www.youtube.com/embed/2ggzxInyzVE?autoplay=1" frameborder="0" allowfullscreen></iframe>
  <iframe width="560" height="315" src="//www.youtube.com/embed/hHUbLv4ThOo?autoplay=1" frameborder="0" allowfullscreen></iframe>
 </body>
</html>

希望这有帮助。