通常、ビデオを HTML5 ページに埋め込むには、次を使用します。
<video poster="">
<source type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" src="video/demo.mp4"></source>
<source type="video/ogg; codecs="theora, vorbis"" src="video/demo.ogg"></source>
<source type="video/webm; codecs="vp8, vorbis"" src="video/demo.webm"></source>
</video>
私は知っています、フラッシュフォールバックはありません。この状況では必要ありませんでしたが、それはこの質問の目的ではありません。
私の質問は、モバイル ブラウザーとデスクトップ ブラウザーの両方に対応できるビデオを埋め込む方法です。このデモ ビデオが 20MB の範囲のどこかにあるとしましょう。canplaythrough を次のように使用します。
var onCanPlay = function(event) {
initLoad = false;
video.controls = true;
sb.removeEvent(this, 'canplaythrough');
sb.removeEvent(this, 'load');
return false;
};
if(initLoad) {
video.play();
if(video.readyState !== 4) {
video.addEventListener('canplaythrough', onCanPlay, false);
video.addEventListener('load', onCanPlay, false); //add load event as well to avoid errors, sometimes 'canplaythrough' won't dispatch.
setTimeout(function(){
video.pause(); //block play so it buffers before playing
}, 1);
}
} else {
if(video.currentTime > 0 && video.paused == false) {
video.play();
}
}
注: イベント ハンドラーの前にある sb は無視してください。フロントエンド フレームワークにカスタム イベント ハンドラーを実装し、これを運用コードから直接コピーしました。
通常、ユーザーにシームレスに再生されるように、ビデオの読み込みを十分に処理する方法です。これは問題なく機能しますが、モバイルでは...非常に大きなビデオファイルであるため、ロードに時間がかかり、正直なところエクスペリエンスが台無しになります.
モバイル版とデスクトップ版を提示するのが答えですか?
<video controls>
<source src="demo-small.webm" type="video/webm" media="all and (max-width:600px)">
<source src="demo.webm" type="video/webm">
</video>
メディア クエリが仕様から削除されたという記事をいくつか読んだことがありますが、ビデオを正しく提供しているかどうかを再考するきっかけになりました。どうにかしてサーバーからビデオをストリーミングし、HTML5 タグを完全に避けたほうがよいでしょうか? その場合、私はいくつかの方向性を使用できます...