先看效果
我们从腾讯视频网站上找到一个视频网页的连接,具体步骤就是打开视频点击分享,那个分享的链接就是我们要的
个都可以复制下来 复制下来后是这样子 我们只需要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
例如上面这串,组合下来就是
https://ugcydzd.qq.com/uwMRJfz-r5jAYaQXGdGnC2_ppdhgmrDlPaRvaV7F2Ic/h056607xye8.m701.mp4?vkey=B280B6E180179CC9575910CA606A7EA4F56B32C3CC129867A2AD815AD66F68843CBA99E5187BC952E01C31BF8A878B8E0EFC420DC9FE771115CDE1367C6A2884F903DC0173D4034B654EA7223EE166F6EB98976DC4BA9F1ACB4B803E63C487471F522EDF69778B79
这个地址就可以直接放在小程序的video组件里面播放了。
<video src="{{url}}" style='width:100%'></video>
Page({
/**
* 页面的初始数据
*/
data: {
url:''//video组件可用的url链接
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var _this = this
// var url = '这里就是你通过分享链接拿到的腾讯视频url'
var url = 'https://v.qq.com/txp/iframe/player.html?vid=l0775xxhvhn'
//通过正则表达式拿到分享地址中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)
}
})
},
})
登录你的微信公众平台 看下图
既然我们无法直接播放自己服务器上的视频,那么我们把它上传到腾讯视频服务器上试试,并且使用腾讯视频的小程序插件来处理。
注册一个腾讯视频的账号,然后在客户端上上传自己的视频内容。
上传成功视频后,我们打开视频播放,在右侧的视频信息里面找到如下菜单
然后查看网页信息,可以看到视频的vid参数了。
腾讯视频插件就是使用这个vid参数进行播放的。
在使用视频插件之前,我们先来介绍如何获得这个插件,小程序插件需要开发者同意才能获得使用权,我们可以在小程序的【设置 -> 第三方服务】里面看到对应的入口。
添加相应的插件,这里是腾讯视频,如下所示。
添加视频后,可以获得视频的APPID进行使用,如下是这个插件的信息。
官方的介绍和使用页面代码如下
不过使用这个小程序的插件还是需要遵循小程序使用插件的几个步骤,详细说明如下所示。
首先需要在app.json里面加入插件的声明,如下所示。
在页面JS代码里面加入插件对象的定义,如果没有在脚本里面使用视频插件,那么也可以不用这行代码
const txvContext = requirePlugin("tencentvideo");
在页面里面加入如下代码
<!--pages/Video/index.wxml--><!--1px = 750/320 = 2.34rpx;--><view class="container">
<view class="goods-container">
<view id="myVideo" class="goods-box" wx:for-items="{{videos}}" wx:key="{{index}}" data-id="{{item.id}}">
<view class="goods-title">{{item.src}}</view>
<txv-video class="goods-video" vid="{{item.vid}}" playerid="txv{{item.id}}" autoplay="{{false}}"></txv-video>
</view>
</view></view>
最后注意项目的调试基础类库,选择比较新的,否则有时候太低版本估计开发工具都无法测试通过,我就是忘记修改这里的基础库,导致一直出错还是没有找到原因。
最终手机上测试的效果如下所示,唯一遗憾的就是每个视频都要播放一段广告,郁闷。
总的来说,使用小程序插件还是非常方便简洁的,不过第一次使用总是多少碰到一些问题,慢慢习惯就好了。
还有腾讯视频放在腾讯服务器,也可以减轻自己服务器的访问压力,还可以分享给其他朋友,也是很好的。
最近在折腾微信小程序,需要引用一些腾讯视频网站上的视频去播放,很多地方都是教人用F12抓一个mp4地址,这根本不行,因为那个地址是动态的,大概一两个小时就失效了。
翻了微信小程序的官方社区这方面的问题只有人提问,没有人有正确的回答(包括官方人员也都不懂),那就只能自己研究了。还好不是很难,折腾了一晚上终于搞定了。
1、首先我们从腾讯视频网站上找到一个视频网页的连接,格式是这样的
https://v.qq.com/x/page/b0136et5ztz.html
上面我标红色的是视频的vid
2、我们把vid放到接口地址上变成
http://vv.video.qq.com/getinfo?vids=b0136et5ztz&platform=101001&charge=0&otype=json
3、直接访问返回的是
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":[]}}]}};
4、我们把前面的QZOutputJson=跟最后的 ; 过滤掉,得到一个json字符串了。解析它变成json对象,然后把标红的三个部分组合一下,顺序是
url + fn + '?vkey=' + fvkey
例如上面这串,组合下来就是
http://113.105.167.156/vhot2.qqvideo.tc.qq.com/AuRJoSSIabzpOb1RsXSviFl-nYwRDSZoFU5OpwBhfrAk/b0136et5ztz.m701.mp4?vkey=EBB1F5C7B5100A3DA80802119E3FF9D0AAE3DA6670594D507B02AD489CF21D2868B0803B76F7434CE51B5C70D75554D68ED24A49EE3DE4791E0BA58444A77756FA7CBC6FB1B3E579F44F87AFB1CB79E8522A48576A4949037A5EDC1C842A9EF7536E090EBD018BB2
这个地址就可以直接放在小程序的video组件里面播放了。
注意:由于腾讯视频的地址vkey是定时变化的,所以肯定是不能写死在程序里面的。必须走后端照着上面写的方式抓取接口,过滤掉无用字符串,解析json,组合地址,通过接口返回给小程序video组件的src即可正常播放。
当然如果你的后端解析json比较麻烦的(例如古老的asp ^_^),可以把第2步最后的json去掉或者改成xml,直接解析xml也一样。
赋上我的php代码
$tencent_video_info= curl_get('http://vv.video.qq.com/getinfo?vids=l0703b9ds0p&platform=101001&charge=0&otype=json');$tencent_video_json = substr(explode('QZOutputJson=',$tencent_video_info)[1],0,-1); // 我们把前面的QZOutputJson=跟最后的 ; 过滤掉,得到一个json字符串$tencent_video_array = json_decode($tencent_video_json,true); // 得到json 数组$fvkey = $tencent_video_array['vl']['vi'][0]['fvkey']; // 视频的fvkey,类似于微信的access_token,会变动$fn = $tencent_video_array['vl']['vi'][0]['fn'];$url = $tencent_video_array['vl']['vi'][0]['ul']['ui'][0]['url'];$video_url = $url.$fn.'?vkey='.$fvkey;
因为当时需要做视频播放,后台存放视频文件又不现实。所以,做了一个能解析腾讯视频地址的并播放视频的小程序。
小程序里的解析腾讯视频地址的代码是参考了一个开源项目you-get写的,把里面的腾讯视频下载的python代码写成了JS代码。
1.一般播放一个腾讯视频的时候播放地址为https://v.qq.com/x/page/w0647n5294g.html
。
.html
到最后一个/
之间的字符串即为腾讯视频id。如https://v.qq.com/x/page/w0647n5294g.html
的id为w0647n5294g
。
分为以下两步
getVideoInfo: function (vid) { 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 dataJson1 = dataJson.replace(/;qwe/, ''); var data = JSON.parse(dataJson1); var fn_pre = data.vl.vi[0].lnk
host = data['vl']['vi'][0]['ul']['ui'][0]['url'] var streams = data['fl']['fi'] var seg_cnt = data['vl']['vi'][0]['cl']['fc'] if (parseInt(seg_cnt) == 0) {
seg_cnt = 1
} var best_quality = streams[streams.length - 1]['name'] var part_format_id = streams[streams.length - 1]['id'] for (var i = 1; i < (seg_cnt + 1); i++) { var filename = fn_pre + '.p' + (part_format_id % 10000) + '.' + i + '.mp4';
console.log(filename);
pageArr.push(i);
that.requestVideoUrls(part_format_id, vid, filename, 'index' + i); } }
})
},
requestVideoUrls: function (part_format_id, vid, fileName, index) { var keyApi = "https://vv.video.qq.com/getkey?otype=json&platform=11&format=" + part_format_id + "&vid=" + vid + "&filename=" + fileName + "&appver=3.2.19.333" var that = this;
wx.request({
url: keyApi,
success: function (res) { var dataJson = res.data.replace(/QZOutputJson=/, '') + "qwe"; var dataJson1 = dataJson.replace(/;qwe/, ''); var data = JSON.parse(dataJson1); if (data.key != undefined) { var vkey = data['key'] var url = host + fileName + '?vkey=' + vkey;
part_urls[index] = String(url)
that.setData({
videoUrl: part_urls.index1
});
}
}
})
},
该函数里面的part_urls.index1
,即为腾讯视频的真实地址。把这个地址放到小程序的video组件的src
中,即可播放腾讯上的视频。
最后放上demo:weChatVideoPlay
最后,发送福利:
科學史沙龍~化妝品的故事
链接:https://pan.baidu.com/s/1cXPBxZJ2_V2RCLv0YOed5A 密码:043b
洛杉矶华人资讯网~滴滴打车背后的中美法律差异
链接:https://pan.baidu.com/s/17LHCZhFYl1hD0EcE3_MV2g 密码:9mlw
洛杉矶华人资讯网~如何看懂比特币和区块链
链接:https://pan.baidu.com/s/1Av2Q4w73F-RPgkGaY2g8Ig 密码:ii8i
世界经济之战【完整版】(芝加哥经济学派观点)
链接:https://pan.baidu.com/s/1DpjGZWN64sqwTc5CBSv4KQ 密码:9rye
姚仁禄~創意是,在球場外,打一場觀眾愛看的好球|大小創意
链接:https://pan.baidu.com/s/1nuTrjtcJ5xwoCXViVB11FQ 密码:vpi1
2018.9.1得到更新
链接:https://pan.baidu.com/s/1dFPA0SPURlZs9SJCeCkE9A 密码:9kf9
一定要学习和积累知识,但知识具有局限性、危险性和反动性,不要盲目的认为有了知识就具备了力量,与其消耗大量的宝贵时光去追求知识,不如在真善美爱诚信上多下功夫,因为真善美爱诚信才具备持久的力量,同时,在开发思维上下功夫,不要在背诵记忆过去的知识上耗费过多的时光和精力,不能顽固地用死的知识来硬套变化的活的现实。
https://pan.baidu.com/s/1SfjJnSUmdsx5op-rWUiYEA office2016精简版
节奏剪辑与框架
链接:https://pan.baidu.com/s/1tY1AVb7qGKM9W26KNHxc0g 密码:ioko
最新版Ps Ai Ae Dw Lr Id Pr 软件一件安装包 (里面有安装教程)
无需破解一键安装,永久使用
Ps Ai Ae Dw Lr Id Pr
只支持电脑64位
链接:https://pan.baidu.com/s/1ZFHOrelf5pgRV2_wZ3ylZg 密码:f20p
ppt模板
链接:https://pan.baidu.com/s/115QzZcC44vmCsFL-XLEhXg 密码:a89m
Photoshop资料
PS全套学习资料 链接:http://pan.baidu.com/s/1nvA0Pzb密码: xgnc
链接:https://pan.baidu.com/s/1iWwYOeKXDZtoX96ujBqpCA 密码:yahq
PPT
链接:https://pan.baidu.com/s/1UwPe6nb4Bdnba0G0OnzfRw 密码:9bbn
餐饮广告设计模板
链接: https://pan.baidu.com/s/1miuvZsc 密码: u1ck
万达广场招商运营策划资料 商业地产购物中心招商营销销售大全
链接: http://pan.baidu.com/s/1hqqvpLM 密码: 1vnh
赖世雄英语
链接:https://pan.baidu.com/s/1fd4q03_AoLOalEoIncuRDg 密码:rw2g
汉唐中医倪海厦人纪天纪全套视频书籍资料
链接:https://pan.baidu.com/s/1P_Rp3O6Ew-uNhIeUCA1jhQ 密码:ukx8
尤克里里自学
链接:https://pan.baidu.com/s/1U7fY26P4vE_gEUKntyLKTA 密码:12jt
最强大脑丨鲍橒老师教你科学记忆,提升你的学习效率(完结)
链接:https://pan.baidu.com/s/1wS2VAFxKHZbdERH7hA2h3w 密码:s0v5
链接:https://pan.baidu.com/s/1ZNWRHhlo39_Q_FSbiXN28w 密码:4j1l
毛治國先生用勢不用力的管理
链接:https://pan.baidu.com/s/1CQcAA4G-YuLIlwF-gcIvlg 密码:836n
全球大学~温铁军 十次危机概述(1949-2016)
链接:https://pan.baidu.com/s/1ytNpCLUtWLVYDzXCNQECjw 密码:kfdz
2018年5月 温铁军 【演讲】金融危机与中国战略转型
链接:https://pan.baidu.com/s/13fq44iKIMaL1JWYmVp0rmw 密码:2376
温铁军 18 8月24日 中美贸易战演讲 东西方话语体系必须转换,让城市人口重回乡村
链接:https://pan.baidu.com/s/1aEQmZH6hR2rFw3LKgHFEJA 密码:gf7c
《筑梦天下》城市沉浮录 迈向未来 地球之歌 20180901
链接:https://pan.baidu.com/s/1qaUv3ufm22xzU43JWHZj1Q 密码:4683
《世纪大讲堂》现代儒家的思想形态选择 超越经学 回归子学 20180901
链接:https://pan.baidu.com/s/1mVhpqIvvQuE0ChBipUcI7Q 密码:73bq
《一虎一席谈》鼓励生育会否变强制生育?全面放开生育是否刻不容缓?20180901
链接:https://pan.baidu.com/s/1O3JLoB_koH_yvkveVK1zaw 密码:00a8
2018.9.4得到更新
链接:https://pan.baidu.com/s/1oApJ2BeP54DqDvOUYUaFzQ 密码:9801
每个人都变得充满激情。他们分享彼此的经验和知识,朝着更好的未来努力。衡量管理者专业性和能力的标准是他为达成解决方案贡献了多少新想法。当然,这里容不得天真的想法——每个人都知道,梦想很美,但是做梦不会带来财富。所以他们彼此提问,帮助彼此把梦想和希望转化为切实的行动方案。他们知道自己会遇到挫折和困难,但同时他们也知道,困难甚至危机,正是他们发挥优势的机会。他们并不是得了“问题恐惧症”,而是聚焦于解决方案。他们共同朝着积极的行动方案前进,一步步地努力。
链接:https://pan.baidu.com/s/15DNyNj9G5E0IiHHVW28VhQ 密码:s0m6
链接:https://pan.baidu.com/s/1iDtS8Chi_vbjjI-zNmSo-w 密码:egm7
《明星之摄影课》手机拍摄高逼格照片(完结)
链接:https://pan.baidu.com/s/1IWvfHu8nMbAOvYAgdB9Iqw 密码:6c0k
黑马 前端 html h5 java 2018最新黑马前端资料
视频+源码+课件+开发工具
上课的所有资源都有
链接:https://pan.baidu.com/s/1Nyt2_HXzR50_yutuvtVHJA?密码:8s5t
简历模版
链接:https://pan.baidu.com/s/14CzJpOaIytdyUNY4qeSQaw 密码:2xk3
筑龙室内软装 全案设计教程
链接:https://pan.baidu.com/s/10cNDFCFd3DT680BkZBD-ZQ 密码:mFu4
最强大脑丨鲍橒老师教你科学记忆,提升你的学习效率(完结)
链接:https://pan.baidu.com/s/1wS2VAFxKHZbdERH7hA2h3w 密码:s0v5
2018最新excel模板3000多套 财务 行政 办公 管理工作 百强企业 excel模板(工作模板) 百强企业 excel 模版 3000多套
财务,企业管理,办公制度,行政,管理报表……
为自己工作增加效率,更加准确工作!
链接:https://pan.baidu.com/s/1qhpJQX-Aod_uZqTdqrd5hw 密码:286y