让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_9151063243 分钟前
苹果App Store上架费用及流程全面解析
android·ios·小程序·https·uni-app·iphone·webview
Digitally8 小时前
如何在不从 iCloud 删除的情况下从iPhone删除照片
ios·iphone·icloud
Behaviour1 天前
iPhone Duo 来了,苹果 Siri AI 接入定制 Gemini
人工智能·ios·语言模型·aigc·iphone
知潮网1 天前
HarmonyOS 7正式发布:华为分享远程直传无距离限制,还能和iPhone、Apple Watch互联
华为·iphone·harmonyos
秋枫要学习1 天前
iPhone 18 Pro顶配涨3500
ios·iphone
DQQzero1 天前
折叠屏的“最后一块拼图“:iPhone Duo的4:3形态对iOS多任务的底层重构
ios·iphone·折叠屏
酒神dnspup3 天前
DNSPup 免费体验监控指南:证书、DNS、IP、端口和网页一站式监控
网络协议·tcp/ip·iphone·网站监控
2501_916007473 天前
使用Apple Dashboards显示和自定iOS应用性能指标与数据可视化指南
android·ios·小程序·https·uni-app·iphone·webview
2501_915106323 天前
Flutter iOS混淆打包详细教程与步骤
android·flutter·ios·小程序·uni-app·iphone·webview
外域速览4 天前
OpenAI 智能体「越狱」风波未平,苹果折叠屏 iPhone Ultra 下周三登场
人工智能·ios·iphone