1. 程式人生 > >微信小程式嵌入騰訊視訊源

微信小程式嵌入騰訊視訊源

今天寫小程式時候遇到個坑,就是使用vedio元件時候,一開始沒想好,本以為騰訊視訊會有類似於優酷之類的提供分享外鏈功能,結果進去一看,只能複製視訊網址,本來想著要麼F12獲取地址吧,麻煩點就麻煩點,但是複製出來的視訊地址裡面有一個vkey,這個vkey是動態的,也就是會過期的,過期之後視訊連結就無法播放了,這個就有點麻煩,而且也不能每次都去F12吧,畢竟這個視訊地址是通過後臺釋出的,也就是使用者去配置的,使用者本來F12都不會用。於是就只能百度找答案了,然後看到了這篇文章

通過這篇文章,就找到了想要的解決方案

首先我們有一個介面可以獲取動態的vkey

https://vv.video.qq.com/getinfo?otype=json&appver=3.2.19.333&platform=11&defnpayver=1&vid=

獲取的資料格式是這樣的

QZOutputJson={"dltype":1,"exem":0,"fl":{"cnt":2,"fi":[{"id":100701,"name":"msd","lmt":0,"sb":1,"cname":"流暢;(180P)","br":29,"drm":0,"video":1,"fs":35776912,"sl":1},{"id":2,"name":"mp4","lmt":0,"sb":1,"cname":"高清;(480P)","br":34,"drm":0,"video":1,"fs":74129447,"sl":0}]},"hs":0,"ip":"119.137.195.73","ls":0,"preview":1186,"s":"o","sfl":{"cnt":0},"tm":1503504934,"vl":{"cnt":1,"vi":[{"br":29,"ch":0,"cl":{"fc":0,"keyid":"b0136et5ztz.100701"},"ct":21600,"drm":0,"dsb":0,"fmd5":"87d7d2ef15f55a456bcdb359dd580795","fn":"b0136et5ztz

.m701.mp4","fs":35776912,"fst":5,"fvkey":"EBB1F5C7B5100A3DA80802119E3FF9D0AAE3DA6670594D507B02AD489CF21D2868B0803B76F7434CE51B5C70D75554D68ED24A49EE3DE4791E0BA58444A77756FA7CBC6FB1B3E579F44F87AFB1CB79E8522A48576A4949037A5EDC1C842A9EF7536E090EBD018BB2","head":0,"hevc":0,"iflag":0,"level":0,"lnk":"b0136et5ztz","logo":1,"mst":8,"pl":null,"share":1,"sp":0,"st":2,"tail":0,"td":"1186.92","ti":"解密潮汕多神信仰","type":3,"ul":{"ui":[{"url":"http://113.105.167.156/vhot2.qqvideo.tc.qq.com/AuRJoSSIabzpOb1RsXSviFl-nYwRDSZoFU5OpwBhfrAk/
","vt":200,"dtc":0,"dt":2},{"url":"http://113.105.167.155/vhot2.qqvideo.tc.qq.com/AuRJoSSIabzpOb1RsXSviFl-nYwRDSZoFU5OpwBhfrAk/","vt":200,"dtc":0,"dt":2},{"url":"http://113.105.167.154/vhot2.qqvideo.tc.qq.com/AuRJoSSIabzpOb1RsXSviFl-nYwRDSZoFU5OpwBhfrAk/","vt":200,"dtc":0,"dt":2},{"url":"http://video.dispatch.tc.qq.com/62098754/","vt":0,"dtc":0,"dt":2}]},"vh":272,"vid":"b0136et5ztz","videotype":27,"vr":0,"vst":2,"vw":480,"wh":1.7647059,"wl":{"wi":[]}}]}};

需要的視訊播放地址的格式是這樣的

url + fn + '?vkey=' + fvkey 

我需要的是使用者可以在後臺釋出時候只需要複製視訊連結填入即可

所以稍加改造後,程式碼如下

getVideoInfo(vedio) {
    if (!vedio) return
    var vid = vedio.substring(vedio.lastIndexOf('/') + 1, vedio.lastIndexOf('html') - 1);
    var that = this;
    var urlString = 'https://vv.video.qq.com/getinfo?otype=json&appver=3.2.19.333&platform=11&defnpayver=1&vid=' + vid;
    wx.request({
      url: urlString,
      success: function (res) {
        var dataJson = res.data.replace(/QZOutputJson=/, '') + "qwe";
        var data = JSON.parse(dataJson);
        var fileName = data['vl']['vi'][0]['fn'];
        var fvkey = data['vl']['vi'][0]['fvkey'];
        var host = data['vl']['vi'][0]['ul']['ui'][2]['url']
        that.setData({
          videoUrl: host + fileName + '?vkey=' + fvkey
        });
      }
    })
  }

生成的videoUrl即是我需要的最終可以直接插入播放的視訊

最後寫入wxml

  <view class='video'>
    <video src='{{videoUrl}}' bindplay='playVideo' id="myVideo"></video>
    <view class='tips'>建議WIFI環境下播放</view>
  </view>

完成!