具有不同文件的 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

属性，因此您可以执行多种操作，包括：

<video  playsinline muted preload="metadata">
    <source src="" type="" media="(orientation: landscape)">
    <source src="" type="" media="(orientation: portrait)">
</video>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#using_the_media_attribute_with_video

Answer 2

仅当屏幕的

@media

为

max-width

时，您才可以使用

500px

查询来应用特定宽度：

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