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

简介: 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()
    })
}
<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()
})
目录
打赏
0
0
0
0
268
分享
相关文章
UniApp video 使用(自定义进度条,及微信无法暂停播放设置进度问题)
UniApp video 使用(自定义进度条,及微信无法暂停播放设置进度问题)
1720 0
Android平台RTSP|RTMP播放器如何实现TextureView渲染
本文介绍了在Android平台上使用TextureView进行RTSP和RTMP视频流渲染的技术背景和实现方法。TextureView相较于SurfaceView具备更高性能、更强功能性和更灵活的绘制方式等优势,但也有必须在硬件加速环境下运行和较高内存占用等局限。文中详细展示了如何在SmartPlayerV2工程中创建和配置TextureView,并通过代码示例解释了如何根据视频分辨率信息调整显示比例,以及处理TextureView的各种生命周期回调。此外,还列举了该播放器SDK支持的多项高级功能,如多实例播放、多种编码格式支持、硬解码能力等,旨在帮助开发者更好地理解和实现高性能的直播播放器。
113 3
|
9月前
技术经验分享:AVFoundation播放视频时显示字幕,切换音轨
技术经验分享:AVFoundation播放视频时显示字幕,切换音轨
63 0
video标签优化:通过图片显示视频封面和播放icon
video标签优化:通过图片显示视频封面和播放icon
208 0
video标签优化:通过图片显示视频封面和播放icon
|
10月前
|
video-08-videojs黑屏问题(详解总结)
video-08-videojs黑屏问题(详解总结)
412 1
Unity实现Camera和Audio数据的低延迟RTMP推送技术探讨
关于Unity实现RTMP直播推送技术方案,之前零散的写过几篇介绍,得到了好多开发者的关注。以Android平台为例,目前视频这块,我们demo实现的是Camera数据的采集,然后编码投递到底层,如果设备没有性能瓶颈,可达到高帧率(60帧)均匀的RTMP推送效果。
119 0
iOS Video Gravity 视频播放时的拉伸方式
iOS Video Gravity 视频播放时的拉伸方式
576 0
iOS Video Gravity 视频播放时的拉伸方式
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等