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。正如我在3個廣泛的視頻格...

<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> 

...它很明顯，對於〜320像素的屏幕尺寸小的設備我並不需要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％的重要！}