Brightcove Одновременные видео на одной странице

Ниже приведен код. У меня есть страница, которая показывает видео Brightcove на вкладках jquery. Таким образом, пользователь может переключаться между вкладками и смотреть видео на разных языках. P.S. прикрепил, чтобы посмотреть, как это выглядит.

Страница отлично работает на десктопах. На айпадах видео с первого раза проигрываются нормально. Как только я переключаюсь между вкладками 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