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

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

Stop HTML Video Autoplay on Mobile Devices

html

javascript

video

mobile

autoplay