让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;
}
相关推荐
2601_958815161 天前
面向视疲劳缓解的手机贴膜光学系统设计:scinique®双护协同技术的工程实现
ios·智能手机·iphone·圆偏振光护眼·磁控溅射ar抗反射·iphone护眼膜
吠品1 天前
Go赋能:HTTP大文件秒传与断点续接
ios·iphone·xcode
2501_916008892 天前
Mac 上生成 AppStoreInfo.plist 文件,App Store 上架
android·macos·ios·小程序·uni-app·iphone·webview
@大迁世界2 天前
iPhone 18e,可能不再“低一档”
ios·iphone
2501_916007473 天前
iOS开发中抓取HTTPS请求的完整解决方法与步骤详解
android·网络协议·ios·小程序·https·uni-app·iphone
00后程序员张3 天前
Windows 下怎么生成 AppStoreInfo.plist?不依赖 Xcode 的方法
ide·macos·ios·小程序·uni-app·iphone·xcode
2501_915106324 天前
深入解析无源码iOS加固原理与方案,保护应用安全
android·安全·ios·小程序·uni-app·cocoa·iphone
00后程序员张5 天前
HTTPS单向认证、双向认证、抓包原理与反抓包策略详解
网络协议·http·ios·小程序·https·uni-app·iphone
库奇噜啦呼5 天前
【iOS】Spotify项目总结
ios·iphone
largecode7 天前
企业名称能在来电显示吗?号码显示公司名服务打通多终端展示
android·xml·ios·iphone·xcode·webview·phonegap