对于3.2,我们也可以直接改播放按钮的样式。
腾讯视频加载方案, 网页嵌入腾讯视频方式 iframe, 网页嵌入腾讯视频方式
前言:更多详细内容可以参考腾讯开发平台的文档,我在这里简单备忘一下
腾讯视频开放平台:http://v.qq.com/open/index.html
文档:http://v.qq.com/open/doc/tvpa…
方法一:引入iframe
在视频播放界面的左下方,鼠标移动到分享,复制通用代码放在页面上即可

将视频在微信公众平台中的调用代码提取出来,如下所示:
<iframe class="video_iframe" src="http://v.qq.com/iframe/player.html?vid=m0137rrajuc&width=300&height=200&auto=0" allowfullscreen="" frameborder="0" height="200" width="300"></iframe>
打开需要添加的腾讯视频网址,例如:http://v.qq.com/cover/z/zrxyhghf3n8xhxl/k0015trfczz.html
将上述代码中的vid=后面的内容替换成上述网址中标红的部分,然后将上述网址重新复制出来:
<iframe class="video_iframe" src="http://v.qq.com/iframe/player.html?vid=k0015trfczz&width=300&height=200&auto=0" allowfullscreen="" frameborder="0" height="200" width="300"></iframe>
方法二:引入js
1、引入js:
<script src="//imgcache.qq.com/tencentvideo_v1/tvp/js/tvp.player_v2_jq.js"></script>
2、html部分:
<div id="videoId" class="video-wrapper"></div>
3.1、js部分(保留播放按钮)
<script type="text/javascript"> (function(){ var videoSet={ vid:'w0378xrv3dh', poster:'//****/poster.jpg',//手机端poster图 width:$(".video-wrapper").width, height:$(".video-wrapper").height } var video = new tvp.VideoInfo(); video.setVid(videoSet.vid); var player = new tvp.Player(); player.create({ video: video, modId: "videoId", width:videoSet.width, height:videoSet.height, pic:videoSet.poster, isHtml5ShowPosterOnEnd:true, isiPhoneShowPosterOnPause:true, vodFlashSkin:'http://imgcache.qq.com/minivideo_v1/vd/res/skins/TencentPlayerMiniSkin.swf',//精简皮肤 onwrite: function() { console.log("播放器显示完毕"); }, onpause:function(){ console.log('暂停了') }, onallended:function(){ console.log('播放完了') } }); player.addParam("wmode","transparent"); })(); </script>
还有一种需求是 播放按钮 要求用其它样式的,我们可以把原本的播放按钮隐藏掉,然后把在视频封面图上加上视频按钮,如下图:

于是有了3.2
3.2、js部分 :(去掉了播放按钮)
<script type="text/javascript"> (function(){ var videoSet={ vid:'w0378xrv3dh', poster:'//***/poster.jpg',//手机端poster图 width:$(".video-wrapper").width, height:$(".video-wrapper").height } var video = new tvp.VideoInfo(); video.setVid(videoSet.vid); var player = new tvp.Player(); player.create({ video: video, modId: "videoId", width:videoSet.width, height:videoSet.height, pic:videoSet.poster, isHtml5ShowPosterOnEnd:true, isiPhoneShowPosterOnPause:true, vodFlashSkin:'http://imgcache.qq.com/minivideo_v1/vd/res/skins/TencentPlayerMiniSkin.swf',//精简皮肤 onwrite: function() { console.log("播放器显示完毕"); $('.tvp_overlay_play').css({'background-color': 'rgba(255, 255, 255, 0)'}); $(".tvp_button_play").css({'border':'none'}); }, onplaying:function(){ console.log('开始播放'); }, onpause:function(){ console.log('暂停了') $('.tvp_overlay_play').css({'background-color': 'rgba(255, 255, 255, 0)'}); $(".tvp_button_play").css({'border':'none'}); $(".tvp_overlay_replay .tvp_button_replay").css({'background':'transparent'}); $(".tvp_overlay_play, .tvp_overlay_play_try, .tvp_overlay_replay").css({'background':'transparent'}); }, onallended:function(){ console.log('播放完了') $('.tvp_overlay_play').css({'background-color': 'rgba(255, 255, 255, 0)'}); $(".tvp_button_play").css({'border':'none'}); $(".tvp_overlay_replay .tvp_text").css({'font-size':0}); } }); player.addParam("wmode","transparent"); })(); </script>
挖掘腾讯视频API
腾讯视频的API文档,其实就是加载一个js文件,再根据视频链接读取视频的封面、链接地址等。但代码已经被混淆,无法直接查看。在一阵分析之后,最终还是都被我拿到了,直接提供给后台,不修改原来的请求逻辑就接入了。
接下来也不想分析如何获得,就是总结几个API。
初始信息
假设我们拿到一个小鲜肉的视频链接:https://v.qq.com/x/cover/x1zn2j3vkb9e2os/n0022eraduw.html 。腾讯视频现在大部分的视频已经满足cover或page这两种格式,即使是旧视频,也会跳转为这些格式,不像优酷土豆,老视频还是老视频的格式。
以上的格式可以视为cover/cid/vids,page/vids,其中cid为这个视频的cover id,vids为视频的video id。cover id指的是这个视频所在的合辑。有些视频是没有cover id的。
所以小鲜肉的视频cid为x1zn2j3vkb9e2os,vids为n0022eraduw
获取缩略图
getVideoSnap = function(a) { var c, d, e = 1e8; for (var g = 4294967296, h = 0, i = 0; i < a.length; i++) { var j = a.charCodeAt(i); h = 32 * h + h + j, h >= g && (h %= g) } d = h % e; return c = "http://vpic.video.qq.com/"+d+"/"+a+"_160_90_3.jpg"; }
getVideoSpan传入视频的vids,即可获得视频的封面图,当然要经过一阵计算。目前的缩略图有三种后缀,分别为
http://vpic.video.qq.com/d/a_160_90_3.jpg http://vpic.video.qq.com/d/a_1.jpg http://vpic.video.qq.com/d/a.png
分别代表“封面图小图”、“第二张图”、“封面图大图”。一般就是取小图或大图,中间的图可以不管。
由上面vids=n0022eraduw可以得到缩略图链接为
http://vpic.video.qq.com/46838682/n0022eraduw.png
其他后缀可以自己主动修改。
获取信息
除了缩略图,可能还需要视频描述等。抱着凡是能看到的信息必定也可以抓取到的原则,拿到了获取信息的接口。
http://h5vv.video.qq.com/getinfo?otype=json&cid=COVERID&vids=VIDEOID
代入得到:
... "ti":"王俊凯北电艺考“万人追捕” 比大甩卖血拼的场景都火爆" ...
由于信息有点多,这里就不一一展示了,里面很多信息都是不知其意的,不过一眼就能看到这些中文字……一下子就拿到视频描述了。
获取视频mp4链接
不管你信不信,我是拿到了。原因很简单,腾讯视频有个bug(后面会说到),导致我一度想拿它的视频链接,自己来嵌入video,当然最后链接也拿到了,bug最后用另一种方案解决了。
现在来看看video的url格式:
http://183.214.128.91/vlive.qqvideo.tc.qq.com/n0022eraduw.m1.mp4?vkey=FAC3E342447ADE8EF171DF625B52B6B1C3986EF6B37A3E5ED73F0519758E3F3A22987A7B5ABBDFC4E967DB8B34494B00DAA3B8C3E4890836AC6DC967ACA9858A470B2811B69353D1A05E3415B847600DCF35D2ADB2DF33FE
其实就是
IP/vlive.qqvideo.tc.qq.com/VIDEOID.m1.mp4?vkey=FVKEY
这里面的ip(包含整个前缀)、VIDEOID和FVKEY都是可以从刚才的getinfo接口获取,我们把它套进去,发现视频显示不出来……
好了,其实我也不知道怎么回事,但我后来知道怎么解决了。就是在getinfo的时候加多一个参数 platform=11001
,即可,得到的fvkey就是可用于mp4的。
http://h5vv.video.qq.com/getinfo?otype=json&cid=COVERID&vids=VIDEOID&platform=11001
我猜测因为腾讯的API其实只是针对移动端做了video的mp4嵌入,除非显示设定,在PC并不会直接显示mp4。所以这个platform大概就是用来识别平台的。如果想从混淆的代码入手,可能难度有点大。
好了,拿到了mp4链接:
http://183.214.128.91/vlive.qqvideo.tc.qq.com/n0022eraduw.m1.mp4?vkey=FAC3E342447ADE8EF171DF625B52B6B1C3986EF6B37A3E5ED73F0519758E3F3A22987A7B5ABBDFC4E967DB8B34494B00DAA3B8C3E4890836AC6DC967ACA9858A470B2811B69353D1A05E3415B847600DCF35D2ADB2DF33FE
坑
本来一切都好好的,但测试却报来了一个BUG,移动端有某些功能缺失。我想不可能啊,都没动过,怎么会有问题,不会是腾讯视频的问题吧。
最后发现,确实是,因为腾讯视频居然改写了触摸手势……大概就是重新转发了触发手势,但原来的手势已经触发一遍了,导致触发了两遍。
最后的解决方案是用一个新的iframe来包裹腾讯视频,以避免其JS代码对原项目的污染,而项目与iframe的传输目前也比较简单,直接通过url传数据进去即可。
总结
作为一个API文档,其实腾讯视频应对普通的需求已经足够的,当你想要更多的定制时,就会面对更多的问题,也只是一步一步解决。
需求总是奇葩的。方案总是会有的。BUG也总是会有的。
参考:Python: 解析腾讯视频, 下载腾讯视频, 腾讯视频下载解析器, Tencent-Video-Download-Parser
本文:腾讯视频加载方案, 网页嵌入腾讯视频方式 iframe, 网页嵌入腾讯视频方式