iPhone上的HTML5视频自动播放

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的新政策,我认为我符合要求(否则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-索引不会修复它

  • Wifi或Cellular没有区别

  • 视频文件大小也没有什么区别

  • 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

我做错了还是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

playinline 属性帮助?

这就是我所拥有的:

        <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/