视频上传到腾讯云对象存储之后,获取到视频的第一帧截图。
<template>
<div >
</div>
</template>
<script>
import { getVideoScreenShot } from '@/utils/upload'
export default {
name: 'AddVideo',
components: {
},
data () {
return {
}
},
props: {
},
watch: {
},
created () {
this.getScreenShotHandle ()
},
methods: {
getScreenShotHandle () {
let videoKey = 'xxx.mp4'
let files = getVideoScreenShot(videoKey, (data) => {
})
}
}
}
</script>
<style lang='less'>
</style>
封装 getVideoScreenShot 方法:
// https://cloud.tencent.com/document/product/436/11459
import COS from 'cos-js-sdk-v5'
import { Message } from 'element-ui'
import { getCOSSecretKey } from '@/api/common/index'
const config = {
videoBucket: 'xxxxxx',
imageBucket: 'xxxxxx',
Region: 'ap-beijing'
}
export function getVideoScreenShot (key, callback) {
getCOSSecretKey({ bucket: config.videoBucket }).then(response => { // 后台接口返回 密钥相关信息
// 后台接口返回 密钥相关信息
const data = response.result
var credentials = data && data.credentials
if (!data || !credentials) return console.error('credentials invalid')
// 初始化
var cos = new COS({
getAuthorization: (options, callback) => {
callback({
TmpSecretId: credentials.tmpSecretId,
TmpSecretKey: credentials.tmpSecretKey,
XCosSecurityToken: credentials.sessionToken,
StartTime: data.startTime,
ExpiredTime: data.expiredTime,
expiration: data.expiration,
requestId: data.requestId,
})
},
})
cos.request({
Bucket: config.videoBucket,
Region: config.Region,
Method: 'GET',
Key: key, /* 存储桶内的媒体文件,必须字段 */
Query: {
'ci-process': 'snapshot', /** 固定值,必须 */
time: 1, /** 截图的时间点,单位为秒,必须 */
// width: 720, /** 截图的宽,非必须 */
// height: 220, /** 截图的高,非必须 */
// format: 'jpg', /** 截图的格式,支持 jpg 和 png,默认 jpg,非必须 */
// rotate: 'auto', /** 图片旋转方式,默认为'auto',非必须 */
// mode: 'exactframe', /** 截帧方式,默认为'exactframe',非必须 */
},
RawBody: true
},
(err, data) => {
if (data && data.statusCode == 200) {
callback(data) // 返回图片链接地址和视频的原始名称
} else {
Message({ message: '查询视频第一帧截图失败!', type: 'error' })
}
}
)
})
}
export default {
getVideoScreenShot
}
结果:
页面显示: