Brightcove 같은 페이지의 동시 동영상

Question

다음은 코드입니다. 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 

Answer 1

내가 슬라이더의 API를 실행하는 경우 해낸 해결책은 각각 다른 경험이 이름이 실제로 myExperience에 1, 2를 추가하는 TogglePause 루프위한 myexperience0 myexperience1