小程序真是一步一坑,最近在做一个视频播放组件,需要一些视频的url地址,结果发现直接拿腾讯视频中url根本不行,在网上看了好多帖子说的也不是特别详细,结果自己用了一天时间研究整理了一下,写了一个获取可用url的方法。希望能帮助到大家
先看效果
我们从腾讯视频网站上找到一个视频网页的连接,具体步骤就是打开视频点击分享,那个分享的链接就是我们要的
两个都可以复制下来 复制下来后是这样子 我们只需要src里的这段:
<embed src='https://imgcache.qq.com/tencentvideo_v1/playerv3/TPout.swf?max_age=86400&v=20161117&vid=h056607xye8&auto=0' allowFullScreen = 'true' quality = 'high' width = '480' height = '400' align = 'middle' allowScriptAccess = 'always' type = 'application/x-shockwave-flash' > </embed>
我们把上面链接的vid放到以下接口地址上
http://vv.video.qq.com/getinfo?vid=h056607xye8&platform=101001&charge=0&otype=json
直接访问返回的是
QZOutputJson={'dltype':1,'exem':0,'fl':{'cnt':2,'fi':[{'id':100701,'name':'msd','lmt':0,'sb':1,'cname':'标清;(270P)','br':28,'profile':2,'drm':0,'video':1,'audio':1,'fs':5323273,'sl':1},{'id':2,'name':'mp4','lmt':0,'sb':1,'cname':'高清;(480P)','br':33,'profile':1,'drm':0,'video':1,'audio':1,'fs':4350801,'sl':0}]},'hs':0,'ip':'120.84.169.234','ls':0,'preview':179,'s':'o','sfl':{'cnt':0},'tm':1534563720,'vl':{'cnt':1,'vi':[{'br':28,'ch':0,'cl':{'fc':0,'keyid':'h056607xye8.100701'},'ct':21600,'drm':0,'dsb':0,'fmd5':'48ffbd2a6a51b5123ab39562d52ff4a3','fn':'h056607xye8.m701.mp4','fs':5323273,'fst':5,'fvkey':'602E36F78C39F1BDAD437852D1AD4761454FB879425EA85B20D91AB87F2FEA02216FA619E5F6017F83EAF28C9DDD9C1DB46E5122A42AB9E21B632BF21D6A9150DE28464DAB71EF2BA8B6C63A795E7BB69027B1BB2EA66C76B9080AD6F4923C9ADF08616E6CC3F36B','head':0,'hevc':0,'iflag':0,'level':0,'lnk':'h056607xye8','logo':1,'mst':8,'pl':null,'share':1,'sp':0,'st':2,'tail':0,'td':'179.797','ti':'微信小程序是什么 微信小程序宣传片','tie':0,'type':3,'ul':{'ui':[{'url':'http://ugcbsy.qq.com/uwMRJfz-r5jAYaQXGdGnC2_ppdhgmrDlPaRvaV7F2Ic/','vt':136,'dtc':0,'dt':2},{'url':'http://157.255.154.155/vhot2.qqvideo.tc.qq.com/Ax3eEHRro27R5XwVX92V7HgB5BpHLShvfK_u4luWUVLI/','vt':200,'dtc':0,'dt':2},{'url':'http://ugcsjy.qq.com/uwMRJfz-r5jAYaQXGdGnAWU8PgBpGqZogfytEoZCSHk/','vt':176,'dtc':0,'dt':2},{'url':'http://video.dispatch.tc.qq.com/','vt':0,'dtc':0,'dt':2}]},'vh':272,'vid':'h056607xye8','videotype':0,'vr':0,'vst':2,'vw':480,'wh':1.7647059,'wl':{'wi':[{'id':19,'x':14,'y':14,'w':85,'h':27,'a':100,'md5':'dcc9dc5c478c4100ea2817c5e6020f26','url':'http://puui.qpic.cn/vcolumn_pic/0/logo_qing_xi_color_336_108.png/0','surl':'https://puui.qpic.cn/vcolumn_pic/0/logo_qing_xi_color_336_108.png/0'}]},'uptime':1509094808,'fvideo':0,'fvpint':0}]}};
我们把前面的QZOutputJson=跟最后的 ; 过滤掉,得到一个json字符串了。解析它变成json对象,然后把标红的三个部分组合一下,顺序是
url + fn + '?vkey=' + fvkey
例如上面这串,组合下来就是
这个地址就可以直接放在小程序的video组件里面播放了。
<video src='{{url}}' style='width:100%'></video>
- Page({
- /**
- * 页面的初始数据
- */
- data: {
- url:''//video组件可用的url链接
- },
- /**
- * 生命周期函数--监听页面加载
- */
- onLoad: function (options) {
- var _this = this
- var url = '这里就是你通过分享链接拿到的腾讯视频url'
- //通过正则表达式拿到分享地址中vid的值
- if (url.includes('vid=')) {
- var vid = takeParam(url, 'vid');
- }
- //此函数为获取url中指定参数的函数
- function takeParam(url, key) {
- var a = url;
- var b = key;
- try {
- var reg = new RegExp(b + '=[0-9a-zA-z-_]{0,}');
- return reg.exec(a).toString().split('=')[1];
- } catch (e) {
- console.log(e);
- console.log('正则表达式取参数值错误' + key);
- }
- return '';
- }
- //通过以下接口拿到视频的详细参数 通过正则拼装成一个可以在小程序中使用的URl
- wx.request({
- url: 'https://vv.video.qq.com/getinfo?vid=' + vid + '&platform=101001&charge=0&otype=json',
- method: 'get',
- header: {
- 'Content-Type': 'application/x-www-form-urlencoded'
- },
- success: function (res) {
- var dataJson = res.data.replace(/QZOutputJson=/, '') + 'qwe';
- var dataJson1 = dataJson.replace(/;qwe/, '');
- var data = JSON.parse(dataJson1);
- var url = data.vl.vi[0].ul.ui[0].url
- var url2 = url.replace(/http/, 'https'); //把'http'替换为https
- var fu = data.vl.vi[0].fn
- var fvkey = data.vl.vi[0].fvkey
- var a = url2 + fu + '?vkey=' + fvkey
- _this.setData({
- url: a
- })
- console.log(a)
- }
- })
- },
- })
登录你的微信公众平台 看下图
联系客服