H5 video 自动播放(autoplay)不生效解决方案
admin
2024-04-22 18:07:25

一、简介

  • 有个 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 官方文档地址。

    
    

    2、使用

    // 配置
    wx.config({debug: false,appId: 'wx123456789',timestamp: '',nonceStr: '',signature: '',jsApiList: []
    })
    // 上面配置错误也无所谓的,即使配置失败,也会走 ready 函数
    // 主要目的就是为了走 ready 函数
    wx.ready(() => {// 取得播放器对象,调用播放事件this.play()
    })
    

相关内容

热门资讯

甘肃旅游团队服装定制指南:哪里... 甘肃旅游团队服装定制指南:哪里订?如何印Logo?敦煌本地人全攻略 每年夏秋,敦煌的鸣沙山月牙泉、莫...
暖心暖胃的豆腐汤,简单易做又营... 在中华美食的浩瀚星空中,豆腐汤以其朴实无华却温暖人心的特质,占据着不可或缺的一席之地。这不仅仅是一道...
打工人的办公室续命零食私藏清单 我的职业要求我的感官永远处于待命状态。舌尖要能分辨出黑巧克力中可可豆的单一产地,鼻腔需捕捉到香料间微...
甘肃制陶体验全攻略:亲手触摸千... 甘肃制陶体验全攻略:亲手触摸千年泥土的温度,这些宝藏工作室别错过! 来甘肃旅行,除了看壮丽的丹霞、雄...
882 ▏石家庄正定国际机场新... 点蓝色字关注“石家庄新闻广播”,倾听石家庄的声音 2026年春运将于2月2日正式启幕,为助力旅客春运...