11

私はレスポンシブ Web デザインを使用して単純な Web ページを書いているので、CSS3 メディア クエリは画面解像度に基づいてさまざまなスタイルシートを提供します。簡単にするために、iPhone版とデスクトップ版があるとしましょう。動画を配信するために html5 video タグを使用しています。デスクトップでサイトにアクセスした場合は 720p の動画を配信し、iPhone でアクセスした場合はより小さな 320p の動画を配信したいと考えています。私は間違っていますか、html/cssだけで簡単に行う方法はありませんか? ビデオの src 属性を動的に変更するには、javascript を使用する必要がありますか? もしそうなら、ベストプラクティスは何ですか？前もって感謝します。

4

1 に答える 1

12

media属性をさまざまな要素に追加して、sourceメディア クエリ設定に一致するデバイスにさまざまなビデオを提供できるようにすることができます (上記の DBUK でリンクされているように)。

例えば：

<video controls>
   <source src="mySmallVideo.webm" type="video/webm" media="all and (max-width:600px)">
   <source src="myVideo.webm" type="video/webm">
</video>

更新 – 2012 年 7 月 24 日これは仕様から削除さ れる可能性があります。

于 2011-11-17T12:18:55.057 に答える