防止在移动/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();
}

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);
}

---> Working resizable Fiddle <---（在其他宽度下测试，首先调整大小，然后运行代码）