Question

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

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

由于桌面布局包含视频，我希望阻止浏览器下载该部分页面。

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

    if (screen.width >= 600) {

<div>Video goes here</div>

    }

这样做？这会起作用，这是否会阻止页面的这一部分在小于600px的屏幕上下载？

Answer 1

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

<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 <--- （要先测试其他宽度，请先调整大小，然后再运行代码）

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

2 个答案: