Html iPhone 上的 HTML5 视频自动播放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43570460/
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 iPhone
提问by SeBa
I have some kind of a strange problem. I try to create a website with a looped background video. The code looks like this one:
我有一些奇怪的问题。我尝试创建一个带有循环背景视频的网站。代码如下所示：
<video src="video/bg.mp4" style="z-index: -1;object-fit: cover;" poster="video/bg.jpg" autobuffer autoplay loop muted></video>This works perfectly fine on most browsers (IE struggles with this object-fit thing but I don't mind) but on iPhone the video won't autoplay but on iPad it does. I already read the Policies for iOS">New Policies for iOSand I think I meet the requirements (otherwise iPad won't autoplay). I did some other testing:
这在大多数浏览器上都可以正常工作（IE 在这个适合对象的东西上挣扎，但我不介意）但在 iPhone 上视频不会自动播放，但在 iPad 上它会。我已经阅读了政策">iOS的政策">新政策，我认为我符合要求（否则 iPad 不会自动播放）。我做了一些其他测试：
- Removing overlaying divs won't fix it
- Removing z-index won't fix it
- Wifi or Cellular doesn't make a difference
- Video filesize doesn't make a difference, too
- 删除覆盖的 div 不会修复它
- 删除 z-index 不会修复它
- Wifi 或蜂窝网络没有区别
- 视频文件大小也没什么区别
Am I doing it wrong or does iPhone simply won't autoplay videos and always requires interaction? I only care for iOS 10, I know that the requirements were different on iOS 9
我做错了还是 iPhone 根本不会自动播放视频并且总是需要交互？我只关心 iOS 10，我知道 iOS 9 的要求不同
回答by Pete Florence
Does playsinlineattribute help?
是否playsinline属性的帮助？
Here's what I have:
这是我所拥有的：
<video autoplay loop muted playsinline class="video-background ">
<source src="videos/intro-video3.mp4" type="video/mp4">
</video>
See the comment on playsinlinehere: https://webkit.org/blog/6784/new-video-policies-for-ios/
请参阅playsinline此处的评论：https: //webkit.org/blog/6784/new-video-policies-for-ios/
回答by Dilip Godhani
iOs 10+ allow video autoplay inline. but you have to turn off "Low power mode" on your iPhone.
iOs 10+ 允许视频自动播放内联。但您必须关闭 iPhone 上的“低功耗模式”。
回答by Shakti
Here is the little hack to overcome all the struggles you have for video autoplay in a website:
这是克服网站中视频自动播放的所有困难的小技巧：
- Check video is playing or not.
- Trigger video play on event like body click or touch.
- 检查视频是否正在播放。
- 在身体点击或触摸等事件上触发视频播放。
Note: Some browsers don't let videos to autoplay unless the user interacts with the device.
注意：除非用户与设备交互，否则某些浏览器不允许视频自动播放。
So scripts to check whether video is playing is:
因此，检查视频是否正在播放的脚本是：
Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function () {
return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}});
And then you can simply autoplay the video by attaching event listeners to the body:
然后您可以通过将事件侦听器附加到正文来简单地自动播放视频：
$('body').on('click touchstart', function () {
const videoElement = document.getElementById('home_video');
if (videoElement.playing) {
// video is already playing so do nothing
}
else {
// video is not playing
// so play video now
videoElement.play();
}
});
Note: autoplayattribute is very basic which needs to be added to the video tag already other than these scripts.
注意：autoplay属性是非常基本的，除了这些脚本之外，还需要将其添加到视频标签中。
You can see the working example with code here at this link:
您可以在此链接中查看带有代码的工作示例：
How to autoplay video when the device is in low power mode / data saving mode / safari browser issue
