HTML5 视频背景无法在 iPhone 上播放 Safari

Question

我有网站原始页面生成器 (Wordpress) 的视频背景插件，并且我已经上传了背景视频（MP4 和 WEBM 格式）。文件大小分别约为 35mb 和 17mb。

我已经在几台运行最新 iOS 和 safari 的 iPhone 上进行了测试，视频没有按应有的方式自动播放（只显示后备图像）。

视频代码：

 <video id="so_bgvideo_5df3a8b601042"
class="so_video_bg jquery-background-video is-playing is-visible"
loop="" autoplay="" playsinline="" muted="" data-bgvideo=""
poster="https://mywebsite.com/fallback-image.jpg"
data-bgvideo-fade-in="500" data-bgvideo-pause-after="120"
data-bgvideo-show-pause-play="true"
data-bgvideo-pause-play-x-pos="right"
data-bgvideo-pause-play-y-pos="top"
style="min-width: auto; min-height:auto; width: 100%; height: auto;
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
transition-duration: 500ms;">
<source src="https://mywebsite.com/video.mp4" type="video/mp4">
<source src="https://mywebsite.com/video.webm" type="video/webm">
</video>

据我所知，该视频包含通过 Safari 所需的属性（并且在 Safari 桌面上播放良好）。

任何人都可以建议修复以使其在 Safari 移动设备上运行吗？

原文由 YorkieMagento 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

更新

如最初的帖子所述，我使用 video background for site origins plugin 作为 Wordpress 。

虽然该插件最近没有更新，但在 GitHub 上提供了更新： https ://github.com/BGStock/jquery-background-video/blob/master/jquery.background-video.js

添加这个新文件/覆盖旧文件解决了 iOS 上的问题。希望这可以帮助其他使用此特定插件的人。

原文由 YorkieMagento 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

Safari 不允许在这两种情况下自动播放视频

1. 当“静音”配置未设置时
2. 当 iphone 处于省电模式或电池电量不足时

---

要实现自动播放，请启用 mute 和 autoplay 在属性和通过 js 之类的

<video id="BgVideo" muted autoplay>

<script>
var bgvideo = document.getElementById("BgVideo");
bgvideo.muted = true;
bgvideo.play();
</script>

原文由 Ganeshkumar K 发布，翻译遵循 CC BY-SA 4.0 许可协议