请选择 进入手机版 | 继续访问电脑版

12_微信小程序之微信视频号滚动自动播放视频效果实现

[复制链接]
大胆 发表于 2021-1-2 19:00:39 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
   12_微信小步伐之微信视频号滚动自动播放视频效果实现

一.获取视频的分辨率、时长、缩略图

微信小步伐提供了三种方式可以获取视频的分辨率、时长:


  • wx.getVideoInfo(Object):只能用于本地视频
  • VideoDecoder.start(Object):可用于网络视频大概本地视频
  • 借助video标签的bindloadedmetadata回调: 可用于网络视频大概本地视频,但必须在video标签被渲染的情况下才气获取到,而且获取速度较慢
    1.   /**   * @author gale   * 传入视频链接,获取视频分辨率,时长,缩略图(视频第一帧的数据)   */  decoderSource: function (source) {    return new Promise((resolve, reject) => {      var decoder = wx.createVideoDecoder()      decoder.on("start", (res) => {        //获取视频分辨率        var width = res.width        var height = res.height        //获取视频时长        var duration = res.duration/1000        var formatDur = this.formatDuration(duration)        //获取视频的缩略图,即第一帧的图像        var frameData = decoder.getFrameData()        while (!frameData) {          frameData = decoder.getFrameData()        }        var fileName = source.substring(source.lastIndexOf("/") + 1, source.lastIndexOf("."))        let pngData = upng.encode([new Uint8ClampedArray(frameData.data).buffer], frameData.width, frameData.height)        let base64 = wx.arrayBufferToBase64(pngData)        var filePath = wx.env.USER_DATA_PATH + "/" + fileName + ".png"        var systemManager = wx.getFileSystemManager()        systemManager.writeFileSync(filePath, base64, "base64")        resolve({          width: width,          height: height,          duration: duration,          formatDur: formatDur,          thumbnail: filePath,          src: source        })        decoder.remove()      })      decoder.start({        source: source,        mode: 1      })    })  }
    复制代码
二.微信小步伐中,同一个页面存在多个播放器的坑

在微信小步伐中,一个页面内,存在多个播放器时,会导致部门视频不能正常播放,同一页面存在多个video时,video无法正常播放一直在加载转圈
三.格式化视频时长

[code]  /**   * @author gale   * 格式化视频时长,如 14.6 格式化成 00:14   */  formatDuration: function(seconds) {    var format = ""    var h = parseInt(seconds/3600),        m = parseInt(seconds%3600/60),        s = parseInt(seconds%3600%60);    if(h>0){      h = h
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )