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>

...很明显，对于屏幕尺寸为~320px的小型设备，我不需要3个400px的视频文件，我可以使用较小的设备。

我即将开始重构以加载我的页面：

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

视频{width：100％！important;} }

带有不同文件的HTML5视频，用于响应式设计

1 个答案: