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

Posted 2023-03-15

技术标签:

【中文标题】防止视频在移动设备上下载某些源【英文标题】：prevent video to download certain source on mobile 【发布时间】：2021-01-12 08:43:02 【问题描述】：

我正在构建一个包含多个视频的网页，因此我为每个视频导出了 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 类是不够的。

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

非常感谢！

【问题讨论】：

您可以使用 2 个不同的视频标签，一个用于桌面，一个用于移动设备，并且只向视频标签添加一个来源。您可以使用 javascript 来检测某些功能，例如触摸、陀螺仪等手机应该具备的功能。然后根据该查询添加高分辨率或低分辨率视频。 @EmielZuurbier 最好只检查屏幕尺寸。由于 iPad（和一些笔记本电脑）也具有这些功能，但它们的屏幕可能足够大，可以播放高分辨率视频。 【参考方案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>

【讨论】：

【参考方案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

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

在 CSS 中检查页面的宽度

在JS中检查页面的宽度

在后端检查设备

更多详情