HTML5视频在 iPhone 上的自动播放

我有一些奇怪的问题。我尝试创建一个网站与循环背景视频。代码看起来像这样:

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

  • 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

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

193937 次浏览
小开

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/

小开

IOs 10 + 允许内置视频自动播放，但你必须关闭 iPhone 的“低功耗模式”。

小开

这里有一个小窍门，可以帮助你克服在网站上自动播放视频时遇到的所有困难:

  1. 检查视频是否播放。
  2. 触发视频播放事件，如身体点击或触摸。

注意: 有些浏览器不允许视频自动播放，除非用户与设备进行交互。

因此，检查视频是否正在播放的脚本是:

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function () {
return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}});

然后，你可以简单地通过将事件监听器附加到身体上来自动播放视频:

$('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();
}
});

注意: autoplay属性是非常基本的，需要添加到视频标签已经除了这些脚本。

您可以在下面的链接中看到带有代码的工作示例:

当设备处于低功耗模式/数据保存模式/Safari 浏览器问题时，如何自动播放视频

小开

我有一个类似的问题，我尝试了多个解决方案。我解决了它实现2个考虑。

  1. 使用 dangerouslySetInnerHtml来嵌入 <video>代码。例如:
<div dangerouslySetInnerHTML=\{\{ __html: `
<video class="video-js" playsinline autoplay loop muted>
<source src="../video_path.mp4" type="video/mp4"/>
</video>`}}
/>
  1. 调整视频重量。我注意到我的 iPhone 不会自动播放超过3MB 的视频。因此，我使用了一个在线压缩工具(https://www.mp4compress.com/) ，从4mb 到小于500kb

此外，感谢 @ boltcoder的指南: 在手机上使用 React (Safari/iOS 10 +)自动播放静音 HTML5视频

小开

这是一个在 IOS 中自动播放视频的简单解决方案，我已经尝试过了，它在 IOS、 Android 以及各种平台上的所有浏览器上都能很好地工作。

只需对视频使用(data-wf-forget)和(data-object-fit)属性，对源标记使用 data-wf-forget。

您可以在下面的代码片段中看到这个工作示例: 

<video id="myVideo" autoplay="" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" data-wf-ignore="true" />
</video>

小开

我也有同样的问题——视频不能在 iOS 上播放。我尝试了所有的代码选项“播放线路自动播放循环静音”。问题是我收到的视频是在错误的 mp4编解码器。所以帮助我们的是，将视频上传到 Vimeo 并再次下载高清版本。这段视频现在在所有的移动设备上播放。

您还可以尝试使用 mpeg 流剪辑。这里有一个 VLC 的屏幕剪辑-这些都是正确的设置。希望有人不必花2个小时寻找问题-快乐的假期

Codec we used


提交答案