Question

我有一个短循环的html5视频，可以在浏览器中自动播放。当浏览器宽度减少到870像素时，由于css媒体查询和display：none，视频消失了。

如果窗口以较小的尺寸启动，如移动设备，如何确保视频无法下载？

该视频为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

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

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

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

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

我用过

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

Answer 2

您自动播放的视频是由于＆＃34;自动播放＆＃34;标签中的属性。

所以你希望视频自动播放取决于加载时的窗口大小。因此，您可以手动添加属性，如下所示：

$(function() {

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

    // If you want to autoplay when the window is resized wider than 780px 
    // after load, you can add this:

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

Answer 3

最新版本的iOS和Android不会自动播放视频。必须通过用户交互启动它们。

这已经实施，以避免用户对其移动运营商带来的带宽限制。

因此，解决方案是根据屏幕宽度显示/隐藏播放控件。

此外，为避免不必要的下载，如果视频没有显着增加用户体验，则应考虑不显示视频，显示后备图像，甚至不显示任何内容。

在CSS断点处禁用html5视频下载

3 个答案: