本文介绍了iPhone 上的 HTML5 视频自动播放的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个奇怪的问题.我尝试创建一个带有循环背景视频的网站.代码如下所示:

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>

这在大多数浏览器上都可以正常工作(IE 在这个适合对象的东西上挣扎,但我不介意)但在 iPhone 上视频不会自动播放,但在 iPad 上它会.我已经阅读了 iOS 政策">iOS 的新政策,我认为我符合要求(否则 iPad 不会自动播放).我做了一些其他测试:

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 New Policies for iOS and I think I meet the requirements (otherwise iPad won't autoplay). I did some other testing:

  • 删除重叠的 div 不会修复它
  • 删除 z-index 不会修复它
  • Wifi 或蜂窝网络没有​​区别
  • 视频文件大小也没什么区别

是我做错了还是 iPhone 根本不会自动播放视频并且总是需要交互?我只关心 iOS 10,我知道 iOS 9 的要求不同

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

推荐答案

playsinline 属性有帮助吗?

这是我所拥有的:

<video autoplay loop muted playsinline class="video-background ">
  <source src="videos/intro-video3.mp4" type="video/mp4">
</video>

在此处查看对 playsinline 的评论:https://webkit.org/blog/6784/new-video-policies-for-ios/

See the comment on playsinline here: https://webkit.org/blog/6784/new-video-policies-for-ios/

这篇关于iPhone 上的 HTML5 视频自动播放的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-30 09:35