Below is the code. I have a page that shows brightcove videos in jquery tabs. So user can toggle between tabs and watch videos in different languages. P.S. attached to see how it looks.
The page works fine on desktops. On ipads, first time videos play fine. Once i toggle between the tabs tab1 tab2 tab3 and click back on tab1, the video goes black.
I read that placing the divs out of the scope of the page will help. But i dont understand what it means. Can any one please help with this?
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]: https://i.stack.imgur.com/CiLui.png
