让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;
}
相关推荐
帅次11 小时前
Objective-C面向对象编程:类、对象、方法详解(保姆级教程)
flutter·macos·ios·objective-c·iphone·swift·safari
Digitally19 小时前
如何将文件从 iPhone 传输到 Android(新指南)
android·ios·iphone
Digitally1 天前
如何将信息从 iPhone 同步到Mac(完整步骤和示意图)
macos·ios·iphone
大猫会长1 天前
使用Mac自带的图像捕捉导出 iPhone 相册
ios·iphone
Digitally11 天前
如何使用 USB 数据线将文件从 PC 传输到 iPhone
ios·iphone
AlfredZhao12 天前
APEX实战第4篇:如何把APEX程序变成“移动端APP”?
app·iphone·pwa
Digitally13 天前
如何轻松地将联系人从 iPhone 转移到 iPhone?
ios·cocoa·iphone
Digitally13 天前
如何轻松地将音乐从 iPhone 传输到 Mac?
macos·ios·iphone
帅次14 天前
Flutter动画全解析:从AnimatedContainer到AnimationController的完整指南
android·flutter·ios·小程序·kotlin·android studio·iphone
Digitally14 天前
如何轻松将照片从 iPhone 传输到 Android?
android·ios·iphone