html - HTML5 视频背景无法在 iPhone 上播放 Safari
问题描述
我有网站原始页面构建器(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 移动设备上运行吗?
解决方案
Safari 不允许在这两种情况下自动播放视频
- 未设置“静音”配置时
- 当 iphone 处于省电模式或电池电量不足时
要实现自动播放,请mute
在autoplay
属性和通过js之类的
<video id="BgVideo" muted autoplay>
<script>
var bgvideo = document.getElementById("BgVideo");
bgvideo.muted = true;
bgvideo.play();
</script>
推荐阅读
- javascript - 动态表单单个参数如何删除垫子表单字段
- laravel - Laravel,有一个带有自定义策略方法的自定义控制器方法吗?
- javascript - 如何为我的网页创建一个删除 JavaScript 中的项目的函数?
- python - 如何获得排名余弦相似度?
- reactjs - 在类组件中反应 forwardRef 当前 null
- javascript - javascript,如果未定义,则让函数
- javascript - 漂浮在海洋上的问题动画船,在三个 JS 中
- html - 网站右侧出现白条?
- go - PDF 不像 Go 那样使用 utf-8 字符串编码
- sql - SQL:计算“组”中 guid 的出现次数