Brightcove同一页面上的同步视频

时间:2014-04-16 18:16:51

标签: javascript api onpause brightcove mediaplayback

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

该页面在桌面上运行良好。在ipads上,第一次视频播放正常。一旦我在选项卡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

1 个答案:

答案 0 :(得分:0)

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