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

Question

我在具有autoplay属性的网站上拥有全角视频背景。工作正常。

但是，我不想在智能手机上显示此视频。所以我用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/