Question

我将此视频作为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>

那么有没有人知道如何解决这个问题并使其自动播放？

Answer 1

哪个版本的Chrome？因为：＆＃34;在Android的早期版本的Chrome中禁用了自动播放功能，因为它可能会造成破坏性，数据不足以及许多用户不喜欢它。＆＃34;

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

Answer 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();
       })
    });

为什么我不能让这个视频在移动设备上自动启动页面加载？

2 个答案: