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

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 类是不够的。

您能否帮助了解如何防止网页下载不会使用的媒体？所以在桌面上的视频质量很差，而在移动设备上的视频质量很高。

非常感谢！

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>

Answer 2

我可以在这里看到 3 种潜在的方法

在 CSS 中检查页面的宽度

由于您的视频有两个不同的类，您可以编写类似这样的代码

.des-hidden{
 display: none;
}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  .des-hidden{
     display:none
   }
   .mob-hidden{
     display: block;
   }
}

但是您必须将您的 HTML 更改为类似的内容才能使其正常工作

<video autoplay muted loop playsinline id="video-1" class="mob-hidden">
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>

<video autoplay muted loop playsinline id="video-2" class="des-hidden">
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>

在JS中检查页面的宽度

您可以使用类似的方法更改您的 ID 类：

window.addEventListener("resize", function(event) {
    if (document.body.clientWidth <= 768) {
        document.getElementById("des-hidden").style.display = "none";
        document.getElementById("mob-hidden").style.display = "block";
    } else {
        document.getElementById("des-hidden").style.display = "block";
        document.getElementById("des-hidden").style.display = "none";
    }
});

在后端检查设备

根据您的后端，如果您有一个 (PHP, Node.Js) ，您可以检查用户代理，并决定显示一个视频或另一个

如果你使用 PHP，你可以看看这个： Simplest way to detect a mobile device in PHP

或者如果你使用 NodeJs ： Identify if the request is coming from mobile or not

更多详情

在最近的浏览器上，使用display:none CSS 属性将完全跳过文件加载，这意味着视频甚至不会被浏览器请求，从而节省加载时间和数据使用 （见Does “display:none” prevent an image from loading?

使用后端解决方案有助于确保正确的视频接收正确的视频，从而避免无用的加载时间，但如果加载后页面宽度发生变化，您的页面将更难适应

所以如果你不想处理 Ajax 或 nodeJs 异步，我建议使用 CSS 选项