基於fastadmin框架，上傳視頻，自動截取視頻封面圖

最近用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>
            <!--<ul class="row list-inline plupload-preview" id="p-video_file"></ul>-->
            <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類型。

在使用框架生成視頻上傳功能後，不要忘記設置可以上傳的視頻類型以及大小。