複数のビデオを含むページがあり、視聴者は一度に 1 つのビデオを選択できます。Chrome 18.0 と Safari 5.1 で動作するようになりましたが、それだけです。
html:
<div class="video" data-id="1" >
<video width="auto" height="100%" controls="controls">
<source src="videos/cadillac_x264.mp4" type="video/mp4" />
<source src="videos/cadillac_x264.ogv" type="video/ogg" />
<source src="videos/cadillac_x264.webm" type="video/webm" />
<object data="videos/cadillac_x264.mp4" width="auto" height="100%">
<embed src="videos/cadillac_x264.swf" width="auto" height="100%" />
</object>
</video>
</div>
上記の div は 6 つあります。
jQuery:
$(function(){
$('div.video').hide();
$('.icon').click(function(){
var id=$(this).data('id'),
thisDiv=$("div.video[data-id='" + id +"']"),
thisVideo=$("div.video[data-id='" + id +"']").find('video');
$('video').each(function () {
this.pause();
this.currentTime=0;
});
$('div.video').not(thisDiv).fadeOut();
thisDiv.fadeIn();
thisVideo.get(0).play();
});
});
FF 11.0 のコンソールには次のように書かれています。
WalkingDomProcessor.process: Can't find engine for: http://mysite.com/directory/index.php
と:
An attempt was made to use an object that is not, or is no longer, usable
[Break On This Error]
this.currentTime = 0;
そしてIE 8では:
this.pause();
Object doesn't support this property or method
すべてのブラウザーでビデオを表示する基本をすべてカバーしたと思い、jQuery は最新のすべてのブラウザーでうまく機能するという印象を受けました。
確かに、すべてのビデオが正しいディレクトリにあり、スクリプトを正しく呼び出しているようです。
これらのエラーが発生するのはなぜですか? ビデオが再生されないのはなぜですか?
この投稿が長くなって申し訳ありませんが、徹底したかっただけです。