1

いくつかの状況でHTML5ビデオを画像に置き換えるクリエイティブな方法を探しています。ビデオを機能させるためにフラッシュなどを扱いたくない...むしろ彼らに画像を与えたい。

次の場合に画像を提供します。

  1. デスクトップブラウザがHTML5ビデオをサポートしていない場合

  2. ユーザーがモバイルの場合

単純なようです...特にdisplay:none;ビデオがサポートされていない場合にcssタグにModernizrを使用することによって...警告は次のとおりです：HTML5ビデオは端から端まであり、JavaScriptを使用して画面の中央に配置されます。同じ動作をします。

私の最初の考えは単純でした：ポスター属性。iPadとiPhone3/ 3gsで動作しますが、iPhone 4でも再生できます。また、「これが何であるかわからない」と表示され、ポスターも気にしないIEでは動作しません。 。

http://kzmnt.com/test/にテストを設定しました

あなたのアドバイスを楽しみにしています！

4

2 に答える 2

2

HTML5ビデオがサポートされているかどうかは、次の方法で確認できます。

function supports_h264_baseline_video() {
 if (!supports_video()) { return false; }
 var v = document.createElement("video");
 return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}

モバイルに関しては、いくつかのメディアクエリを使用してみてください。

上記のコードはhttp://diveintohtml5.ep.io/detect.html#video-formatsからのものです。

于 2011-07-05T20:14:34.587 に答える
1

約1100px後にメディアクエリを使用し、カバーに設定されたcss背景サイズを使用した画像に置き換えました！

于 2011-07-20T07:07:09.543 に答える