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

我在网站上有一个全宽视频背景，具有自动播放属性。它很好用

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

但视频仍由firefox在智能手机上下载。。。 视频未显示，但仍在缓存中下载

我怎样才能解决这个问题？有没有办法在小屏幕上禁用自动播放，并将其保留在较大的设备上？

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');
  }
});

$（文档）.ready（函数（）{
var screenWidth=$（窗口）.width（）；
//如果窗口宽度小于800，请删除“自动播放”属性
//从视频中
如果（屏幕宽度<800）{
$（'video'）.removeAttr（'autoplay'）；
}否则{
$（'video'）.attr（'autoplay'）；
}
});

jsiddle:

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');
  }
});

$（文档）.ready（函数（）{
var screenWidth=$（窗口）.width（）；
//如果窗口宽度小于800，请删除“自动播放”属性
//从视频中
如果（屏幕宽度<800）{
$（'video'）.removeAttr（'autoplay'）；
}否则{
$（'video'）.attr（'autoplay'）；
}
});

---

jsiddle:

检查屏幕是否有一定大小，并删除

自动播放

，因为它是一个属性，如果存在，它将自动播放是的，但我想在计算机上保留自动播放。这就是为什么要检查屏幕大小，如果是桌面大小，则保留自动播放，如果不是，则删除它。是的。这就是我的问题：如何做到这一点？检查屏幕是否有一定的大小，并删除

autoplay

，因为它是一个属性，如果存在，它将自动播放是的，但我想在计算机上保留autoplay。这就是为什么要检查屏幕大小，如果它是桌面大小，则保留autoplay，如果它没有删除它。是的。这就是我的问题：如何做到这一点？非常感谢Hipady！你刚刚救了我！很好！非常感谢你，希帕迪！你刚刚救了我！很好！