让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;
}
相关推荐
刘小哈哈哈7 天前
Lost connect to debugger on ‘iphone‘
ios·iphone
AI逐月8 天前
当新iPhone加入团队:一场 EAS CLI 与 Apple 生态的斗智斗勇
ios·cocoa·iphone
帅次8 天前
Flutter TabBar / TabBarView 详解
android·flutter·ios·小程序·iphone·taro·reactnative
AirDroid_cn9 天前
iPhone或iPad想要远程投屏到Linux系统电脑,要怎么办?
linux·iphone·ipad·手机投屏·无线投屏·远程投屏
帅次13 天前
Flutter BottomNavigationBar 详解
android·flutter·ios·小程序·iphone·reactnative
zhishishe17 天前
如何在 iPhone 上恢复已删除的联系人:简短指南
ios·智能手机·iphone
zhishishe17 天前
如何修复卡在恢复模式下的 iPhone:简短指南
windows·macos·ios·objective-c·cocoa·iphone
S&Z346319 天前
[FPGA Video IP] Video Processing Subsystem
网络协议·tcp/ip·fpga开发·video
CopyLower20 天前
在 Spring Boot 中实现 WebSockets
spring boot·后端·iphone
lilili啊啊啊22 天前
iOS 应用性能测试工具对比:Xcode Instruments、克魔助手与性能狗
测试工具·ios·iphone·xcode·克魔