腾讯视频加载方案, 网页嵌入腾讯视频方式 iframe, 网页嵌入腾讯视频方式

 

前言:更多详细内容可以参考腾讯开发平台的文档,我在这里简单备忘一下

 

腾讯视频开放平台:http://v.qq.com/open/index.html
文档:http://v.qq.com/open/doc/tvpa…

 

方法一:引入iframe

在视频播放界面的左下方,鼠标移动到分享,复制通用代码放在页面上即可

腾讯视频加载方案, 网页嵌入腾讯视频方式 iframe, 网页嵌入腾讯视频方式
腾讯视频加载方案, 网页嵌入腾讯视频方式 iframe, 网页嵌入腾讯视频方式

将视频在微信公众平台中的调用代码提取出来,如下所示:

<iframe class="video_iframe" src="http://v.qq.com/iframe/player.html?vid=m0137rrajuc&amp;width=300&amp;height=200&amp;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&amp;width=300&amp;height=200&amp;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>

还有一种需求是 播放按钮 要求用其它样式的,我们可以把原本的播放按钮隐藏掉,然后把在视频封面图上加上视频按钮,如下图:

腾讯视频加载方案, 网页嵌入腾讯视频方式 iframe, 网页嵌入腾讯视频方式
腾讯视频加载方案, 网页嵌入腾讯视频方式 iframe, 网页嵌入腾讯视频方式

 

于是有了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>

对于3.2,我们也可以直接改播放按钮的样式。

 

挖掘腾讯视频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, 网页嵌入腾讯视频方式

Leave a Reply