已拿到视频的url，现在要截取视频的第一帧，作为封面图片。
在网上找了几种，都是空白。稍微改了一下，终于成功了。
基本就是用cavas进行绘制，解决一下跨域问题，截视频第一帧，然后根据视频原本的宽高进行绘制，最后转一下图片格式即可。
代码如下：
<template>
......
<video :src="videoSrc" id="upvideo">您的浏览器不支持 video 标签。</video>
......
<span style="margin-left:10px; font-size:16px;">封面设置</span>
<canvas id="mycanvas" style="display: none"></canvas>
<img :src="imgSrc">
......
</template>
<script>
export default {
data(){
return{
videoSrc:'xxxxxxxx', //视频的url
imgSrc:'',
......
}
},
methods:{
......
changeImage(url){
this.findvideocover(); //调用方法，按自己需求放在什么位置调用
......
},
//截取视频第一帧作为播放前默认图片
findvideocover(){
let video = document.getElementById("upvideo")
let canvas = document.getElementById("mycanvas")
video.crossOrigin = "anonymous"
video.currentTime = 1
canvas.width = video.clientWidth
canvas.height = video.clientHeight
canvas.getContext('2d').drawImage(video,0,0,canvas.width, canvas.height)
this.imgSrc = canvas.toDataURL('image/png')
},
......
}
}
</script>
<template>
......
<video :src="videoSrc" id="upvideo">您的浏览器不支持 video 标签。</video>
......
<span style="margin-left:10px; font-size:16px;">封面设置</span>
<canvas id="mycanvas" style="display: none"></canvas>
<img :src="imgSrc">
......
</template>
<script>
export default {
data(){
return{
videoSrc:'xxxxxxxx', //视频的url
imgSrc:'',
......
}
},
methods:{
......
changeImage(url){
this.findvideocover(); //调用方法，按自己需求放在什么位置调用
......
},
//截取视频第一帧作为播放前默认图片
findvideocover(){
let video = document.getElementById("upvideo")
let canvas = document.getElementById("mycanvas")
video.crossOrigin = "anonymous"
video.currentTime = 1
canvas.width = video.clientWidth
canvas.height = video.clientHeight
canvas.getContext('2d').drawImage(video,0,0,canvas.width, canvas.height)
this.imgSrc = canvas.toDataURL('image/png')
},
......
}
}
</script>
