javascript - 防止在移动/javascript 媒体查询宽度上下载视频

Question

我有两种网站布局 - 一种用于移动设备，一种用于桌面。

我正在使用 Zurb Foundation，它在移动设备上隐藏桌面布局，反之亦然。

由于桌面布局包含视频，因此我想尽可能阻止浏览器下载页面的那部分内容。

我可以像这样使用 JavaScript 查询吗

    if (screen.width >= 600) {

<div>Video goes here</div>

    }

要做到这一点？这会起作用吗？这会阻止页面的这一部分在小于 600 像素的屏幕上下载吗？

Answer 1

如果您使用 none 值的 preload 属性，您的浏览器不应加载您的视频:

<video id="myVideo" preload="none"></video>

稍后在您的 js 中，您可以在需要时有条件地加载视频:

if (screen.width >= 600) {
   var myVideo = document.getElementById('myVideo');
   myVideo.load();
   myVideo.play();
}