让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;
}
相关推荐
Javis21116 小时前
【Go转型AI应用开发】01.Go+OpenAI原生SDK构建LLM-Client
golang·iphone·ai-native
Digitally1 天前
如何在Windows 10 PC上获取 iPhone短信
ios·iphone
Geek 研究僧4 天前
致态灵·潮流版 PSSD:iPhone 的 ProRes RAW 专业影像进阶之路
智能手机·iphone·智能硬件
Digitally4 天前
iPhone 无法向安卓设备发送图片:轻松解决
android·ios·iphone
2501_915918415 天前
iOS 开发中证书创建与管理中的常见问题
android·ios·小程序·https·uni-app·iphone·webview
00后程序员张5 天前
IOScer 开发环境证书包括哪些,证书、描述文件与 App ID 的协同管理实践
android·ios·小程序·https·uni-app·iphone·webview
2501_915921435 天前
iPhone HTTPS 抓包在真机环境下面临的常见问题
android·ios·小程序·https·uni-app·iphone·webview
2501_915918415 天前
iOS 图片资源保护方法,分析图片在二次打包和资源篡改中的实际风险
android·ios·小程序·https·uni-app·iphone·webview
TheNextByte15 天前
如何通过 7 种方式将视频从 iPhone 传输到 U 盘?
ios·音视频·iphone
2501_916008895 天前
iPhone 耗电异常检测的思路,从系统电池统计、克魔(KeyMob)、Instruments等工具出发
android·ios·小程序·uni-app·cocoa·iphone·webview