基于fastadmin框架，上传视频，自动截取视频封面图

男娘i 2023-02-16 09:25 34阅读 0赞

最近用fastadmin开发了一个项目，需要用到视频的封面图片，客户又不能一一提供视频对应的封面，为减少工作量，需要在后台上传视频后直接生成默认封面图片，也可以自动上传想要的封面图片；  
利用fastadmin框架，生成视频上传功能，在此基础上添加功能。

首先是页面，放的是add页面，edit页面是一样的

此处是手动上传的封面图
    <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Head_image')}:</label>
            <div class="col-xs-12 col-sm-8">
                <div class="input-group">
                    <input id="c-head_image" class="form-control" size="50" name="row[head_image]" type="text">
                    <div class="input-group-addon no-border no-padding">
                        <span><button type="button" id="plupload-head_image" class="btn btn-danger plupload" data-input-id="c-head_image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-head_image"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                        <span><button type="button" id="fachoose-head_image" class="btn btn-primary fachoose" data-input-id="c-head_image" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                    </div>
                    <span class="msg-box n-right" for="c-head_image"></span>
                </div>
                <ul class="row list-inline plupload-preview" id="p-head_image"></ul>
            </div>
            <div class="col-sm-10 col-sm-offset-2 col-xs-12" style="color: red;">封面图272*272，小于50kb</div>
    </div>
    
    此处是上传视频
    <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Video_file')}:</label>
            <div class="col-xs-12 col-sm-8">
                <div class="input-group">
                    <input id="c-video_file" class="form-control" size="5000" name="row[video_file]" type="text">
                    <div class="input-group-addon no-border no-padding">
                        <span><button type="button" id="plupload-video_file" class="btn btn-danger plupload" data-mimetype="video/mp4" data-input-id="c-video_file" data-multiple="false" data-preview-id="p-video_file"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    </div>
                    <span class="msg-box n-right" for="c-video_file"></span>
                </div>
                
                <video id="video" style="width: 160px;height:120px; " ></video>
            </div>
            <div class="col-sm-10 col-sm-offset-2 col-xs-12" style="color: red;">时长不超过15s，mp4格式，小于1M</div>
    </div>
    
    此处是上传视频后自动生成的默认封面图
    <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('默认封面图')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="fengmianinput" class="form-control" type="hidden" name="row[moren_image]">
                <img style="width: 160px;height:120px; " id="fengmian" src="" alt="">
            </div>
            <div class="col-sm-10 col-sm-offset-2 col-xs-12" style="color: red;">上传视频后自动生成</div>
    </div>

这一部分只要根据平时框架自动生成就可以了，最主要的是js文件中添加方法，下面放上最主要的js部分代码

//add方法内添加
    add: function () { 
                $("#plupload-video_file").data('upload-success',function(res){  //视频上传成功后触发
                    //console.log(res);
                    $("#video").attr('src',res.url);
                });
                var video = document.getElementById('video');
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                width = video.clientWidth;
                height = video.clientHeight;
                video.addEventListener('loadeddata', function (e) { 
                    // console.log('loadeddata')
                    this.currentTime=1.5;
                    canvas.width = this.videoWidth;
                    canvas.height = this.videoHeight;
                    width = this.videoWidth;
                    height = this.videoHeight;
                    // console.log(width, height)
                    // console.log(this)
                    var currentTime = this.currentTime;
                    var that=this;
                    setTimeout(function(){   //此处的setTimeout方法，是为了防止截取到视频前几帧为黑屏，如果可以确保视频没有黑屏，可以不用setTimeout方法
                        ctx.drawImage(that, 0, 0, width, height);
                        var src = canvas.toDataURL('image/jpeg');
                        console.log(src);
                        $("#fengmianinput").attr('value',src);
                        $("#fengmian").attr('src',src);
                    },200);
                });
                Controller.api.bindevent();
    },
    
    //edit方法同理
    edit: function () { 
                $("#plupload-video_file").data('upload-success',function(res){ 
                    //console.log(res);
                    $("#video").attr('src',res.url);
                });
                var video = document.getElementById('video');
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                width = video.clientWidth;
                height = video.clientHeight;
                video.addEventListener('loadeddata', function (e) { 
                    // console.log('loadeddata')
                    this.currentTime=1.5;
                    canvas.width = this.videoWidth;
                    canvas.height = this.videoHeight;
                    width = this.videoWidth;
                    height = this.videoHeight;
                    // console.log(width, height)
                    // console.log(this)
                    var currentTime = this.currentTime;
                    var that=this;
                    setTimeout(function(){ 
                        ctx.drawImage(that, 0, 0, width, height);
                        var src = canvas.toDataURL('image/jpeg');
                        console.log(src);
                        $("#fengmianinput").attr('value',src);
                        $("#fengmian").attr('src',src);
                    },200);
                });
                Controller.api.bindevent();
     },

需要注意的是，这里的默认封面图（上传视频自动截取的图），图片编码是base64，数据库需要用longtext类型。

在使用框架生成视频上传功能后，不要忘记设置可以上传的视频类型以及大小。