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

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

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

1.1 研发背景

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

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

1.2 解决方案

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

API 文档地址如下:https://m.v.qq.com/txp/v3/src/jsapi/apis.html
调用API 如下图所示:
如何获取腾讯视频的缩略图地址?_第1张图片

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>使用JSAPItitle>
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 可以看到如下图所示的结果:
如何获取腾讯视频的缩略图地址?_第2张图片
视频播放地址:https://v.qq.com/txp/iframe/player.html?vid=q0024wtk0v8

缩略图地址:https://vpic.video.qq.com/59287979/q0024wtk0v8.png

1.3 参考资料

腾讯视频开放云平台

你可能感兴趣的:(Java,EE,修炼手册)