Question

我正在尝试让背景视频在移动设备上自动播放。当这种情况没有发生时，该网站的效果将非常丧失。

我喜欢台式机上的外观，但不喜欢手机上的外观。根据尝试和浏览器的不同，有时我只会得到空白的灰色/蓝色方形背景，视频的poster属性（也就是图像）或带有播放按钮的poster属性它。我正在使用Chrome和Safari在iPhone XR上进行测试。

这是我当前的代码：

  <video class="video-intro" poster="../img/gtr_background.png" playsinline="" controls autoplay="autoplay" muted="" loop="">
    <source src="https://srv-file14.gofile.io/download/tkE1hc/gtr_background.mp4" type="video/mp4">
  </video>

我尝试过的事情：

据称，在iOS和Chrome中启用了自动播放功能，并具有静音效果，但这并不能解决我的问题。

controls，playsinline，autoplay和muted属性（视频始终没有声音）。

我已经像这样尝试过jQuery：

$(document).ready(function(){

    $('video').prop('muted',true).play();

}

我已经检查了关于S / O的十几个类似问题，但无济于事。

我注意到的一件事是，当视频托管在我自己的服务器上（位于类似../vid/gtr_background.mp4的文件夹或类似文件夹中）时，这显然起作用了，但是我不想托管视频这是我自己的原因，因为我们每天大约有1600位访问者，每天有15-20k次点击（更新：我的确看到了我的带宽未计量，所以也许没关系）。

所有这些都表明，加载的视频约为20 MB。我看到了对移动用户和数据的担忧，因此，如果有一种方法只能通过WiFi提供视频，否则只能通过海报提供，这也许是一种选择。我只是没看过。

如何在移动设备上自动播放HTML5视频？

0 个答案: