具有不同文件的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">')
}

這是一個好選擇，還是有更好的方法或已經存在的庫？ 經過大量的Google搜索之后，我沒有找到太多有用的信息。

Answer 1

僅當屏幕的max-width為500px時，才可以使用@media查詢來應用特定的寬度：

@media screen and (max-width:500px){
    video { width:100% !important; }
}