当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 如何获取腾讯视频的缩略图地址？

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

2020年07月17日  | 移动技术网IT编程  | 我要评论

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

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网