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

Posted 2023-05-08

【中文标题】移动浏览器上的 HTML5 视频自动播放

【英文标题】：HTML5 Video autoplay on Mobile Browser

【发布时间】：2013-12-28 06:10:47

【问题描述】：

我正在使用以下 html5 和 JQuery 代码播放视频的播放列表，其 URL 位于数组 URLArray[] 中。

function NextFrag()

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

我们知道 HTML5 的自动播放功能在所有手机中都被禁用，因此我必须手动播放手机上的每个视频片段。这绝对是我不想要的。

我真的很想知道这个的替代方案。我真的对代码段很感兴趣，我可以包含这些代码段，以便在不涉及用户交互的情况下进行自动播放。

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

请帮忙。

【问题讨论】：

我发现了一个让自动播放在移动设备上运行的技巧，您可以在下面找到我的答案并尝试一下：***.com/questions/12496144/…

【参考方案1】：

自 ios 10 发布以来，Apple 已允许静音视频自动播放：https://webkit.org/blog/6784/new-video-policies-for-ios/

Android 上的 Chrome 53 也允许静音视频自动播放：https://developers.google.com/web/updates/2016/07/autoplay

【讨论】：

youtube如何自动播放带音频的视频？

@moeseth 你在哪里看到这样的行为？

你去youtube，点击一下。下一个视频会自动播放。

点击是用户发起的操作。如果您重新加载视频页面，视频将不会自动开始播放。

来到这里，读到这里，超级开心。用一个视频试了一下：太棒了。尝试在一页中播放 4 个视频，这些视频可能会在您滚动到它们时播放：只有 2 个加载或没有随机结果，具体取决于设备、视频大小。我感到困惑和沮丧。

【参考方案2】：

更新 - 2017 年 1 月：因为这个答案仍然让我有声望，我强烈建议任何阅读这篇文章的人查看 Rihards 的答案并给予它一些爱。 Rihards 的参考资料比这个答案更现代，如果您需要在浏览器中自动播放，应该会有所帮助。

---

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

Facebook 已在其广告库中实现了视频自动播放功能，但这仅通过其原生应用实现。即使是强大的 FB 也必须屈服于电话之神的力量。

我发现一篇关于这种新的 FB 广告展示技术的文章，在 cmets 部分有一些用户抱怨一种在浏览器中禁用自动播放的方法，就像使用原生 FB 应用程序一样：

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

但这显然是一个假设性的抱怨和玩笑，因为 cmets 是在 FB 完全启动该功能之前制作的。

我的结论：如果你绝对需要自动播放，你将不得不去“原生”（哈......看看我在那里做了什么？）。

【讨论】：

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

这对于 WebVR 来说将是一个巨大的问题（用户无法触摸屏幕）。

@rainabba，youtube 如何能够自动播放带音频的视频？

@moeseth YouTube 不会在移动浏览器上自动播放带音频的视频，它会自动播放静音，您需要点击按钮取消静音。在本机应用程序上，他们可以做他们想做的事并自动播放音频。

有这方面的消息吗？

【参考方案3】：

我在 iOS 11 上自动播放视频时遇到问题。Android 和 iOS 10.3 与 Pointi 和 Rihards 提供的解决方案相同。

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 上测试）。

发现这一点花了我几个小时，所以我希望我至少可以为你提供帮助。

【讨论】：

我用一个视频尝试过这个，在移动设备上效果很好。但是当我在滚动时使用页面中分布的 4 个视频时，我得到了不同的结果，有时只有 2 个自动播放，或者没有，显然取决于设备和视频的大小。

afaik 无法在 iOS 上自动播放多个视频，因为如果要启动另一个视频，iOS 会停止一个视频。

【参考方案4】：

在我找到的关于该主题的几乎所有答案中，我缺少的是我需要 playsinline 属性才能在移动浏览器中正常工作（不要全屏播放，而是将其嵌入到网站的内容中）

所以我的完整示例是：

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

【参考方案5】：

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