让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;
}
相关推荐
茉莉玫瑰花茶20 小时前
HTTPS 协议原理
网络协议·https·iphone
游戏开发爱好者83 天前
深入理解iOSTime Profiler:提升iOS应用性能的关键工具
android·ios·小程序·https·uni-app·iphone·webview
Digitally3 天前
6 种实用方法:将 iPhone 语音备忘录复制到电脑
iphone
Digitally4 天前
如何无需密码解锁 iPhone(分步教程,已验证有效方法)
iphone
2501_916008895 天前
深入解析iOS应用启动性能优化策略与实践
android·ios·性能优化·小程序·uni-app·cocoa·iphone
Hello.Reader5 天前
零成本在手机上跑 Gemma 4安卓+iPhone 本地离线多模态实战指南
android·智能手机·iphone
Digitally5 天前
如何将视频从 iPhone 传输到电脑
ios·电脑·iphone
2501_915921436 天前
穿越HTTPS迷雾:Wireshark中的TLS抓包秘诀与文件合并方法
网络协议·ios·小程序·https·uni-app·wireshark·iphone
Digitally6 天前
如何将照片从 iPad 传输到电脑(PC)
iphone
Digitally7 天前
如何通过简单步骤将iPhone上的eSIM转移到安卓手机
android·智能手机·iphone