在小程序中播放腾讯视频中上传的视频 幻幻Fate 2020年07月17日 0 1,473次浏览 小程序,腾讯视频

一、官方方案

直接使用腾讯视频官方组件

// 在你们的wxml上这样插入视频元素，vid中的内容替换成视频的id
<txv-video vid="e0354z3cqjp" playerid="txv1"></txv-video>

// 在你们的json里面插入
"usingComponents": {
  "txv-video": "plugin://tencentvideo/video"
}

// 在app.json里面引入插件，注意插件版本号填最新的版本号
"plugins": {
  "tencentvideo": {
    "version": "1.2.4",
    "provider": "wxa75efa648b60994b"
  }
}

优点：清晰度高；有关方支持

缺点：有广告；去广告要付费

参考：https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wxa75efa648b60994b&token=735194258&lang=zh_CN

二、自行解析的方案

自行解析的思路是通过腾讯视频的接口获取到视频的URL，然后在小程序的video组件中播放。

<video src="{{ link }}" controls style="width: 100%; height: 600rpx"></video>

//js，vid为视频的id
getLink(vid){
    var that = this
    wx.request({
      url: 'https://vv.video.qq.com/getinfo?vids='+vid+'&platform=101001&charge=0&otype=json',
      header: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      success: function (e) {
        var dataString = (e.data.replace(/QZOutputJson=/, "") + "qwe").replace(/;qwe/, "");
        var data = JSON.parse(dataString);
        var link = data.vl.vi[0].ul.ui[data.vl.vi[0].ul.ui.length - 1].url + data.vl.vi[0].fn + "?vkey=" + data.vl.vi[0].fvkey;
        that.setData({
          link: link
        });
      }
    })
  },

注意：data.vl.vi[0].ul.ui中会有多个视频URL，请根据实际情况调整

优点：免费

缺点：清晰度低；官方可能会调整接口，导致无法使用