0


H5 video 自动播放(autoplay)不生效解决方案

一、简介

  • 有个 h5 需要加入播放器,发现在 微信浏览器中 无法自动播放,在 移动端普通浏览器中 也无法正常自动播放- ios 浏览器中(微信或者其他浏览器),每次刷新进入网页首次需要手动点击播放,下次会自动播放。- 安卓 在微信浏览器中是随便怎么样都不会进入自动播放,在其他浏览器中会进入自动播放。
  • ios 平台可以通过微信官方的 jweixin 插件来解决,之前看有些文章说这种方式无法解决安卓机的自动播放(别的文章上写的:安卓就暂时无任何办法,限制太严重,只能通过诱导用户点击屏幕进行播放。)
  • 但是经过测试,ios 上解决了,安卓 上在微信中也自动播放了,两端在其他手机浏览器上也都正常自动播放了,所以不知道是不是微信插件优化好了这个细节。

二、解决办法

  • vue 解决1、安装插件$ npm i jweixin-module2、main.js 中配置import wxjssdk from'jweixin-module'Vue.prototype.$wx = wxjssdk3、使用并解决mounted(){// 配置this.$wx.config({debug:false,appId:'wx123456789',timestamp:'',nonceStr:'',signature:'',jsApiList:[]})// 上面配置错误也无所谓的,即使配置失败,也会走 ready 函数// 主要目的就是为了走 ready 函数this.$wx.ready(()=>{// 取得播放器对象,调用播放事件this.play()})}

  • CDN 解决1、导入。附:微信 jweixin 官方文档地址。<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>2、使用// 配置wx.config({debug:false,appId:'wx123456789',timestamp:'',nonceStr:'',signature:'',jsApiList:[]})// 上面配置错误也无所谓的,即使配置失败,也会走 ready 函数// 主要目的就是为了走 ready 函数wx.ready(()=>{// 取得播放器对象,调用播放事件this.play()})


本文转载自: https://blog.csdn.net/zz00008888/article/details/128303669
版权归原作者 卡尔特斯 所有, 如有侵权,请联系我们删除。

“H5 video 自动播放(autoplay)不生效解决方案”的评论:

还没有评论