让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;
}
相关推荐
2501_915909063 天前
iOS 签名证书全生命周期实战,从开发到上架的多阶段应用
android·ios·小程序·https·uni-app·iphone·webview
2501_915918414 天前
iOS 文件管理全流程实战,从开发调试到数据迁移
android·ios·小程序·https·uni-app·iphone·webview
AD钙奶-lalala4 天前
导入文件到iPhone实现
ios·iphone
2501_916013746 天前
移动端网页调试实战,跨设备兼容与触控交互问题排查全流程
android·ios·小程序·https·uni-app·iphone·webview
2501_915106326 天前
TF 上架全流程实战,从构建到 TestFlight 分发
android·ios·小程序·https·uni-app·iphone·webview
Digitally7 天前
如何将联系人从 iPhone 无缝传输到 iPad?
ios·iphone·ipad
00后程序员张7 天前
Charles中文版抓包工具功能解析,提升API调试与网络性能优化
android·ios·小程序·https·uni-app·iphone·webview
2501_916013748 天前
iOS混淆工具有哪些?跨平台 App 混淆与保护的实用方案
android·ios·小程序·https·uni-app·iphone·webview
2501_915909068 天前
iOS 文件管理实战指南,用户文件、安全访问与开发调试方案
android·ios·小程序·https·uni-app·iphone·webview
Digitally8 天前
3 种简单方法备份 iPhone 上的短信 [2025]
ios·iphone