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