javascript - 停止移动设备上的 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');
  }
});