当前位置: 首页 > article >正文

让iPhone自带浏览器Safari能自动播放Video视频的办法

原以为在< video >标签上加入“autoplay” 属性就能自动播放了,没想到会受到浏览器的安全限制,会阻止视频的自动播放,具体说明可查看:

https://developer.mozilla.org/zh-CN/docs/Web/Media/Autoplay_guide

想让浏览器自动播放视频/音频媒体的具体解决方法如下:

1、首先要在video标签上加入必要的属性,例如:

<video id="Video" playsinline muted preload autoplay loop>
	<source type="video/mp4" src='xxxx.mp4' />
</video>
  • 尤其注意需要设置 “音频文件静音或其音量设置为0”
  • 苹果设备还需要额外设置 “playsinline” 私有属性

2、如果还不能自动播放,就在js代码里加入video元素的play()事件

document.querySelector("#Video").play();

3、如果还需要满屏显示,就给video加一个样式属性

.video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

http://www.kler.cn/a/507356.html

相关文章:

  • FFmpeg硬件解码
  • “飞的”点外卖,科技新潮流来袭
  • 目标检测新视野 | YOLO、SSD与Faster R-CNN三大目标检测模型深度对比分析
  • 中职网络建设与运维ansible服务
  • 金融项目实战 05|Python实现接口自动化——登录接口
  • Linux自学指南(学习路线大纲)
  • Python----Python高级(面向对象:封装、继承、多态,方法,属性,拷贝,组合,单例)
  • vue.js辅助函数-mapMutations
  • 2.slf4j入口
  • Edge Scdn是什么,它如何提升网站安全性与访问速度?
  • 【前端】框架-构建-包管理-语言-语法-生态工具
  • MySQL配置文件
  • Jmeter如何进行多服务器远程测试
  • excel仅复制可见单元格,仅复制筛选后内容
  • 2024年第十二期 | CCF ODC《开源战略动态月报》
  • 【JVM】总结篇之GC性能优化案例
  • vue2版本tinymce简单使用指南
  • K8S中的Pod调度之亲和性调度
  • C++实现红黑树
  • 【搭建JavaEE】(3)前后端交互,请求响应机制,JDBC数据库连接
  • 设置virtualBox7.0.12 ubuntu24.10 和 windows之间双向复制共享剪贴板
  • QT窗口阴影+拖动
  • 机器学习第一道菜(一):线性回归的理论模型
  • Apache Nifi 信息泄露漏洞复现(CVE-2024-56512)(附脚本)
  • Unity学习之UGUI登录界面制作
  • PDF编辑 PDF-XChange Editor Plus 免装优化版