让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;
}
相关推荐
Digitally32 分钟前
如何将iPhone照片传输到U盘(6种简单方法)
iphone
互联网江湖1 天前
iPhone Duo跌倒,国产折叠屏手机吃饱?
ios·智能手机·iphone
zwd20052 天前
词频是什么?生词滑块 zipf 3.0 到 5.0 怎么调:同一屏从 0 个生词到 11 个
ios·iphone·效率工具·英语学习·词频·屏幕翻译
最强小杰2 天前
gpt-image-2.5-sunburst + OpenAI SDK + Cline 怎么接?完整图生图与局部重绘教程
gpt·ios·ai·iphone
AIsoft_86893 天前
学术讲座录音如何整理?录音APP可行吗
android·iphone
看浪的路人3 天前
第6讲:Streaming 优化——告别“转圈圈“的用户体验
ios·iphone·xcode
2501_915909064 天前
Windows 上用 VS Code 调试 iPhone 真机 App,KXBuild 断点、崩溃定位实操
ide·windows·vscode·ios·iphone·个人开发·敏捷流程
2501_915921437 天前
iOS 实时日志怎么看?KeyMob 的日志过滤、崩溃报告与符号化
android·ios·小程序·https·uni-app·iphone·webview
禁默8 天前
iPhone远程控制Windows电脑哪款好?四款工具实测横评
windows·电脑·iphone
00后程序员张10 天前
无需 Mac 的 iOS App 上架工具,开心上架Appuploader 负责哪些环节
android·ios·小程序·https·uni-app·iphone·webview