上传视频时,手动截取视频第一帧,用于封面展示
const videoImg = await this.getVideoBase64(url) // video的url
getVideoBase64 (url) {
return new Promise(function (resolve, reject) {
let dataURL = ''
const video = document.createElement('video')
video.setAttribute('crossOrigin', 'Anonymous') // 处理跨域
video.setAttribute('src', url)
// 可以设置创建视频有固定的宽高
// video.setAttribute('width', 400)
// video.setAttribute('height', 240)
video.setAttribute('preload', 'auto') // auto|metadata|none
video.addEventListener('loadeddata', function () {
const canvas = document.createElement('canvas')
// canvas的尺寸和设置的视频宽高一样
// const width = video.width
// const height = video.height
// 如果未设置创建时视频的宽高,则使用默认视频的宽高
const width = video.videoWidth
const height = video.videoHeight
canvas.width = width
canvas.height = height
canvas.getContext('2d').drawImage(video, 0, 0, width, height) // 绘制canvas
dataURL = canvas.toDataURL('image/jpeg') // 转换为base64
console.log('dataURL:', dataURL) // base64格式的地址
resolve(dataURL)
})
})
}