Video.js - 自动播放和循环在手机上不起作用答案

【问题标题】：Video.js - Autoplay and Loop not working on phoneVideo.js - 自动播放和循环在手机上不起作用
【发布时间】：2013-07-06 09:19:44
【问题描述】：

我使用此代码制作视频（例如横幅，因此没有控件）自动播放并永远循环播放。

<video id="video1" class="video-js vjs-default-skin"
      controls width="900" height="500"
      poster="myposter.jpg"
      data-setup='{
        "controls": false,
        "loop": "true",
        "autoplay": true, 
        "preload": "true"}'>
         <source src="thisismyvideoyay.webm" type='video/webm' />
    </video>

它在我的电脑上运行良好，但在我的手机（Android OS 4.2.2 with Chrome）上，它不会自动播放或预加载，也不会在完成后循环播放。

我在 Video.js 页面上读到了这篇文章：

自动：立即开始加载视频（如果浏览器同意）。一些 iPhone 和 iPad 等移动设备不会将视频预加载到为了保护用户的带宽。这就是为什么价值是称为“自动”，而不是像“真实”这样更最终的东西。

我将预加载设置为 true，但它仍然不会自动播放或循环播放。

这是我的浏览器的一个功能吗？我该如何避免？

我在其他浏览器上试过：

UC 浏览器似乎根本不支持 HTML5？
股票浏览器显示一个小视频图标，但也不显示播放器
↑与傲游相同↑

【问题讨论】：

您引用了关键点：“如果浏览器同意”。为什么要颠覆用户的浏览器偏好？
因为否则用户将看不到我网站的内容。我引用了如果我使用“true”而不是“auto”，它不会询问浏览器是否同意。
它不询问浏览器是否同意，浏览器可以决定是否尊重autoplay属性。移动用户有正当理由不通过昂贵且有限的数据连接自动下载视频内容，强迫他们无论如何都要这样做，以便他们“看到您网站的内容”是不好的。考虑为他们提供一些内容，让他们认为观看您的视频值得花时间和金钱，而不是试图诱使浏览器为他们花费时间和金钱。
别那么顽强。如果不可能，好吧，我明白了。我为自己制作了那个网站，这样我就可以在手机上观看我的文件了。我在尝试时使用了我的 WiFi 连接。如果有人愚蠢到通过他的移动连接访问我的所有照片的网站，如果他的数据限制已满，那是他的错。祝你有美好的一天。

标签： html google-chrome video.js

【解决方案1】：

要解决 iOS 上的自动播放问题，请不要使用 videojs options 自动播放视频。

换句话说，这是行不通的：

<video id="my-video-id" autoplay></video>

这也不会：

videojs('my-video-id', {
    "autoplay": true
});

而是等待视频对象加载，然后触发播放动作：

videojs('my-video-id').ready(function() {
    this.play();
});

【讨论】：

此方法也适用于 Chrome。我无法仅使用选项在 Chrome 中自动播放。

【解决方案2】：

在手机上，您无法让它循环或预加载数据。但我确实有一个可以自动播放的解决方案。你可以在这里使用我的代码 = http://www.andy-howard.com/recreate-bbc-iplayer/index.html

并且只需在准备好的文档上添加一个额外的点击功能。这将使手机上的浏览器点击图像，然后将数据标签转换为视频标签，然后转换为 videojs 播放器，然后播放:)

希望对您有所帮助。

【讨论】：

【解决方案3】：

在移动设备上，如果您输入muted 选项，您可以自动播放

<video autoplay muted>
  <source src="video.webm" type="video/webm" />
  <source src="video.mp4" type="video/mp4" />
</video>

Chrome v53：https://developers.google.com/web/updates/2016/07/autoplay

iOS 10：https://webkit.org/blog/6784/new-video-policies-for-ios

【讨论】：

感谢您的回复！您链接的 Google Developers 页面有很多前几个月的 cmets，表明 Google 已再次禁用此功能，并且它不再工作了。这是真的吗？
@Lesik2008 它仍然有效，我昨天试过了。看，这是我的演示，它在我的 android 上播放 fonotv.com
另外，我在准备好的回调函数中触发播放器，如@andrewtweber 建议的：this.play()

【解决方案4】：

这对我有用，在视频标签上使用它

data-setup='{ "controls": false, "autoplay": true, "preload": "auto", "loop":true }'

【讨论】：

【解决方案5】：

player.ready(function() {
  setTimeout(function() {
     player.play();
  }, 1000);
});

【讨论】：

请不要发布仅代码的答案。对于未来的读者来说，看到解释为什么这回答了这个问题会更有趣。另请解释这如何改进现有答案。