<《沙丘》读后感，打开一个新世界《苏格拉底之死》读书笔记>

基于vue实现腾讯云点播的上传与播放

###前言
　　最近使用到<a href="https://www.boatsky.com/blog/77">腾讯云的视频点播</a>服务，在web客户端上传阶段虽然遇到api不明的情况，好歹还算有官方vue开源的包vod-js-sdk-v6可用。
  
　　等到使用其官方播放器时却遇到蛋疼的问题，原来它是以老式的script与style方式引入使用，没有官方vue的开源包可用，因此Cifer决定把踩的坑简单记录一来，供来者参考。
  
### 腾讯云点播上传
　　上传因为有官方开源包<a href="https://github.com/tencentyun/vod-js-sdk-v6" target="_blank" rel="nofollow">vod-js-sdk-v6</a>，使用方便，只展示核心代码，简述一下流程：
##### 1. 后端生成签名
　　官方有<a href="https://cloud.tencent.com/document/product/266/9219" target="_blank" rel="nofollow">详述</a>，还有 <a href="https://cloud.tencent.com/document/product/266/10638" target="_blank" rel="nofollow">demo</a>，略。
##### 2. 前端导入包并引入
```
npm install vod-js-sdk-v6
```
```
import TcVod from 'vod-js-sdk-v6';
```
##### 3. 前端获得签名
　　前端可以把这个签名放到vuex store里，也可以每次都重新获取：
```javascript
getSignature() {
	return new Promise( (resolve, reject) => {
		axios.get('api/gen_signature', {
			params: {
				procedure_param: 'QCVB_SimpleProcessFile({30,40})',
			}
		}).then( res => {
			this.signature =  res.signature;
			resolve(true);
		}).catch( () => {
			reject(false);
		});
	});
},
```
　　QCVB_SimpleProcessFile 是腾讯官方的传参方式，30，40分别表示视频上传后会自动转成720p与1080p分辨率的mp4文件。

注意：
　　一、虽然国内认为360p是标清，720p是高清，1080p是超高清，但mp4的压缩方式决定了它的清晰度与同分辨率的mkv相比是很差的，所以我们最低设定在所谓高清720p上。

二、除了mp4还有像hls之类的格式可选，这里选择mp4因为它在移动端的兼容性最好。

三、如果上传的视频分辨率，比如是720p，上传成功之后会转码成720p与1080p两个文件，都可以播放，但其实1080p的文件文件变大，分辨率也确实是1080p, 但并没有变得比720p更清晰，所以上传文件的分辨率应该是转码之后的分辨率的上限，转成更高码率是没有意义的事。

##### 4. 后端提供api/gen_signature接口
```python
def gen_signature(source_context=None, procedure_param=PROCEDURE):
	curr_time = int(time.time())
	expire_time = curr_time + 300
	params = {
		'secretId': SECRET_ID,
		'currentTimeStamp': curr_time,
		'expireTime': expire_time,
		'random': random.randint(0, sys.maxint),
		'classId': CLASS_ID,
		'procedure': procedure_param,
		'sourceContext': source_context,
	}
	old_buf = urllib.urlencode(params).encode('utf-8')
	new_buf = hmac.new(SECRET_KEY, old_buf, hashlib.sha1).digest()
	signature = base64.b64encode(new_buf + old_buf)
	# print(signature)
	return {'signature': signature}
```
　　以上是python后端获得签名的接口实现简述，实际以官方文档为准：
<a href="https://cloud.tencent.com/document/product/266/31758" target="_blank">https://cloud.tencent.com/document/product/266/31758</a>，上面有详细信息。
##### 5. 上传视频及后续事件监听
　　在判断视频格式、大小限制等所需验证之后进行上传及事件监听：
```javascript
async uploadFile(file) {
	if (!this.signature && !await this.getSignatureExpires()) {
		console.log(`获取视频上传签名失败`);
		return;
	}
	if (!this.tcVod) {
		this.tcVod = new TcVod({
			getSignature: () => this.signature,
		});
	}
	 this.uploader = this.tcVod.upload({
		mediaFile: file, // file是js的文件引用
	 });
	this.uploader.on('media_progress', info => {
		// 上传过程事件，比如显示进度条
	});
	this.uploader.done().then(info => {
		// 上传成功事件
		// 返回数据格式如下：{fileId: "xxx", vodeo: {url: "http://xxx.mp4",verify_content: "xxx"}}
	});
},
```
　　fileId就是我们需要保留的id，一般用它就腾讯云拉取其他信息，比如多种分辨率的多个视频链接、封面。
##### 6. 上传封面及后续事件监听
　　与上传视频几乎一样：
```javascript
async uploadCover(file) {
	if (!this.signature && !await this.getSignatureExpires()) {
		console.log(`获取视频上传签名失败`);
		return;
	}
	this.uploader = this.tcVod.upload({
		fileId: this.fileId,
		coverFile: file, // 图片文件
	});
	this.uploader.on('cover_progress', info => {
		// progress event
	});
	this.uploader.on('cover_upload', info => {
		// success
	});
}
```
　　从官方的例子<a href="https://tencentyun.github.io/vod-js-sdk-v6/" target="_blank" rel="nofollow">https://tencentyun.github.io/vod-js-sdk-v6/</a>可知，它也可以视频、封面同时上传，这里分开上传是为了保证先后顺序及可控性。

注意:
　　一、先上传视频，封面依赖前者fileId。
　　二、视频不变，封面可随时更改。
　　三、视频有变化，封面清空，须重新上传。
　　四、视频上传成功之后，并不代表视频马上可以播放，视频会有一个转码的过程，需要在后端监听腾讯视频转码成功的回调，前端去后端轮循结果。

### 腾讯云点播播放
　　官方虽然有播放器示例 <a href="https://cloud.tencent.com/document/product/266/14424">https://cloud.tencent.com/document/product/266/14424</a>，却不便于放到vue的组件化中，如果把js与css下载下来封装，那么还有字体之类东西，甚至还有别的坑，所以在官方开源包出来之前，我们能不能基于vue实现其组件呢。

这里有一个实现方式可供参考：
```javascript
<template>
	<div>
		<video :id="tcPlayerId" class="tencent-player" preload="auto" playsinline webkit-playsinline></video>
	</div>
</template>

二、因为我们难以确定视频播放过程会发生哪种情况：刷新页面、仅仅切换vue路由、同一个页面切换视频。所以干脆让video id加一个时间戳，解决腾讯云实例释放之后各种问题，它的原码可能也没有考虑到这种情况。

三、分别使用$nextTick与setTimeout保持传参变化在dom完成之后，且初始化又在传参之后。

如果觉得有帮忙，您可以在本页底部留言。

基于vue实现腾讯云点播的上传与播放

全部留言

我要留言