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

Question

在我的网站的桌面版本上，视频会在后台自动播放。我希望视频不能在移动设备上自动播放（例如，如果屏幕宽度<800），以便视频不会下载。由于某种原因，我无法使该特定视频停止使用javascript自动播放。这是相关的文本：

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