最近、fastadminを使用してプロジェクトを開発しました。このプロジェクトでは、ビデオのカバーイメージが必要で、顧客はビデオのカバーイメージを1つずつ提供できません。作業負荷を減らすために、デフォルトのカバーイメージは、ビデオをバックグラウンドでアップロードした直後に生成するか、または自動的にアップロードできます。のカバー画像;
fastadminフレームワークを使用してビデオアップロード関数を生成し、これに基づいて関数を追加します。
最初はページ、追加ページが配置され、編集ページは同じです
此处是手动上传的封面图
<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であり、データベースはロングテキストタイプを使用する必要があることに注意してください。
フレームを使用して動画アップロード関数を生成した後、アップロードできる動画のタイプとサイズを設定することを忘れないでください。