让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;
}
相关推荐
lilili啊啊啊1 天前
iOS 应用性能测试工具对比:Xcode Instruments、克魔助手与性能狗
测试工具·ios·iphone·xcode·克魔
ghhgy5312 天前
已安装爱思助手和Apple相关驱动,但仍无法有线连接iPhone热点,且网络适配器没有Apple Mobile Device Ethernet,问题解决
ios·iphone
偕臧x4 天前
iPhone 13P 换超容电池,一年实记的“电池循环次数-容量“柱状图
ios·iphone·超容电池·电池损耗·电池健康·电池循环
帅次4 天前
Flutter ListView 详解
android·flutter·ios·iphone·webview
Hgc5588866616 天前
买不起了,iPhone 或涨价 40% ?
iphone
北京自在科技17 天前
iOS 18.4修复多个核心安全漏洞,间接增强Find My服务的数据保护能力
科技·ios·iphone·蓝牙·find my·北京自在科技
Hgc5588866619 天前
iPhone XR:一代神机,止步于此
iphone
人无远虑必有近忧!19 天前
video标签播放mp4格式视频只有声音没有图像的问题
前端·video
Rudon滨海渔村22 天前
新旧iPhone相册复制 - 相册图片视频对拷 - 换机 - 迁移设备数据 - 免费开源爱思助手
ios·iphone
lilili啊啊啊23 天前
查看iphone手机的使用记录-克魔实战
ios·智能手机·iphone