HTML5视频背景无法在iPhone上播放Safari [英] HTML5 Video Background not playing Safari on iPhone

问题描述

我有一个用于网站原始页面构建器的视频背景插件(Wordpress)，并且我已经上传了一个背景视频(MP4和WEBM格式).文件大小分别约为35mb和17mb.

I have the video background plugin for site origin page builder (Wordpress) and I have uploaded a background video (MP4 and WEBM formats). The file sizes are around 35mb and 17mb respectively.

我已经在运行Safari的最新版iPhone上进行了测试，并且视频没有按预期方式自动播放(仅显示后备图片).

I have tested on a couple of iPhones running up to date iOS with safari and the video is not autoplaying as it should (only showing fallback image).

视频代码:

<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桌面上可以正常播放).

As far as I can tell the video contains the attributes required via Safari (and it plays fine on Safari desktop).

任何人都可以提出修复建议，以使其在Safari移动版上正常工作吗?

Can anyone please advise a fix to get it working on Safari mobile?

推荐答案

更新

如最初文章所述，我在Wordpress中使用video background for site origins plugin.

As stated in initial post I was using a video background for site origins plugin for Wordpress.

尽管该插件最近没有更新，但可以在GitHub上找到更新:

Although the plugin hadn't been updated in recent times, an update was available on GitHub here: https://github.com/BGStock/jquery-background-video/blob/master/jquery.background-video.js

添加此新文件/覆盖旧文件解决了iOS上的问题.希望这对使用此特定插件的其他人有所帮助.

Adding this new file/overwriting the old one resolved the issue on iOS. Hope this helps anyone else using this particular plugin.

这篇关于HTML5视频背景无法在iPhone上播放Safari的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！