我有个奇怪的问题。我尝试创建一个带有循环背景视频的网站。代码看起来像这样:
<video src="video/bg.mp4" style="z-index: -1;object-fit: cover;" poster="video/bg.jpg" autobuffer autoplay loop muted></video>
这在大多数浏览器上都能很好地工作(IE很难适应这个对象,但我不介意),但在iPhone上,视频不会自动播放,但在iPad上它可以。我已经读过New Policies for iOS了,我认为我符合要求(否则iPad不会自动播放)。我做了一些其他的测试:
- 移除重叠的div无法修复它
- 删除z-index不会修复它
- 无线网或Hive网没有区别
- 视频文件的大小也没有什么区别
是我做错了,还是iPhone根本不会自动播放视频,总是需要互动?我只关心iOS10,我知道iOS9上的要求不同
7条答案
按热度按时间7cjasjjr1#
playsinline
属性有帮助吗?这是我的资料
请参阅关于
playsinline
的评论:https://webkit.org/blog/6784/new-video-policies-for-ios/2eafrhcq2#
iOS 10+允许视频自动播放内联。但是你必须关闭iPhone上的“低功耗模式”。
62lalag43#
这里是一个小技巧,可以克服你在网站中自动播放视频的所有困难:
1.检查视频是否正在播放。
1.在身体点击或触摸等事件上触发视频播放。
注意:某些浏览器不允许视频自动播放,除非用户与设备进行交互。
因此,检查视频是否正在播放的脚本是:
然后,您可以通过将事件侦听器附加到主体来自动播放视频:
注意:
autoplay
属性是非常基本的,需要添加到视频标签中,而不是这些脚本。您可以在此链接中看到包含代码的工作示例:
How to autoplay video when the device is in low power mode / data saving mode / safari browser issue
vd2z7a6w4#
我遇到了类似的问题,我尝试了多种解决方案。我解决了这一问题,实施了两个考虑。
1.使用
dangerouslySetInnerHtml
嵌入<video>
代码。例如:1.调整视频权重。我注意到我的iPhone无法自动播放超过3兆字节的视频。因此,我使用了一个在线压缩工具(https://www.mp4compress.com/)将4 MB压缩到小于500 kb
同时,感谢@boltcoder的指导:Autoplay muted HTML5 video using React on mobile (Safari / iOS 10+)
uemypmqf5#
我也遇到了同样的问题-视频无法在iOS上播放。我尝试了所有的代码选项“playsinline自动播放循环静音”。问题是我收到的视频是在错误的mp4编解码器。所以什么帮助我们,是上传视频到Vimeo和下载高清版本再次.视频现在正在所有移动的设备上播放。
你也可以尝试使用mpeg streamclip。这是VLC的屏幕截图-这些是正确的设置。希望有人不必花2个小时寻找问题-节日快乐
hujrc8aj6#
抱歉,回答晚了,但今天我发现你需要关闭iPhone上的电池节省功能才能自动播放视频。
7vhp5slm7#
这里是一个简单的解决方案,自动播放视频在IOS,我已经尝试过,它是完美的工作在IOS,Android,也对所有的浏览器在各种平台上.
只需对视频使用(data-wf-ignore)和(data-object-fit)属性,对源标签使用data-wf-ignore。
您可以在以下代码段看到工作示例: