实现h5音频自动播放（H5 video 自动播放（autoplay）不生效解决方案）

一    
    
    
    
、简介

有个 h5 需要加入播放器    
    
    
    
，发现在 微信浏览器中 无法自动播放   


     


     


     


     ，在 移动端普通浏览器中 也无法正常自动播放

ios 浏览器中（微信或者其他浏览器）



 




 




 




 



，每次刷新进入网页首次需要手动点击播放   

   

   

   

，下次会自动播放    
    
    
    
。

安卓 在微信浏览器中是随便怎么样都不会进入自动播放    

     

     

     

    ，在其他浏览器中会进入自动播放   


     


     


     


     。

ios 平台可以通过微信官方的 jweixin 插件来解决




  




  




  




  


，之前看有些文章说这种方式无法解决安卓机的自动播放(别的文章上写的：安卓就暂时无任何办法  


  


  


  


，限制太严重     
     
     
     
   ，只能通过诱导用户点击屏幕进行播放



 




 




 




 



。)

但是经过测试




   




   




   




   

，ios 上解决了
 



 



 



 



，安卓 上在微信中也自动播放了                      ，两端在其他手机浏览器上也都正常自动播放了 




    




    




    




    
，所以不知道是不是微信插件优化好了这个细节   

   

   

   

。

二   


     


     


     


     、解决办法

vue 解决

1



 




 




 




 



、安装插件

$ npm i jweixin-module

2   

   

   

   

、main.js 中配置

import wxjssdk from jweixin-module Vue.prototype.$wx = wxjssdk

3    

     

     

     

    、使用并解决

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() })