jQuery 移动浏览器上的 HTML5 视频自动播放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20499341/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Video autoplay on Mobile Browser
提问by SotonJ
I am using the following HTML5 and JQuery code to play a playlist of videos whose URLs are in an array URLArray[].
我正在使用以下 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);
}
}
As we know that the autoplay feature of HTML5 is disabled in all mobile phones, as a result I have to play manually each video clip on mobile phone. which is definitely what I do not want.
我们知道所有手机都禁用了 HTML5 的自动播放功能，因此我必须在手机上手动播放每个视频片段。这绝对是我不想要的。
I really want to know the alternative to this. I am really interested in code segment that I can include to make like autoplay without involving user to interact.
我真的很想知道这个的替代方案。我真的对代码段很感兴趣，我可以将其包含在无需用户交互的情况下进行自动播放。
Is it possible to convert this to an android app to work. I am really in need to make it work like a play list, and I have no concern about how, I just need this functionality.
是否可以将其转换为 android 应用程序来工作。我真的需要让它像播放列表一样工作，我不关心如何，我只需要这个功能。
Please help.
请帮忙。
回答by Rihards
Since the release of iOS 10 Apple has allowed muted video autoplay: https://webkit.org/blog/6784/new-video-policies-for-ios/
自 iOS 10 发布以来，Apple 允许静音视频自动播放：https: //webkit.org/blog/6784/new-video-policies-for-ios/
Chrome 53 on Android also allowing muted video autoplay: https://developers.google.com/web/updates/2016/07/autoplay
Android 上的 Chrome 53 还允许静音视频自动播放：https: //developers.google.com/web/updates/2016/07/autoplay
回答by Ryan McCoy
UPDATE - January 2017:Since this answer is still getting me rep, I strongly encourage anyone reading this to check out the answer from Rihards and give it some love. Rihards' references are more modern than this answer and should help if you need auto-play in browser.
更新 - 2017 年 1 月：由于这个答案仍然让我有代表，我强烈鼓励任何阅读这篇文章的人查看 Rihards 的答案并给它一些爱。Rihards 的参考资料比这个答案更现代，如果您需要在浏览器中自动播放，应该会有所帮助。
The auto play limitation in mobile browsers is an intentional limitation put in by the OS developers. To my knowledge, there is absolutely no way to auto play content in a mobile browser because the event that is required to trigger content play is an OS/Phone event, one which the browser itself has no control over or interaction with.
移动浏览器中的自动播放限制是操作系统开发人员有意设置的限制。据我所知，绝对没有办法在移动浏览器中自动播放内容，因为触发内容播放所需的事件是操作系统/电话事件，浏览器本身无法控制或与之交互。
Facebook has implemented a video auto play feature to its advertising arsenal, but this is only through its native app. Even the mighty FB must surrender its will to the power of the phone gods.
Facebook 已在其广告库中实现了视频自动播放功能，但这仅是通过其原生应用程序实现的。即使是强大的FB也必须向电话神的力量屈服。
I found one article about this new FB ad presentation technique that had some users in the comments section complaining about a way to disable autoplay in browsers like you can with the native FB app:
我发现了一篇关于这种新的 FB 广告展示技术的文章，其中一些用户在评论部分抱怨了一种在浏览器中禁用自动播放的方法，就像使用本机 FB 应用程序一样：
Facebook to Add Auto-Play Video to NewsFeed for All Mobile Users
Facebook 将为所有移动用户的 NewsFeed 添加自动播放视频
But this is obviously a hypothetical complaint and banter because the comments were made prior to FB fully launching that feature.
但这显然是一个假设性的抱怨和玩笑，因为这些评论是在 FB 全面启动该功能之前发表的。
My conclusion:If you absolutely need auto play, you are going to have to go "native" (ha... see what I did there?).
我的结论：如果你绝对需要自动播放，你将不得不去“原生”（哈......看我在那里做了什么？）。
回答by Malte Peters
I was having issues when autoplaying videos on iOS 11. Android and iOS 10.3 worked fine with a solution equal to those provided by Pointi and Rihards.
我在 iOS 11 上自动播放视频时遇到问题。Android 和 iOS 10.3 使用与 Pointi 和 Rihards 提供的解决方案相同的解决方案运行良好。
The Mobile Safari on iOS 11 seems to be a little more of a diva again. Please make sure to add the prefixed attribute (webkit-playsinline) as well.
iOS 11 上的 Mobile Safari 似乎又有点像天后了。请确保也添加前缀属性 (webkit-playsinline)。
<video playsinline webkit-playsinline autoplay muted loop>
<source src="./video.mp4" type="video/mp4">
</video>
This solution works in every popular desktop-browsers as well as on Android Chrome and iOS 10/11 Safari/Chrome. It even works in most Inline-Browsers as for example in the Facebook-App (tested on iOS 11).
此解决方案适用于所有流行的桌面浏览器以及 Android Chrome 和 iOS 10/11 Safari/Chrome。它甚至适用于大多数内联浏览器，例如 Facebook 应用程序（在 iOS 11 上测试）。
Finding this out cost me hours, so I hope I can be a help at least for you.
找到这个花了我几个小时，所以我希望我至少可以对你有所帮助。
回答by DavidTaubmann
On Mobile Chrome I had the Data-Saving option enabled, which by default disables autoplay muted videos, for which case GIF's are a partial low-quality+high-bandwith solution.
在移动 Chrome 上，我启用了数据保存选项，默认情况下禁用自动播放静音视频，在这种情况下，GIF 是部分低质量+高带宽的解决方案。
回答by Pointi
What was missing for me in almost all answers I found on this topic is that I needed the playsinlineattribute to work properly in mobile browsers (do not play fullscreen, instead embed it to the content of the website)
我在这个主题上找到的几乎所有答案中我都缺少的是我需要该playsinline属性才能在移动浏览器中正常工作（不要全屏播放，而是将其嵌入到网站的内容中）
So my full example would be:
所以我的完整例子是：
<video width="100%" height="auto" autoplay muted loop playsinline id="my_video">
<source data-src="/video.mp4" type="video/mp4">
</video>
