我正在使用video
标签来显示分辨率为768px及以上的视频。
使用移动优先方法,我将视频容器和video
标签设置为display: none
。
然后在媒体查询中,将视频容器和video
标签设置为display: block
。
<video width="100%" loop="true" autoplay="autoplay" loop muted>
<source src="/-/video/welcome.mp4" type="video/mp4">
<source src="/-/video/welcome.webm" type="video/webm">
<source src="/-/video/welcome.ogv" type="video/ogv">
</video>
使用开发工具时,即使将容器和video
标签设置为display: none
,我仍然看到视频文件正在以小于768px的显示尺寸加载和播放。
有人知道在媒体查询显示视频之前是否有停止视频播放或加载的方法吗?