让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_916008892 天前
iPhone 上怎么抓 App 的网络请求,在 iOS 设备上捕获网络请求
android·网络·ios·小程序·uni-app·iphone·webview
00后程序员张2 天前
iOS上架工具,AppUploader(开心上架)用于证书生成、描述文件管理Xcode用于应用构建
android·macos·ios·小程序·uni-app·iphone·xcode
2501_915921432 天前
只有 IPA 没有源码时,如何给 iOS 应用做安全处理
android·安全·ios·小程序·uni-app·iphone·webview
2501_915921432 天前
iOS APP上架工具,在没有 Mac 的环境中发布苹果应用
android·macos·ios·小程序·uni-app·iphone·webview
00后程序员张2 天前
iOS 应用的 HTTPS 连接端口在网络抓包调试中有什么作用
android·网络·ios·小程序·https·uni-app·iphone
2501_915909062 天前
iPhone 手机日志实时查看,开发和测试中常用的几种方法
android·ios·智能手机·小程序·uni-app·iphone·webview
一个人旅程~3 天前
iphone的safari书签如何在icloud上面进行同步和编辑?icloud.com.cn为何不能直接在网页版进行显示和编辑?
电脑·iphone·safari
Digitally3 天前
如何通过蓝牙将 iPhone 上的照片传输到 Android
android·ios·iphone
2501_915918413 天前
iOS App HTTPS 抓包工具,代理抓包和数据线直连 iPhone 抓包的流程
android·ios·小程序·https·uni-app·iphone·webview
urkay-3 天前
Android 当前Activity内显示的浮窗
android·java·iphone·androidx