css - 在 CSS 断点禁用 html5 视频下载

Question

我有一个可以在浏览器中自动播放的短循环 html5 视频。当浏览器宽度减小到 870px 时，由于 css 媒体查询和显示:无；

如果窗口以较小的尺寸开始(如在移动设备上)，我如何确保视频不会下载？

该视频为 1.8mb，我不想不必要地占用用户的数据使用量。谢谢!

<video id="video_background" preload="none" autoplay="false" loop="loop" muted="muted" volume="0">
<source src="video/creativeishappening.mp4" type="video/mp4">
    Video not supported
</video>

---

$(function() {

// onload
if(document.body.clientWidth >= 870) {
    $('video').attr('autoplay', true);
}

});

Answer 1

我试图做同样的事情，经过一些跨浏览器测试后，我发现动态添加“自动播放”属性并不能始终如一地工作

(在 Firefox 中很好，在 IE(10) 中完全没有，仅在文档就绪时/在 Chrome 中不在调整大小时)

所以要让它按预期工作，而不是

$('video').attr('autoplay', true);

我用过

$('video')[0].play();