仅在智能手机上禁用HTML5视频自动播放

Question

我在具有自动播放属性的网站上拥有全宽视频背景。它工作正常。

但是，在智能手机设备上，我不想显示此视频。 所以我使用CSS：display：none;

但视频仍然是Firefox上的智能手机下载... 视频不会出现，但它仍然是下载缓存...

我该如何解决呢？是否有解决方案来禁用小屏幕上的自动播放并将其保留在较大的设备上？

Answer 1

HTML

<video controls autoplay> 
    <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4"> 
</video> 

的Javascript：

$(document).ready(function(){ 
    var screenWidth = $(window).width(); 
    // if window width is smaller than 800 remove the autoplay attribute 
    // from the video 
    if (screenWidth < 800){ 
     $('video').removeAttr('autoplay'); 
    } else { 
    $('video').attr('autoplay'); 
    } 
}); 

的jsfiddle：https://jsfiddle.net/rowj0sae/