Brightcove 同一页面上的同步视频

Question

下面是代码。我有一个在 jquery 选项卡中显示 Brightcove 视频的页面。因此，用户可以在标签之间切换并观看不同语言的视频。附言附上看看它的样子。

该页面在台式机上运行良好。在 ipad 上，第一次播放视频很好。一旦我在选项卡 tab1 tab2 tab3 之间切换并单击 tab1，视频就会变黑。

我读到将 div 放在页面范围之外会有所帮助。但我不明白这是什么意思。有人可以帮忙吗？

function onTemplateLoaded(experienceID) {
player = brightcove.getExperience(experienceID);
videoPlayer = player.getModule(APIModules.VIDEO_PLAYER);
![enter image description here][1]
videoCollection.add(experienceID, videoPlayer);
pauseState = false;
if (videoCollection.count == '1')
    videoCollection.item('myExperience1').Play(true);

if (videoCollection.item('myExperience1') != null)
    videoCollection.item('myExperience1').pause(false);
}

function togglePause(index) {
//index for first tab is zero, we need to start with 'flashObj1' so incrementing index
index = index + 1;
for (i = 1; i <= videoCollection.count; i++) {
try {
if (index == i) {
try {
videoCollection.item('myExperience' + index).pause(false);
videoCollection.item('myExperience' + index).play(true);
}
catch (err1) {
  }
}
else {
videoCollection.item('myExperience' + i).pause(true);
videoCollection.item('myExperience' + index).play(false);
} //end else
} //end try
catch (err) {
} //end catch
}
}

<div id="tabs">
<ul>
<!-- Please add or delete for languauges -->
<li><a href="#fragment-1"><span>English</span></a></li>
<li><a href="#fragment-2"><span>French</span></a></li>
</ul>
<div id="fragment-1">
<script type="text/javascript"        src="http://admin.brightcove.com/js/BrightcoveExperiences.js">
</script>
<object id="myExperience1" class="BrightcoveExperience">
<param name="bgcolor" value="#FFFFFF" />
<param name="width" value="454" />
<param name="height" value="304" />
<param name="playerID" value="XXXXXXX" />
<param name="playerKey" value="XXXXXXXXXXXXXXX" />
<param name="isVid" value="true" />
<param name="dynamicStreaming" value="true" />
<param name="@videoPlayer" value="XXXXXXXXXX" />
<param name="includeAPI" value="true" />
<param name="templateLoadHandler" value="BCL.onTemplateLoad" />
<param name="templateReadyHandler" value="BCL.onTemplateReady" />
</object>
</div>
<script type="text/javascript">   brightcove.createExperiences();</script>
<div id="fragment-2">
<script type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>
<object id="myExperience2" class="BrightcoveExperience">
<param name="bgcolor" value="#FFFFFF" />
<param name="width" value="454" />
<param name="height" value="304" />
<param name="playerID" value="XXXXXXXXXXXXXXXX" />
<param name="playerKey" value="XXXXXXXXXXXXX" />
<param name="isVid" value="true" />
<param name="dynamicStreaming" value="true" />
<param name="@videoPlayer" value="XXXXXXXXXXXXXXXX" />
<param name="includeAPI" value="true" />
<param name="templateLoadHandler" value="BCL.onTemplateLoad" />
<param name="templateReadyHandler" value="BCL.onTemplateReady" />
</object>
</div>
<script type="text/javascript">   brightcove.createExperiences();</script>
</div>

  [1]: http://i.stack.imgur.com/CiLui.png

Answer 1

在滑块中运行 api 时我想出的一个解决方案是给每个对象一个不同的体验名称是 myexperience0 myexperience1