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

   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