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

Question

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

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

但是视频仍然由智能手机上的火狐下载...视频没有出现，但仍在缓存中下载...

我该如何解决这个问题？有没有解决方案可以在小屏幕上禁用自动播放并将其保留在较大的设备上？

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/