响应式整页视频，可为不同设备查询额外的编辑版本

Question

我正在尝试设置一个带有背景视频的主页，随着浏览器的扩大，它可以抓取不同的视频编辑。到目前为止，我已经能够创建整页视频并编辑了初始视频以适应各种断点。

我了解到视频元素不接受 srcset 并且已经广泛搜索过。有没有人知道解决方案。

我采用移动优先的开发方法进行此操作，对于这个特定的视频作品，我希望在 768px、1200px 和 1600px 处设置断点

非常感谢

#myVideo    {
            z-index: -1;
              position: fixed;
              right: 0;
              bottom: 0;
              min-width: 100%; 
              min-height: 100%;
}

<video playsinline muted controls id="myVideo"
               src="video/COMP27home_loop_432x768.mp4" poster="images/home_loop_432x768_Moment.jpg">
          Your browser does not support HTML5 video.
            
        </video>

Answer 1

您必须阅读有关视频标签的文档。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

通过阅读文档，您可以找到他们使用本地事物的解决方案。您不需要定义自定义样式或其他任何内容。

响应式整页视频，可为不同设备查询额外的编辑版本

Responsive full page video that can query additional edited versions for different devices

javascript

src

html5-video

responsive-design