移动浏览器上HTML5视频自动播放

Question

我正在使用以下HTML5和JQuery代码来播放一个视频播放列表，其中视频的URL存储在数组URLArray[]中。

function NextFrag(){

 if (index < URLArray.length)
 {
   $("#VideoContainer").html('<video  id="video1" controls autoplay width="95%"> "<source src= "'+ URLArray[index]+ '" type="video/mp4"></source> </video>' );
   index++;
   $("#video1").bind( "ended", NextFrag);
 }
}

众所周知，HTML5的自动播放功能在所有移动电话上都被禁用了，因此我必须在移动电话上手动播放每个视频片段。这绝对不是我想要的。

我真的想知道这方面的替代方案。我非常感兴趣的是可以包含的代码段，使其像自动播放一样，而不涉及用户交互。

是否可能将其转换为Android应用程序以正常工作。我真的需要将其工作像播放列表一样，我不关心如何实现，我只需要这个功能。

请帮帮我。

- SotonJ

---

我发现了一个在移动设备上使自动播放工作的技巧，你可以在下面找到我的答案并尝试一下：https://dev59.com/bGcs5IYBdhLWcg3w5H9a#29540123 - Goon Nguyen

Answer 1

自从iOS 10发布以来，苹果允许静音视频自动播放：https://webkit.org/blog/6784/new-video-policies-for-ios/ Chrome 53在Android上也允许静音视频自动播放：https://developers.google.com/web/updates/2016/07/autoplay

- Rihards

---

YouTube如何能够自动播放带有音频的视频？ - moeseth

@moeseth，你在哪里看到这种行为？ - Rihards

你打开YouTube，点击一个视频后，下一个视频会自动播放。 - moeseth

点击是用户发起的动作。如果重新加载视频页面，视频不会自动播放。 - Rihards

来到这里，读了这篇文章，感到非常高兴。尝试了一个视频：很棒。但是在同一页上尝试了4个视频，应该随着滚动而播放，但只有2个能够加载，或者没有一个能够加载，结果似乎取决于设备和视频大小，让我感到困惑和沮丧。 - brohr

这还是现状吗？ - John Doe

Answer 2

更新 - 2017年1月: 因为这个答案仍然让我获得声望，所以我强烈建议任何阅读此答案的人查看Rihards的答案并给予支持。Rihards的参考资料比这个答案更现代化，如果您需要在浏览器中自动播放视频，则应该有所帮助。

---

移动浏览器中的自动播放限制是由操作系统开发人员故意设置的限制。据我所知，在移动浏览器中绝对无法自动播放内容，因为触发内容播放所需的事件是一个操作系统/手机事件，浏览器本身无法控制或与之交互。

Facebook已经在其原生应用程序中实现了视频自动播放功能，但这仅适用于其原生应用程序。即使是强大的FB也必须向手机神灵屈服。

我找到了一篇关于这种新的FB广告呈现技术的文章，评论部分有一些用户抱怨浏览器无法像原生FB应用程序一样禁用自动播放：

Facebook to Add Auto-Play Video to NewsFeed for All Mobile Users

但这显然是一种假设性的抱怨和胡言乱语，因为这些评论是在FB完全推出该功能之前发表的。

我的结论： 如果您绝对需要自动播放，则必须使用原生应用程序。

- Ryan McCoy

---

@Harikrishnan非常感谢您提供的信息。我会在未来考虑它。感谢您的时间。 - SotonJ

对于WebVR（用户无法触摸屏幕的地方），这将成为一个巨大的问题。 - rainabba

@rainabba，YouTube如何能够自动播放带有音频的视频？ - moeseth

@moeseth YouTube在移动浏览器上不会自动播放带有音频的视频，它们会静音自动播放，您需要点击按钮取消静音。在原生应用程序中，他们可以随心所欲地自动播放带有音频的视频。 - Alejandro García Iglesias

有关这个的任何消息吗？ - John Doe

@JohnDoe 一般来说，浏览器开发商和手机制造商总是会积极尝试控制在 Web 应用程序中可以自动播放声音的内容。自从我的回答以来，大多数浏览器+平台组合允许静音自动播放。许多浏览器还允许带有声音的自动播放，但是有规定决定何时允许这样做。简而言之，如果您想在 Web 应用程序中使用带有声音的自动播放功能，则需要首先研究特定手机平台的自动播放政策，然后再研究您将在该平台上支持的特定浏览器的政策。 - Ryan McCoy

Answer 3

我在iOS 11上自动播放视频时遇到了问题。使用Pointi和Rihards提供的解决方案，在Android和iOS 10.3上都可以正常工作。

iOS 11上的Mobile Safari似乎又变得比较难搞了。请确保同时添加前缀属性（webkit-playsinline）。

<video playsinline webkit-playsinline autoplay muted loop>
  <source src="./video.mp4" type="video/mp4">
</video>

这个解决方案适用于所有流行的桌面浏览器以及Android Chrome和iOS 10/11 Safari/Chrome。它甚至可以在大多数内联浏览器中使用，例如Facebook应用程序（在iOS 11上测试过）。

找到这个解决方案花费了我数小时，所以我希望至少能为您提供帮助。

- Malte Peters

---

我尝试了一个视频，移动端效果非常好。但是当我在页面上使用4个视频并滚动时，结果不同，有时只有2个自动播放，或者没有，这取决于设备和视频大小。 - brohr

据我所知，在iOS上无法自动播放多个视频，因为如果启动另一个视频，iOS会停止当前的视频。 - Malte Peters

Answer 4

在我找到的几乎所有关于此主题的答案中，我发现它们都没有提及我需要在移动浏览器中使用playsinline属性才能正常工作（不要全屏播放，而是将其嵌入到网站内容中）。

因此，我的完整示例如下：

<video width="100%" height="auto" autoplay muted loop playsinline id="my_video">
  <source data-src="/video.mp4" type="video/mp4">
</video>

- Pointi

Answer 5

我在移动版Chrome中启用了数据节省选项，这默认情况下会禁用静音自动播放的视频，对于这种情况，GIF是部分低质量+高带宽的解决方案。

- DavidTaubmann