让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;
}
相关推荐
TheNextByte119 小时前
如何在 iPad/iPhone 上删除语音邮件?
ios·iphone·ipad
TheNextByte120 小时前
如何修复iPhone短信消失问题?
ios·cocoa·iphone
TheNextByte11 天前
如何在没有iTunes的情况下重启/恢复出厂设置iPhone
ios·cocoa·iphone
TheNextByte11 天前
如何从 iPhone 仅传输喜爱的照片?
ios·iphone
YJlio2 天前
1.7 通过 Sysinternals Live 在线运行工具:不下载也能用的“云端工具箱”
c语言·网络·python·数码相机·ios·django·iphone
2501_941982052 天前
Go 开发实战:基于 RPA 接口的主动消息推送
ios·iphone
00后程序员张2 天前
iOS 应用代码混淆,对已编译 IPA 进行类与方法混淆
android·ios·小程序·https·uni-app·iphone·webview
YJlio2 天前
1.6 使用 Streams 工具移除下载文件的 ADS 信息:把“来自互联网”的小尾巴剪掉
c语言·网络·python·数码相机·ios·django·iphone
2501_915918413 天前
mobileprovision 描述文件内容查看,查看 Bundle ID、证书指纹等来定位安装与签名问题
android·ios·小程序·https·uni-app·iphone·webview
YJlio3 天前
1.5 解压 Zip 压缩包与推荐目录结构:给 Sysinternals 找个长期“住所”
c语言·网络·python·数码相机·ios·django·iphone