vue上传视频获取视频第一帧
vue上传视频获取视频第一帧
·
<div class="video" v-show="videoUrl">
<video id="upvideo" v-show="poster == ''" :src="videoUrl">您的浏览器不支持视频播放</video>
<img :src="poster" alt="" /> // 获取第一帧
</div>
<canvas id="canvassrc" style="display: none"></canvas> // 注意要用到画布
afterRead(file, url) {
this.fileData = new FormData()
this.fileData.append('file', file.file)
wxVideoUpload(this.fileData).then((res) => {
if (res.code == 200) {
var canva = document.getElementById('canvassrc')
var video = document.getElementById('upvideo')
this.videoUrl = file.content
video.crossOrigin = 'anonymous' // 解决跨域问题,也就是提示污染资源无法转换视频
video.currentTime = 1 // 第一帧
video.oncanplay = () => {
canva.width = video.clientWidth // 获取视频宽度
canva.height = video.clientHeight //获取视频高度
// 利用canvas对象方法绘图
const ctx = canva.getContext('2d') // 绘制2d
ctx.drawImage(video, 0, 0, video.clientWidth, video.clientHeight)
// 转换成base64形式
this.imgsrc = canva.toDataURL('image/png') // 截取后的视频封面
this.poster = this.imgsrc
}
}
})
},
更多推荐
已为社区贡献2条内容
所有评论(0)