動的にvideo要素の動画を入れ替えるときに気をつけること
HTML5ではvideo要素で（手軽に？）動画を再生できますが、枠だけ書き出しておいて（別にHTML直書きでいいですが）、動画を入れ替える場合は少し注意が必要です。たぶん。
現状で動画フォーマットがいくつか存在しますが、複数のフォーマットをサポートしたい場合は以下のように書きます。
<video controls="controls" width="352" height="198" preload="none" id="videoElm"> <source src="hoge.mp4" type="video/mp4" id="mp4" /> <source src="hoge.ogg" type="video/ogg" id="ogg" /> </video>
動的に書き換えるので、次のような関数用意して再生したい動画のURLを入れればよさげです。
function playMovie(mp4, ogg) {
$('#videoElm')
.html([ // ソースファイルをつっこむ
'<source src="' + mp4 + '" type="video/mp4" id="mp4" />',
'<source src="' + ogg + '" type="video/ogg" id="ogg" />'
].join(''));
}
playMovie(piyo.mp4, piyo.ogg);
で結局何に注意しないとあかんかっていうのは、このままだとiOSで再生ができないんですね。iOSはmp4ファイル等で再生す
るんですけど、source要素を動的につっこんでもだめな様子。。
追記：内容が曖昧すぎたので追記します。
iOSで再生ができない
↓
iOSで入れ替えた動画が読み込まれず再生できない
iOSで再生ができない
↓
iOSで入れ替えた動画が読み込まれず再生できない
なので以下のようになりました。
source要素を動的につっこむのではなく、素直にsrc属性に入れてるだけです。
function playMovie(mp4, ogg) {
if ( /AppleWebKit/.test(navigator.userAgent) ) {
// iOSのとき
$('#videoElm')
.attr('src', mp4); // 素直にsrc属性に書く
} else {
// iOS以外
$('#videoElm')
.html([
'<source src="' + mp4 + '" type="video/mp4" id="mp4" />',
'<source src="' + ogg + '" type="video/ogg" id="ogg" />'
].join(''));
}
}
※ UA判定はもっと良い方法あったらそっち使ってください。
