如何获取腾讯视频的缩略图地址？
程序员文章站
2022-03-21 19:25:32
使用JS API 获取腾讯视频缩略图解决方案...
1.1 研发背景
在上一篇博文Java提取视频中的指定桢数生成视频缩略图的解决方案中我们学习了如何从上传的视频中获取视频的缩略图，这篇博文我们来聊聊如何获取腾讯视频上托管的视频的缩略图。
关于如何获取腾讯缩略图的方法，之前我也很困惑，因为腾讯视频托管的视频真实地址都是加密的，我们无法获取真实的视频文件地址，也就是说我们就无法使用上一篇那种方式处理。
1.2 解决方案
幸运的是，我在网上偶然间发现了一种方法，通过腾讯视频开放平台提供的JS API 可以轻松获取到这个视频缩略图。
API 文档地址如下：https://m.v.qq.com/txp/v3/src/jsapi/apis.html
调用API 如下图所示：
PS：同理，其他平台应该也有对应的API 提供支持。
但是获取真实图片的地址应该是不可能的。
可以看到我们通过调用player.getPoster(); 就可以成功获取视频的缩略图了。
废话不多说这里上一个Demo 示例。
首先测试的一个腾讯视频分享代码如下：
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=q0024wtk0v8" allowFullScreen="true"></iframe>
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>
<!-- 使用相对协议，同时支持http和https -->
<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 可以看到如下图所示的结果：
视频播放地址：https://v.qq.com/txp/iframe/player.html?vid=q0024wtk0v8
缩略图地址：https://vpic.video.qq.com/59287979/q0024wtk0v8.png
1.3 参考资料
本文地址：https://blog.csdn.net/hadues/article/details/107384756