vue截取視頻第一幀的圖片問題

更新時(shí)間：2022年11月25日 14:28:26 作者：silvia喵

這篇文章主要介紹了vue截取視頻第一幀的圖片問題,基本就是用cavas進(jìn)行繪制，解決一下跨域問題，截視頻第一幀，然后根據(jù)視頻原本的寬高進(jìn)行繪制，最后轉(zhuǎn)一下圖片格式即可，需要的朋友可以參考下

已拿到視頻的url，現(xiàn)在要截取視頻的第一幀，作為封面圖片。

在網(wǎng)上找了幾種，都是空白。稍微改了一下，終于成功了。

基本就是用cavas進(jìn)行繪制，解決一下跨域問題，截視頻第一幀，然后根據(jù)視頻原本的寬高進(jìn)行繪制，最后轉(zhuǎn)一下圖片格式即可。

代碼如下：

<template>
　　......
    <video :src="videoSrc" id="upvideo">您的瀏覽器不支持 video 標(biāo)簽。</video>
　　......
    <span style="margin-left:10px; font-size:16px;">封面設(shè)置</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(); //調(diào)用方法，按自己需求放在什么位置調(diào)用
        ......
      },

      //截取視頻第一幀作為播放前默認(rèn)圖片
      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 標(biāo)簽。</video>
　　......
    <span style="margin-left:10px; font-size:16px;">封面設(shè)置</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(); //調(diào)用方法，按自己需求放在什么位置調(diào)用
        ......
      },

      //截取視頻第一幀作為播放前默認(rèn)圖片
      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>

到此這篇關(guān)于vue截取視頻第一幀的圖片問題的文章就介紹到這了,更多相關(guān)vue截取視頻圖片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: