以下はコードです。jquery タブにブライトコーブの動画を表示するページがあります。そのため、ユーザーはタブを切り替えて、さまざまな言語でビデオを見ることができます。PSは見た目を確認するために添付されています。
ページはデスクトップで正常に動作します。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