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

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

Disable HTML5 video autoplay only on smartphone

html

css

video

mobile

smartphone