ソースタグのsrc属性を変更するボタンをクリックし、プレーヤー要素に負荷を呼び出すことで動作する、自分のサイトの1ページ分のシンプルなビデオプレーヤーを作成しました。 video要素は次のようになります。Odd Safariビデオ "Load"の動作
<video id="player" title="Video 1" controls width="600" height="480" preload="metadata">
<source src="videos/english.mp4" type="video/mp4" />
<source src="videos/english.webm" type="video/webm" />
<source src="videos/english.ogv" type="video/ogg" />
<object type="application/x-shockwave-flash" data="plugins/flash/player.swf"
width="600" height="480">
<param name="movie" value="plugins/flash/player.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="flashvars" value="file=../../videos/english.mp4" />
<p>Your browser can't play HTML5 video. <a href="videos/english.webm">
Download it</a> instead.</p>
</object>
</video>
し、Clickイベントへのrelaventスクリプトは次のようになります。
$(".playerControl").live("click tap",function(){
// If the player isn't playing this divs video
if($("#player").data('currentVideo') != $(this).data('videoID')){
// Swap active button states
$(".playerControl.active").removeClass('active');
$(this).addClass('active');
// Pause the current video and swap the content, then load the player
$("#player")[0].pause();
$("#player").html($(this).data('innerHTML'));
$("#player").data({
innerHTML: $(this).data('innerHTML'),
currentVideo: $(this).data('videoID')
});
$("#player")[0].load();
updateBackup();
}
});
これは、クロムと、おそらくFirefoxの上で完全に正常に動作しますが、奇妙な問題は、ときに来ます私はサファリでこれを使う。最初のビデオが表示されますが、再生しようとするすべての2番目のビデオはロードしようとしません。コンソールからプレーヤーに「ロード」を呼び出すと結果は得られませんが、プレーヤーの点検でソースが正しいことが示され、動作していないビデオの後でクリックすると動画が再生されます。
私はあまりにも混乱しないように思っています。基本的には、サファリは再生しようとする他のすべてのビデオをロードしませんが、自分でファイルを再生するのは問題ありません。私はそれが働くために呼び出さなければならないいくつかの余分な機能があるという気持ちがありますが、わかりません。
更新:クリックしたボタンに関係なく実行するclickイベントを書き換えました。ビデオ自体ではなく、クリックごとに動画を読み込む際の問題です。
更新2:ビデオhtmlをクリアし、新しいhtmlを挿入する前にロードして初期化し、〜2/3sの時間の読み込みを開始させるいくつかの行を追加しようとしました。
オブジェクトを閉じるのを忘れました – noob
ソースを反映するように修正されたコピー/貼り付けエラー(まだ動作していません)。 – JProffitt