javascript - Jquery管状加载多个实例

Question

我想在第一个管状实例播放后 x 秒后启动第二个管状实例。

我正在使用 2 个 div 将播放器附加到

<div id="player1"></div>
<div id="player2"></div>

我有 2 个启动管状的脚本。

var options = { 
            videoId: ytid, 
            start: diffInSeconds, 
            mute: false, 
            width: $(window).width(), 
            height:$(window).height(),
            playercount: 1
            };

$('#player' + options.playercount).tubular(options);

它成功启动了第一个管状实例。当第二个实例 playercount: 2 应该启动时，它只会附加管状容器和防护罩，而不是 iframe。

我添加了控制台日志来监控实例是否正在加载。

这是 jquery.rhtv.init.js 的链接(它调用管状函数)。

http://nopaste.linux-dev.org/?833094

这是修改后的管状 JS 的链接:

http://nopaste.linux-dev.org/?833101

这一切都在直播:

http://www.realhardstyle.tv

我怎样才能设法在第二个实例中加载 youtube iframe(以及更多)，最终结果应该是不间断播放的 youtube 视频流。对于每个已经开始的视频，应该出现一个“正在播放”的 div(就像在 jquery.rhtv.init.js 中一样)

提前致谢!

Answer 1

您遇到的问题是由于您如何初始化管状。如果您希望两个玩家都使用相同的选项，您需要为玩家添加一个类并使用该类名初始化管状。对于此示例，让我们将类名 tubular-player 添加到我们的容器中，并为存在的每个类初始化 tubular。

HTML

<div id="player1" class="tubular-player"></div>
<div id="player2" class="tubular-player"></div>

JavaScript

$('.tubular-player').tubular(options);