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

Question

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

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

由于桌面布局包含视频，如果可能的话，我想阻止浏览器下载页面的该部分。

我可以像这样使用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();
}

Answer 2

仅当屏幕width等于或高于600px时加载视频，如下所示：

if($(window).width() >= 600) {
    loadVid();
}
function loadVid() {
   video = '<video src="http://techslides.com/demos/sample-videos/small.mp4" controls></video>';
   $(".video").append(video);
}

---> 工作可调整大小的小提琴<---（要测试其他宽度，请先调整大小，然后运行代码）