获取视频第一帧作为封面

短命女 2022-12-10 05:56 429阅读 0赞

# 制作视频一帧封面（H5处理） #

## 实现原理： ##

### 1：创建video获取视频（上传或者网络视频） ###

var video = document.createElement("VIDEO");

### 2：指定video截取当前帧数 ###

video.currentTime = 5; //必须设置视频当前时长，要不然会黑屏

### 3：创建canvas画布 ###

var canvas = document.createElement('canvas');

### 4：视频加载完毕，截取视频帧数，绘画视频封面 ###

// 图片绘制
    video.onloadeddata = (() => {
        // 设置画布的宽高
        canvas.width = video.clientWidth;
        canvas.height = video.clientHeight;      
        window.getComputedStyle(that.$refs.videoFilter).width,     
        window.getComputedStyle(that.$refs.videoFilter).height);
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width,canvas.height);
        var dataURL = canvas.toDataURL('image/jpeg');
        // console.log(dataURL,"-----")
    })

## 完整案例如下： ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style>
            html,
            body {
                margin: 0;
                padding: 0;
                border: none;
            }
            
            #output {}
        </style>
    </head>
    
    <body>
        <div id="app">
            <video :src="videoSrc" crossOrigin="anonymous" controls="controls" style="width: 100%;height: auto;" ref="videoFilter" id="videofile"></video>
            <input type="file" name="" id="file" accept="video/*" value="上传视频" @change="getBigectURL">
            <div id="output"></div>
        </div>
    </body>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                videoSrc: ''
            },
            methods: {
                getBigectURL(event) {
                    // console.log('getBigectURL', event)
                    var current = event.target.files[0]
                    var fileReader = new FileReader()
                    fileReader.readAsDataURL(current)
                    var that = this
                    fileReader.onload = function(e) {
                        // 如果文件上传使用fileReader.onload => that.videoSrc=e.currentTarget.result
                        // 远程图片直接转换 that.videoSrc='https://+uri'
                        that.videoSrc = e.currentTarget.result;
                        // console.log(that.videoSrc, 11111)
                        const width = 750;
                        const height = 1360;
                        var video = document.getElementById("videofile");
                        // console.log(video, 66666);
                        video.currentTime = 5; //必须设置视频当前时长，要不然会黑屏
                        var output = document.getElementById("output");
                        // 创建画布准备截图
                        var canvas = document.createElement('canvas');
                        // 创建图片标签
                        var img = document.createElement("img");
                        // 获取视频的标签
                        video = document.getElementById('videofile');
                        video.setAttribute('crossOrigin', 'anonymous');
    
    
                        // 图片绘制
                        video.onloadeddata = (() => {
                            // 设置画布的宽高
                            canvas.width = video.clientWidth;
                            canvas.height = video.clientHeight;
                            console.log('', video.clientWidth, video.clientHeight, window.getComputedStyle(that.$refs.videoFilter).width, window.getComputedStyle(that.$refs.videoFilter).height);
                            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
                            var dataURL = canvas.toDataURL('image/jpeg');
                            // console.log(dataURL,"-----")
                            img.src = dataURL;
                            //img.width = 400;
                            //img.height = 300;
                            // 添加到output盒子里面
                            output.appendChild(img);
                            // console.log(img)
                        })
                    }
    
                },
            },
            mounted() {
                let w = document.body.clientWidth;
                let h = document.body.clientHeight;
                let videoFilterRef = this.$refs.videoFilter;
                // console.log(w, h, videoFilterRef);
                // videoFilterRef.style.width = w;
            }
        })
    </script>
    
    </html>

## 异步轮循promise/await/async处理： ##

### 注意：在轮循处理是，避免连续创建video节点 ###

// 视频-封面
        async processFilter(vdatas) {
          if (!vdatas) return;
          if (vdatas.length) {
            let video = document.createElement("VIDEO");
            for (let i = 0, length = vdatas.length; i < length; i++) {
              let baseUri_ = await this.getBigectURL(vdatas[i].videoUri, vdatas[i],video );
              this.commentList[vdatas[i].parentIndex].filterCommentImgsUrl[
                vdatas[i].currentIndex
              ].cover = baseUri_;
            }
          }
        },
    
    getBigectURL(videoUri, item,video ) {
          if (!videoUri) return;
          this.videoSrc = videoUri;
          // let video = document.createElement("VIDEO");
          video.currentTime = 5; // 必须设置视频当前时长，要不然会黑屏
          // 创建画布准备截图
          let canvas = document.createElement("canvas");
          // 获取视频的标签
          video = document.getElementById("videofile");
          video.setAttribute("crossOrigin", "anonymous");
          return new Promise((resolve) => {
            // videoUri: 视频上传后的路径
            video.onloadeddata = () => {
              // 设置画布的宽高
              canvas.width = video.clientWidth;
              canvas.height = video.clientHeight;
              canvas
                .getContext("2d")
                .drawImage(video, 0, 0, canvas.width, canvas.height);
              let dataURL = canvas.toDataURL("image/jpeg");
              // console.log("end:", videoUri);
              resolve(dataURL);
            };
          });
          // 图片绘制
        },

# iphone兼容问题： #

苹果safari中会出现页面初始化***video.onloadeddata***不执行，要刷新后才进入onloadeddata回调函数......

### 制作视频一帧封面（小程序处理） ###

小程序显示视频会自动获取封面，暂不出现封面问题

移动端h5存在兼容性问题，效果不是很好，建议使用[阿里云oss视频封面][oss]和[七牛云][Link 1]

[oss]: http://a-image-demo.oss-cn-qingdao.aliyuncs.com/demo.mp4?x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast
[Link 1]: https://developer.qiniu.com/dora/api/1313/video-frame-thumbnails-vframe