在移动设备上停止 HTML 视频自动播放

Question

在我的网站的桌面版本中，视频会在后台自动播放。我希望视频不在移动设备上自动播放（即如果屏幕宽度

<video id="background-video" autoplay loop muted>
        <source type="video/mp4" src="http://fiercefreedom.org/wp-content/uploads/2018/10/FierceCropped.mp4">
    </video>

$(document).ready(function(){
  var screenWidth = $(window).width();
  if (screenWidth < 800){
		$('#background-video').removeAttr('autoplay');
  } else {
  	$('background-video').attr('autoplay');
  }
});

Answer 1

$(document).ready 仅在页面加载后开始，因此浏览器已经开始自动播放。

相反，您应该从静态 HTML 中删除 autoplay 属性，然后仅在宽度大于 800 时添加它。

---

<video id="background-video" loop muted>
    <source type="video/mp4" src="http://fiercefreedom.org/wp-content/uploads/2018/10/FierceCropped.mp4">
</video>

$(function() {
  var screenWidth = $(window).width();
  if (screenWidth >= 800) {
    $('#background-video').attr('autoplay', 'autoplay');
  }
});