为什么我不能让这个视频在移动页面加载时自动开始？答案

【问题标题】：Why can't I get this video to automatically start on page load on mobile?为什么我不能让这个视频在移动页面加载时自动开始？
【发布时间】：2017-02-27 15:34:52
【问题描述】：

我将此视频作为 Bootstrap 的背景，我想在页面加载时自动播放。它适用于桌面 Chrome，但不适用于移动设备。

它是一个小的 .mp4 文件，使用以下命令创建：

<video class="video-fluid" id="video1" autoplay loop>
    <source src="videos/light-swaying.mp4" type="video/mp4" />
</video>

在移动设备上显示的只是第一帧的静止画面，而不是移动视频。我在身体底部添加了这个脚本，它实际上可以很好地启动视频。它循环和一切：

<script type="text/javascript">
    var video = document.getElementById('video1');
    var aboveView = document.getElementById('video-carousel-example2');
    aboveView.addEventListener('click', function () {
        video.autoplay = true;
        video.play();
    }, false);
</script>

不过，唯一的问题是，我必须点击视频才能真正开始播放。我在同一个地方尝试了这个脚本，但没有任何运气：

<script type="text/javascript">
    var video1 = document.getElementById('video1');
    video1.autoplay = true;
    video1.play();
</script>

那么有人知道如何解决这个问题并让它自动播放吗？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

哪个版本的 Chrome？因为： “Android 上的 Chrome 以前版本中禁用了自动播放，因为它可能具有破坏性、需要大量数据并且许多用户不喜欢它。”

来源： https://developers.google.com/web/updates/2016/07/autoplay

【讨论】：

非常感谢，我刚刚添加了我从文章中读到的muted标签，砰，它自动播放了！

【解决方案2】：

我们在 ipad 和平板电脑中也发现了这个问题，因为 ipad 和平板电脑不支持自动播放

要查看这些限制的完整列表，请参阅官方文档：https://webkit.org/blog/6784/new-video-policies-for-ios/

为此，您需要通过检查您的显示器分辨率来触发您的点击功能，我不熟悉 javascript，所以我使用 jquery 编写了这个

     $(document).ready(function(){
      var screenWidth = $( window ).width();
       if(screenWidth <= 1024)//just i am checking for ipad only
      {
          $('#video-carousel-example2).trigger('click');
      }
     $('#video-carousel-example2).click(function(){
            var video1 = document.getElementById('video1');
            video1.play();
       })
    });

【讨论】：