javascript - 防止视频在移动设备上下载某些源

Question

我正在构建一个包含多个视频的网页，因此我为每个视频导出了 2 种不同的媒体：一种在桌面上显示的高质量，另一种在移动设备上显示的低质量。

为此，我将我的视频元素设置为：

<video autoplay muted loop playsinline id="video-1">
            <source class="mob-hidden" src="video-1.mp4" type="video/mp4">
            <source class="des-hidden" src="video-1-low.mp4" type="video/mp4">
              Your browser does not support HTML5 video.
</video>

其中 mob-hidden 和 des-hidden 是带有显示的 css 类：无；以防止它们出现在移动设备或桌面设备中。

问题是我注意到，在移动设备和桌面设备上，即使只使用一个，页面仍然会下载两个视频版本，所以我猜使用 css 类是不够的。

你能帮助了解如何防止网页下载它不会使用的媒体吗？所以在桌面上的低质量视频和在移动设备上的高质量视频。

非常感谢！

标签： javascripthtmlcsshtml5-video

Answer 1

尝试这个：

<video controls>
    <source src="the-sky-is-calling-large.mp4" media="screen and (min-width:800px)">
    <source src="the-sky-is-calling-large.webm" media="screen and (min-width:800px)">
    <source src="the-sky-is-calling-small.mp4" media="screen and (max-width:799px)">
    <source src="the-sky-is-calling-small.webm" media="screen and (max-width:799px)">
</video>