私は、どこでも使えるビデオプレーヤーを作ろうとしています。今のところ、私は
<video>
<source src="video.mp4"></source>
<source src="video.ogv"></source>
<object data="flowplayer.swf" type="application/x-shockwave-flash">
<param name="movie" value="flowplayer.swf" />
<param name="flashvars" value='config={"clip":"video.mp4"}' />
</object>
</video>
(例えば、video for everybodyのように、いくつかのサイトで見られます) ここまではいいですね。
ここまでは良かったのですが、今度はビデオプレイヤーと一緒にプレイリスト/メニューのようなものを用意して、そこから他のビデオを選択できるようにしたいと思います。それらはすぐにプレイヤー内で開かれるべきです。そこで、ビデオのソースを"dynamic change of the source"(dev.opera.com/articles/everything-you-need-to-know-html5-video-audio/ - セクション "Let's look at another movie" で見られるように)javascriptを使って、ビデオのソースを動的に変更しなければなりません。
というわけで、<source>
タグを変更するためのJSは以下のようなものになります。
<script>
function loadAnotherVideo() {
var video = document.getElementsByTagName('video')[0];
var sources = video.getElementsByTagName('source');
sources[0].src = 'video2.mp4';
sources[1].src = 'video2.ogv';
video.load();
}
</script>
問題は、これがすべてのブラウザで動作しないことです。つまり、Firefox =O 私が抱えている問題を観察することができる素敵なページがあります: http://www.w3.org/2010/05/video/mediaevents.html
load()メソッドを起動するとすぐに(firefoxですが)ビデオプレーヤーが停止します。
複数の<source>
タグを使わずに、<video>
タグの中にsrc属性を1つだけ入れると、Firefoxでは全ての動作が可能になることがわかりました。
そこで、src属性を使用し、canPlayType()関数を使用して適切なファイルを決定することを計画しています。
私のやり方が間違っているのか、物事を複雑にしているのか?
Modernizrは私にとって魅力的な働きをしてくれました。
私がしたことは、<source>
を使わなかったことです。なぜかというと、load()が最初に呼ばれたときにしかビデオが動作しないからです。代わりに、videoタグのsource属性を使用しました -><video src="blabla.webm" />
そして、Modernizrを使用して、ブラウザがサポートしているフォーマットを判断しました。
<script>
var v = new Array();
v[0] = [
"videos/video1.webmvp8.webm",
"videos/video1.theora.ogv",
"videos/video1.mp4video.mp4"
];
v[1] = [
"videos/video2.webmvp8.webm",
"videos/video2.theora.ogv",
"videos/video2.mp4video.mp4"
];
v[2] = [
"videos/video3.webmvp8.webm",
"videos/video3.theora.ogv",
"videos/video3.mp4video.mp4"
];
function changeVid(n){
var video = document.getElementById('video');
if(Modernizr.video && Modernizr.video.webm) {
video.setAttribute("src", v[n][0]);
} else if(Modernizr.video && Modernizr.video.ogg) {
video.setAttribute("src", v[n][1]);
} else if(Modernizr.video && Modernizr.video.h264) {
video.setAttribute("src", v[n][2]);
}
video.load();
}
</script>
これが参考になれば幸いです :)
もし、Modernizrを使いたくない場合は、CanPlayType()を使うことができます。
同じビデオプレーヤーに新しいファイルを読み込ませるのではなく、<video>
要素全体を消して作り直してみてはいかがでしょうか。src'が正しければ、ほとんどのブラウザが自動的に読み込んでくれます。
例(Prototypeを使用)。
var vid = new Element('video', { 'autoplay': 'autoplay', 'controls': 'controls' });
var src = new Element('source', { 'src': 'video.ogg', 'type': 'video/ogg' });
vid.update(src);
src.insert({ before: new Element('source', { 'src': 'video.mp4', 'type': 'video/mp4' }) });
$('container_div').update(vid);