响应式视频，为移动设备提供图像

Question

我希望能够通过链接提供图像，而不是移动设备的视频播放器。

以下是我正在使用的代码：

 <video controls="false" autoplay="autoplay">
   <source src="img/sds.mp4" type="video/mp4" media="all and (min-width:600px)"> 
</video>

在宽度低于600px的设备上我想只显示html，没有视频，是否可以在视频标签内执行此操作？或者我是否必须隐藏整个视频标签并将其替换为仅在移动设备中显示的div标签？

Answer 1

您无法按照描述的方式在源标记中使用媒体查询。您必须在CSS中执行此操作，例如：

@media all  and (max-width : 600px) {
video{
    display:none;
    }
}