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应用程序。我真的需要让它像播放列表一样工作，我不关心如何，我只需要这个功能。

请帮忙。

Answer 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

Answer 2

更新 - 2017年1月：由于这个答案仍然让我成为代表，我强烈建议任何读这篇文章的人都要看看Rihards的答案并给予它一些爱。 Rihards的参考文献比这个答案更现代，如果你需要在浏览器中自动播放，它会有所帮助。

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

Facebook已经在其广告库中实施了视频自动播放功能，但这仅限于其原生应用。即使是强大的FB也必须放弃对电话之神的威力。

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

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

但这显然是一个假设的抱怨和戏弄，因为评论是在FB完全启动该功能之前做出的。

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

Answer 3

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

所以我的完整例子是：

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

Answer 4

我在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-App中（在iOS 11上测试）。

找到这个花费我几个小时，所以我希望我至少可以帮助你。

Answer 5

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

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

5 个答案: