HTML5ビデオのレスポンシブデザインが異なるファイル

Question

HTML5ビデオに相当するsrcsetはありますか？現時点では私は、ページ上の動画のグリッドを持っている行の3、すべてのこのような5行（合計でとても15本のビデオ）に：

<video width="400" poster="14.jpg" loop="loop" autoplay="autoplay"> 
    <source src="14.webm" type="video/webm"> 
    <source src="14.mp4" type="video/mp4"> 
</video> 

私がいる問題は、私のページ要求があるということです約6MBまで。動画のグリッドとして、私は...

<div class="row"> 
    <video width="400" poster="13.jpg" loop="loop" autoplay="autoplay"> 
    <source src="13.webm" type="video/webm"> 
    <source src="13.mp4" type="video/mp4"> 
    </video> 
    <video width="400" poster="14.jpg" loop="loop" autoplay="autoplay"> 
    <source src="14.webm" type="video/webm"> 
    <source src="14.mp4" type="video/mp4"> 
    </video> 
    <video width="400" poster="15.jpg" loop="loop" autoplay="autoplay"> 
    <source src="15.webm" type="video/webm"> 
    <source src="15.mp4" type="video/mp4"> 
    </video> 
</div> 

3の幅でいる...〜320PXの画面サイズに小型のデバイスのために、私は私ができる、3つの400ピクセルのビデオファイルを必要としないことそのかなり明白小さいものを使用してください。

私はこのように私のページをロードするためにリファクタリングを開始するちょうど約だ：

<div class="row"> 
    <video width="400" poster="13.jpg" loop="loop" autoplay="autoplay"> 
    </video> 
    <video width="400" poster="14.jpg" loop="loop" autoplay="autoplay"> 
    </video> 
    <video width="400" poster="15.jpg" loop="loop" autoplay="autoplay"> 
    </video> 
</div> 

そして、本質的に言ってはJavaScriptを使用します。

if($(window).width() < 500){ 
    $('#video13').append('<source src="13-SMALL-FILE.mp4" type="video/mp4">') 
}else{ 
    $('#video13').append('<source src="13-LARGE-FILE.mp4" type="video/mp4">') 
} 

はその良い選択肢であるか、そこにありますより良い方法または既に存在する図書館？多くのグーグル・グーグルでは、私は非常に有益な情報を見つけられませんでした。

Answer 1

私はメディアクエリーに

@media screen and (max-width:500px){ 

ビデオ{幅！：100％重要;}与えている }

を