让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;
}
相关推荐
诸葛务农21 小时前
iPhone Face ID的安全隔离区和神经网络引擎及其用于人形机器人的实践(下)
神经网络·安全·iphone
诸葛务农1 天前
iPhone Face ID的安全隔离区和神经网络引擎及其用于人形机器人的实践(上)
神经网络·安全·iphone
systeminof2 天前
全新MacBook发布:苹果公司将 iPhone 芯片带入笔记本时代
ios·iphone
桂花很香,旭很美2 天前
[7天实战入门Go语言后端] Go 后端实战技术点讲解
开发语言·golang·iphone
java干货4 天前
如何让 iPhone 用上 Type-C 充电器?适配器模式详解
c语言·iphone·适配器模式
游戏开发爱好者86 天前
完整教程:App上架苹果App Store全流程指南
android·ios·小程序·https·uni-app·iphone·webview
2501_916007476 天前
ios上架 App 流程,证书生成、从描述文件创建、打包、安装验证到上传
android·ios·小程序·https·uni-app·iphone·webview
2501_915106327 天前
iPhone 文件管理,如何进行应用沙盒文件查看
android·ios·小程序·https·uni-app·iphone·webview
2501_915921437 天前
Fastlane 结合 AppUploader 来实现 CI 集成自动化上架
android·运维·ci/cd·小程序·uni-app·自动化·iphone
2501_915921437 天前
iOS 抓包怎么绕过 SSL Pinning 证书限制,抓取app上的包
android·网络协议·ios·小程序·uni-app·iphone·ssl