admin管理员组

文章数量:1569546

一、简介

  • 有个 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/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()
})

本文标签： 自动播放解决方案Videoautoplay

版权声明：本文标题：H5 video 自动播放（autoplay）不生效解决方案 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1725724239a1038750.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。