在上一篇文章中,我们介绍了如何借助 百度开放云的文档转码服务 来方便的处理各种文档格式,同时还可以借助跨平台的文档播放器来方便的查看转码之后的效果。
在这篇文章里面,我们继续介绍,如何借助百度开放云的视频转码服务,方便的处理各种视频格式,同时借助跨平台的播放器,方便的查看视频转码之后的效果
安装 bce-bos-uploader
我们不直接使用 bce-sdk-js,因为默认情况下,bce-sdk-js 只能支持现代浏览器,不过我们在 bce-bos-uploader 里面对于网络交互的部分,进行了适配,因此可以在比较低版本的IE下面运行。
bower install bce-bos-uploader
页面中引用相关的资源
<!--[if lt IE 8]><script src="bower_components/json3/lib/json3.min.js"></script><![endif]-->
<!--[if lt IE 9]><script src="bower_components/js-polyfills/es5.js"></script><![endif]-->
<!--[if lt IE 10]><script src="bower_components/moxie/bin/js/moxie.min.js"></script><![endif]-->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bce-bos-uploader/bce-bos-uploader.bundle.min.js"></script>
默认配置
var AK = 'your ak';
var SK = 'your sk';
var VOD_ENDPOINT = 'http://vod.baidubce.com';
var BOS_ENDPOINT = 'https://bj.bcebos.com';
var CHUNK_SIZE = '1m';
初始化 VodClient
视频转码的流程如下:
调用 vod 的 API,获取文件需要存储到 bos 上面的 bucket 和 object 名称
调用 uploader 的 API,把文件上传到 bos
调用 vod 的 API,启动转码任务
var vod = new baidubce.sdk.VodClient({
endpoint: DOC_ENDPOINT,
credentials: {ak: AK, sk: SK}
});
我们把文件上传到 BOS 之前,需要调用 vod 的 API,获取应该文件的存在位置:
function getVodKey(file) {
return vod.buildRequest('POST', null, 'apply').then(function (response) {
var mediaId = response.body.mediaId;
var bucket = response.body.sourceBucket;
var key = response.body.sourceKey;
file.__mediaId = mediaId;
return {
bucket: bucket, // 文件会上传到这个 bucket
key: key // 文件路径是 key
};
});
}
初始化 Uploader
在页面中放置一个上传控件:
<input type="file" id="file" />
然后初始化 bce-bos-uploader
var uploader = new baidubce.bos.Uploader({
browse_button: '#file',
multi_selection: true,
bos_endpoint: BOS_ENDPOINT,
bos_ak: AK,
bos_sk: SK,
auto_start: true,
max_file_size: '1Gb',
flash_swf_url: 'bower_components/moxie/bin/flash/Moxie.swf',
init: {
Key: function (_, file) {
// 这里需要调用刚才实现的 getVodKey 这个方法
return getVodKey(file);
},
FileUploaded: function (_, file, info) {
// 调用 转码服务的接口,提交转码请求
vod._internalCreateMediaResource(file.__mediaId, file.name, '测试文件').then(function () {
// 转码任务提交成功,可以考虑在页面显示 file.__mediaId
});
},
Error: function (_, error, file) {
// 处理错误
}
}
});
查看当前转码的视频列表
提交了视频转码请求之后,我们可以通过调用 vod.listMediaResources()
接口获取所有的视频转码任务,如果某个任务的状态是 PUBLISHED
了,那么就可以播放视频了:
vod.listMediaResources().then(function (response) {
console.log(response.body. media);
});
获取播放器地址
如果某个转码任务的状态是 PUBLISHED,那么就可以调用 doc.getPlayerCode(mediaId, width, height, autoStart)
的接口获取播放器的代码:
var mediaId = 'the PUBLISHED media id';
var width = 600;
var height = 300;
var autoStart = true;
doc.getPlayerCode(mediaId, width, height, autoStart).then(function (response) {
console.log(response.body.codes);
});
最终可以在浏览器里面播放转码之后的视频:http://resource.bcevod.com/vod/v1/online/Player.swf?media_id=mda-gd1hbi22ka1fm4s5&auto_start=true
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。