时间戳

首页 > 解决方案 > 响应式整页视频，可以查询不同设备的附加编辑版本

javascript - 响应式整页视频，可以查询不同设备的附加编辑版本

问题描述

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

我知道视频元素不接受 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>

标签： javascriptresponsive-designhtml5-videosrc

解决方案

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

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

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

推荐阅读