让iPhone自带浏览器Safari能自动播放Video视频的办法

原以为在< video >标签上加入"autoplay" 属性就能自动播放了,没想到会受到浏览器的安全限制,会阻止视频的自动播放,具体说明可查看:

https://developer.mozilla.org/zh-CN/docs/Web/Media/Autoplay_guide

想让浏览器自动播放视频/音频媒体的具体解决方法如下:

1、首先要在video标签上加入必要的属性,例如:

html 复制代码
<video id="Video" playsinline muted preload autoplay loop>
	<source type="video/mp4" src='xxxx.mp4' />
</video>
  • 尤其注意需要设置 "音频文件静音或其音量设置为0"
  • 苹果设备还需要额外设置 "playsinline" 私有属性

2、如果还不能自动播放,就在js代码里加入video元素的play()事件

javascript 复制代码
document.querySelector("#Video").play();

3、如果还需要满屏显示,就给video加一个样式属性

css 复制代码
.video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
相关推荐
jike_202616 小时前
4款会议翻译转写工具对比:多语言、方言和线下会议怎么选?
人工智能·语音识别·iphone
00后程序员张1 天前
Windows / Linux / Mac 上不用 Xcode 把 IPA 上传到 App Store,upload 命令详解
android·ios·小程序·https·uni-app·iphone·webview
bryant_meng3 天前
【Phone】iPhone 14 Series: An In-Depth Comparison of All Four Models
iphone·灵动岛·iphone14·promotion·全天候显示
nvvas3 天前
9月苹果发布会前瞻:新iPhone、Apple Watch重点速览
ios·iphone
mengyuxuan3 天前
在浏览器里做视频压缩,我踩的三个坑
video·compressor·compress
2501_916007474 天前
申请 iOS 推送证书并配置 APNs 群发推送教程
android·ios·小程序·https·uni-app·iphone·webview
weixin_403810134 天前
苹果群控带机量实测:一台电脑能稳定控多少台iPhone
自动化·iphone·跨境电商·苹果投屏·多媒体运营·安卓中控
jike_20265 天前
iPhone日历查看会议纪要APP推荐:按日期查找历史录音更方便
ios·语音识别·iphone
2501_915909066 天前
iOS test 测试怎么做?功能、性能、兼容、稳定与安全五类测试指南
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者87 天前
App Store 上传 IPA 自动化,.p8 密钥认证与 CI/CD 接入实战
android·运维·ci/cd·小程序·uni-app·自动化·iphone