让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;
}
相关推荐
IT技术分享社区2 天前
数码资讯:iPhone 18 Pro,十大升级细节浮出水面
ios·手机·iphone
嵌入式学习菌2 天前
https不校验证书实现及https接口实现
ios·iphone
忙碌5443 天前
OpenTelemetry实战指南:构建云原生全链路可观测性体系
ios·flink·apache·iphone
诸葛务农8 天前
iPhone Face ID的安全隔离区和神经网络引擎及其用于人形机器人的实践(下)
神经网络·安全·iphone
诸葛务农8 天前
iPhone Face ID的安全隔离区和神经网络引擎及其用于人形机器人的实践(上)
神经网络·安全·iphone
systeminof9 天前
全新MacBook发布:苹果公司将 iPhone 芯片带入笔记本时代
ios·iphone
桂花很香,旭很美9 天前
[7天实战入门Go语言后端] Go 后端实战技术点讲解
开发语言·golang·iphone
java干货11 天前
如何让 iPhone 用上 Type-C 充电器?适配器模式详解
c语言·iphone·适配器模式
游戏开发爱好者813 天前
完整教程:App上架苹果App Store全流程指南
android·ios·小程序·https·uni-app·iphone·webview
2501_9160074713 天前
ios上架 App 流程,证书生成、从描述文件创建、打包、安装验证到上传
android·ios·小程序·https·uni-app·iphone·webview