Javascript 阻止视频在手机上下载特定来源

我正在构建一个网页，其中有多个视频，因此我为每个视频导出了两种不同的媒体：一种是在桌面上显示的高质量媒体，另一种是在手机上显示的低质量媒体

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

<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>

您的浏览器不支持HTML5视频。

其中mob-hidden和des-hidden是显示为：none的css类；防止它们出现在手机或桌面上

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

你能帮助理解如何防止网页下载它不打算使用的媒体吗？因此，在桌面上播放低质量的视频，在手机上播放高质量的视频

多谢各位

试试这个：

试试这个：

---

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

在CSS中检查页面宽度 由于您的视频有两个不同的类，您可以编写如下代码

.des隐藏{
显示：无；
}
@仅介质屏幕和（最大宽度：768px）{
/*移动电话：*/
戴斯·希德{
显示：无
}
.隐藏暴徒{
显示：块；
}
}

但是您必须将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>

您的浏览器不支持HTML5视频。

在JS中检查页面的宽度 您可以使用这样的方法更改ID的类：

window.addEventListener（“调整大小”），函数（事件）{
如果（document.body.clientWidth，我可以在这里看到3种可能的方法

在CSS中检查页面宽度
由于您的视频有两个不同的类，您可以编写如下代码

.des隐藏{
显示：无；
}
@仅介质屏幕和（最大宽度：768px）{
/*移动电话：*/
戴斯·希德{
显示：无
}
.隐藏暴徒{
显示：块；
}
}

但是您必须将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>


您的浏览器不支持HTML5视频。

在JS中检查页面的宽度
您可以使用这样的方法更改ID的类：

window.addEventListener（“调整大小”），函数（事件）{
如果（document.body.clientWidth您可以使用两个不同的视频标记，一个用于桌面，一个用于移动设备，并且只向视频标记添加一个源。您可以使用JavaScript检测某些功能，如触摸、陀螺仪和移动电话可能具有的功能。然后根据该查询添加高分辨率或低分辨率视频。@EmielZuurbier可能更好只需检查屏幕大小。因为iPad（和一些笔记本电脑）也有这些功能，但它们的屏幕可能足够大，可以播放高分辨率视频。你可以使用两个不同的视频标签，一个用于桌面，另一个用于手机，并且只向视频标签添加一个源。你可以使用JavaScript检测某些功能，如触摸、陀螺仪、手机应有的功能。然后添加高分辨率或低分辨率基于该查询的视频。@EmielZuurbier可能最好只检查屏幕大小。因为iPad（和一些笔记本电脑）也有这些功能，但他们的屏幕可能足够大，可以播放高分辨率的视频。谢谢你的回复，你推荐的CSS方法基本上就是我正在做的。问题是，显示块或无元素似乎不足以阻止页面下载源代码。我正在看这个，我会给你一个代码笔链接这是一个工作示例！@baband我更新了我的答案，我还创建了一个工作示例：非常感谢你的答案和示例，我已经将其应用到我的代码中，但不幸的是，浏览器一直在下载桌面和移动src文件谢谢你的anwser，你推荐的CSS方法基本上就是我正在做的。问题是显示块或无元素似乎不足以阻止页面下载源代码。我正在查看此内容，我将向您发送一个带有工作示例的代码笔链接！@bab我更新了我的答案，我还创建了一个工作示例：非常感谢您的答案和示例，我已将其应用到我的代码中，但不幸的是e浏览器不断下载桌面和移动src文件