vue截取视频第一帧的图片问题

时间:2022-11-26 silvia喵人气:0

已拿到视频的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>

加载全部内容