让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;
}
相关推荐
Digitally2 天前
如何将真我(realme)手机数据传输至 iPhone
ios·智能手机·iphone
JFSJHFZJ2 天前
解密iPhone核心技术,读懂苹果的硬实力
ios·cocoa·iphone
JXSJHF2 天前
iPhone隐藏功能大盘点,免费好用不占内存
ios·iphone
urkay-3 天前
Android 图片轮廓提取与重叠轮廓合并处理
android·算法·iphone
2501_916008893 天前
2026 iOS 证书管理,告别钥匙串依赖,构建可复制的签名环境
android·ios·小程序·https·uni-app·iphone·webview
YJlio3 天前
《Windows 11 从入门到精通》读书笔记 1.4.9:全新的微软应用商店——“库 + 多设备同步”把它从鸡肋变成刚需入口
c语言·网络·python·数码相机·microsoft·ios·iphone
YJlio3 天前
《Windows 11 从入门到精通》读书笔记 1.4.10:集成的微软 Teams——办公与社交的无缝衔接
c语言·网络·python·数码相机·ios·django·iphone
2501_915918413 天前
iOS App 拿不到数据怎么办?数据解密导出到分析结构方法
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_916008893 天前
iOS App 抓包看不到内容,从有请求没数据一步步排查
android·ios·小程序·https·uni-app·iphone·webview
2501_915921434 天前
2026 iOS 上架新趋势 iOS 发布流程模块化
android·ios·小程序·https·uni-app·iphone·webview