私は video.js を使用して、レスポンシブ レイアウトで html5 ビデオを提供しています (コンテナに合わせて幅と高さを変更するDave Rupert の微調整を使用しています)。私は現在、必要に応じてより大きなビデオを提供する必要があるサイトに取り組んでおり、メディア属性を使用して別のソース ビデオを提供したいと考えています。JavaScript を使用してソースを変更することもできますが、可能であればメディア クエリを使用できるようにして、JS が無効になっていても適切なビデオが提供されるようにしたいと考えています。
次のようにコードを設定しました。
<video id="lightTouchVideo" class="video-js vjs-default-skin" controls preload="none" poster="/Content/images/video-posters/light-touch.jpg" data-setup="{}">
<source src="/Content/video/light-touch-240p.mp4" type='video/mp4'>
<source src="/Content/video/light-touch-240p.webm" type='video/webm'>
<source src="/Content/video/light-touch-240p.ogv" type='video/ogv'>
<source src="/Content/video/light-touch-360p.mp4" type='video/mp4' media="all and (min-width:599px)">
<source src="/Content/video/light-touch-360p.webm" type='video/webm' media="all and (min-width:599px)">
<source src="/Content/video/light-touch-360p.ogv" type='video/ogv' media="all and (min-width:599px)">
</video>
2 つのソースに明らかに異なるビデオを使用してみましたが、ソースに最初にリストされている方を取得します。最新の Firefox、Chrome、IE で試したので、ブラウザが video メディア属性をサポートしていないということではないと思います (ただし、仕様からの削除が検討されていると噂されていました)。
では、video.js は media 属性をサポートしていますか?