让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;
}
相关推荐
2501_9159214312 小时前
iOS应用耗电测试:使用Energy Log、Keymob和Instruments进行性能监控与能源消耗分析
android·ios·小程序·https·uni-app·iphone·webview
老李IT笔记4 天前
设备显示在线但指令没回执:三类静默失效的排查顺序
ios·iphone
茉莉玫瑰花茶6 天前
GO [ 标准库 · HTTP 高可用 ]
ios·iphone·xcode
茉莉玫瑰花茶6 天前
GO [ context 原理解析 ]
数据库·oracle·iphone
普通人66 天前
iPhone Duo 介绍
ios·iphone
2501_915921436 天前
iOS应用从开发到上架App Store的完整步骤详解
android·ios·小程序·https·uni-app·iphone·webview
AIsoft_86897 天前
传统记录方式为什么越来越难满足需求?
android·iphone
终端安全笔记7 天前
声明式之后,怎么证明更新策略真的生效了
ios·iphone
智能相对论7 天前
STEPX Neo:AI终端的“初代iPhone时刻”
人工智能·ios·iphone
AIsoft_86898 天前
医患交流内容如何做好记录?
android·iphone