如何获取腾讯视频的缩略图地址？

﹏ヽ暗。殇╰゛Y 2023-02-27 05:50 123阅读 0赞

### 如何获取腾讯视频的缩略图地址？ ###

*   *  1.1 研发背景
     *  1.2 解决方案
     *  1.3 参考资料

## 1.1 研发背景 ##

在上一篇博文[Java提取视频中的指定桢数生成视频缩略图的解决方案][Java]中我们学习了如何从上传的视频中获取视频的缩略图，这篇博文我们来聊聊如何获取腾讯视频上托管的视频的缩略图。

关于如何获取腾讯缩略图的方法，之前我也很困惑，因为腾讯视频托管的视频真实地址都是加密的，我们无法获取真实的视频文件地址，也就是说我们就无法使用上一篇那种方式处理。

## 1.2 解决方案 ##

幸运的是，我在网上偶然间发现了一种方法，通过[腾讯视频开放平台][Link 1]提供的JS API 可以轻松获取到这个视频缩略图。

API 文档地址如下：[https://m.v.qq.com/txp/v3/src/jsapi/apis.html][https_m.v.qq.com_txp_v3_src_jsapi_apis.html]  
调用API 如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhZHVlcw_size_16_color_FFFFFF_t_70]

> PS：同理，其他平台应该也有对应的API 提供支持。  
> 但是获取真实图片的地址应该是不可能的。

可以看到我们通过调用player.getPoster(); 就可以成功获取视频的缩略图了。

废话不多说这里上一个Demo 示例。

首先测试的一个腾讯视频分享代码如下：

> PS: 值得注意的是`vid=q0024wtk0v8` 这个vid 后面的值应该就是视频Id

html5 获取方法源码如下：

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui" />
    <meta charset="UTF-8">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <title>使用JSAPI</title>
    </head>
    <body>
    
     <p style="padding:10px">
    <button type="button" class="btn btn-primary" onclick="player.play()">播放</button>
    <button type="button" class="btn btn-success" onclick="player.pause()">暂停</button>
    </p>
      
    <div id="container"></div>
    
    <script src='//vm.gtimg.cn/tencentvideo/txp/js/txplayer.js'></script>
    
    
    <script> var player = new Txplayer({ containerId: 'container', vid: 'q0024wtk0v8', width: '100%', height: screen.availHeight/3 }); player.on('ready', ()=>{ console.log('player ready'); var pic=player.getPoster(); console.log("视频缩略图:https://"+pic); }); player.on('volumeChange', (volume)=>{ console.log('player volumechange:', volume); }); player.on('playStateChange', (state)=>{ console.log('player playStateChange:', state); }); </script>
    
    </body>

运行上面的Demo 示例，我们打开F12 可以看到如下图所示的结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhZHVlcw_size_16_color_FFFFFF_t_70 1]  
视频播放地址：[https://v.qq.com/txp/iframe/player.html?vid=q0024wtk0v8][https_v.qq.com_txp_iframe_player.html_vid_q0024wtk0v8]

缩略图地址：[https://vpic.video.qq.com/59287979/q0024wtk0v8.png][https_vpic.video.qq.com_59287979_q0024wtk0v8.png]

## 1.3 参考资料 ##

[腾讯视频开放云平台][Link 2]

[Java]: https://xingyun.blog.csdn.net/article/details/107380907
[Link 1]: https://m.v.qq.com/txp/v3/
[https_m.v.qq.com_txp_v3_src_jsapi_apis.html]: https://m.v.qq.com/txp/v3/src/jsapi/apis.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhZHVlcw_size_16_color_FFFFFF_t_70]: /images/20230209/84228962ca1e4f6a9915215d1876e433.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhZHVlcw_size_16_color_FFFFFF_t_70 1]: /images/20230209/d9e79683b6924706974d650ed67a3c87.png
[https_v.qq.com_txp_iframe_player.html_vid_q0024wtk0v8]: https://v.qq.com/txp/iframe/player.html?vid=q0024wtk0v8
[https_vpic.video.qq.com_59287979_q0024wtk0v8.png]: https://vpic.video.qq.com/59287979/q0024wtk0v8.png
[Link 2]: https://v.qq.com/open/dev.html