仅在智能手机上禁用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/