文件上傳框
<input type="file">，除了可以選擇文件上傳之外景殷，還可以調(diào)用攝像頭來拍攝照片或者視頻并上傳澡屡。capture屬性可以判斷前置or后置攝像頭。在視頻播放的過程中绩蜻，用canvas定時(shí)截取一張圖片室埋，然后用gif.js生成一張GIF圖，從而完成前端的視頻壓縮孕蝉。
我這里使用的是Vue寫的腌逢，以下是我的流程及代碼：
一、下載gif.js相關(guān)文件佳鳖，可以到這里下載，然后將這幾個(gè)文件放在根目錄的static/js里面系吩。
gif.js相關(guān)文件及存放路徑
二穿挨、下載依賴包：
npm i timers
三、在頁面中聲明：
import { setInterval, clearInterval } from "timers";
import GIF from "../../static/js/gif.js"
四尊搬、html代碼塊：
<template>
<div>
<input ref="changeInput" type="file" accept="video/*" capture="user" @change="changeVideo" />
<div>
<div>視頻大型晾浴：{{videoSize}}</div>
<div>視頻時(shí)長(zhǎng)：{{videoLength}}</div>
<div>
<video id="myvideo" :src="videoSrc" :width="winWidth" :height="winHeight" ref="videoId" autoplay="true" controls muted></video>
<canvas id="canvas" :width="winWidth" :height="winHeight"></canvas>
</div>
</div>
</div>
</template>
五幌墓、在頁面加載完成時(shí)初始化GIF：
mounted(){
//初始gif
this.gif = new GIF({
workers: 1,
quality: 1000,
width: window.innerWidth,
height: window.innerHeight,
workerScript: '../../static/js/gif.worker.js',
});
},
六常侣、當(dāng)input錄制完視頻返回頁面中，獲取到這個(gè)視頻文件胳施，每次拿到視頻文件需要先移除之前的監(jiān)聽：
//input文件走向
changeVideo(e){
var file = e.target.files[0];
const video = document.getElementById('myvideo');
//視頻開始播放
video.removeEventListener('play', this.videoPlay, false);
//視頻播放完
video.removeEventListener('ended', this.videoEnded, false);
this.androidFile(file);
},
七舞肆、上一步提到的this.androidFile方法，是通過這個(gè)視頻文件椿胯，在頁面播放一遍，在這個(gè)播放過程處理視頻前方，完成整個(gè)轉(zhuǎn)換過程廉油，獲取到最終的文件：
//安卓拍攝視頻
androidFile(file){
//視頻字節(jié)大小
this.videoSize = file.size;
const that = this;
const video = document.getElementById('myvideo');
const canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
this.gifSetTime = true;
this.gif.abort()
this.gif.frames = [];
//file轉(zhuǎn)base64
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
that.videoSrc = this.result;
video.play();
}
//視頻開始播放
video.addEventListener('play', this.videoPlay, false);
//視頻播放完
video.addEventListener('ended', this.videoEnded, false);
//獲取到所有的圖片并渲染完后執(zhí)行
this.gif.on('finished', function(blob) {
if(that.fileAndroid.size == blob.size) return;
console.log("gif的blob文件",blob);
//file
that.fileAndroid = that.convertBase64UrlToFile(blob);
//上傳視頻文件
that.uploadVideo(that.fileAndroid);
});
},
八抒线、步驟七所說的this.videoPlay方法。視頻在頁面播放過程中趣竣，每200毫秒通過canvas截取一張圖片，把這些圖片一張張給gif.js堆疊：
//視頻開始播放
videoPlay(){
const that = this;
const video = document.getElementById('myvideo');
const canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
console.log("視頻時(shí)長(zhǎng)",video.duration);
this.videoLength = video.duration;
//畫布上畫視頻蝙茶，需要?jiǎng)討B(tài)地獲取它，一幀一幀地畫出來
var times = setInterval(function(){
context.drawImage(video, 0, 0, that.winWidth, that.winHeight);
that.gif.addFrame(context, {
copy: true
});
if(that.gifSetTime == false){
clearInterval(times);
}
}, 200);
},
九户秤、步驟七所說的this.videoEnded方法。視頻播放完转砖，通過gif.js將圖片堆疊的動(dòng)態(tài)圖渲染出來：
//視頻播放完
videoEnded(){
this.gifSetTime = false;
console.log("視頻播放完畢鲸伴！")
this.gif.render();
},
十、步驟七所說的that.convertBase64UrlToFile方法姓赤。將gif.js生成的Blob文件轉(zhuǎn)換成File格式：
//blob to file
convertBase64UrlToFile(blob) {
var d = new Date().getTime();
var type = 'image/gif'
return new File([blob],"fileGif-" + d + '.gif', {type:type});
},
最后通過步驟七所說的that.uploadVideo方法仲吏，上傳圖片給服務(wù)器：
//上傳視頻
uploadVideo(file){
console.log("上傳的視頻文件", file)
},
在這提供我的全部代碼，Android的視頻文件比較大所以做壓縮誓斥，而IOS本身存在視頻壓縮许帐，所以我這里做了區(qū)分
<template>
<div>
<input ref="changeInput" type="file" accept="video/*" capture="user" @change="changeVideo" />
<div>
<div>視頻大小：{{videoSize}}</div>
<div>視頻時(shí)長(zhǎng)：{{videoLength}}</div>
<div>
<video id="myvideo" :src="videoSrc" :width="winWidth" :height="winHeight" ref="videoId" autoplay="true" controls muted></video>
<canvas id="canvas" :width="winWidth" :height="winHeight"></canvas>
</div>
</div>
</div>
</template>
<script>
import { setInterval, clearInterval } from "timers";
import GIF from "../../static/js/gif.js"
export default {
data(){
return {
videoSize: '',
videoSrc: '',
videoLength: '',
isAndroid: false,
fileAndroid: {},
winWidth: window.innerWidth,
winHeight: window.innerHeight,
gifSetTime: false,
gif: '',
}
},
created() {
//判斷終端
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
if(isAndroid){
console.log('isAndroid')
this.isAndroid = true;
}else if(isiOS){
console.log('isiOS')
this.isAndroid = false;
}
},
mounted(){
//初始gif
this.gif = new GIF({
workers: 1,
quality: 1000,
width: this.winWidth,
height:this.winHeight,
workerScript: '../../static/js/gif.worker.js',
});
},
methods:{
//input文件走向
changeVideo(e){
var file = e.target.files[0];
const video = document.getElementById('myvideo');
if(file !== undefined){
//判斷走向
if(this.isAndroid){
//視頻開始播放
video.removeEventListener('play', this.videoPlay, false);
//視頻播放完
video.removeEventListener('ended', this.videoEnded, false);
this.androidFile(file);
}else{
this.iphoneFile(file);
}
}
},
//IOS拍攝視頻
iphoneFile(file){
const that = this;
//視頻字節(jié)大小
this.videoSize = file.size;
var url = null ;
//file轉(zhuǎn)換成blob
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
this.videoSrc = url;
if(file.size < 2100000 && file.size > 500000){
this.uploadVideo(file);
}else if(file.size >= 2100000){
this.$vux.toast.text('視頻太大，請(qǐng)限制在10秒內(nèi)');
}else{
this.$vux.toast.text('視頻錄制不能少于5秒');
}
},
//安卓拍攝視頻
androidFile(file){
//視頻字節(jié)大小
this.videoSize = file.size;
const that = this;
const video = document.getElementById('myvideo');
const canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
this.gifSetTime = true;
this.gif.abort()
this.gif.frames = [];
//file轉(zhuǎn)base64
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
that.videoSrc = this.result;
video.play();
}
//視頻開始播放
video.addEventListener('play', this.videoPlay, false);
//視頻播放完
video.addEventListener('ended', this.videoEnded, false);
this.gif.on('finished', function(blob) {
if(that.fileAndroid.size == blob.size) return;
console.log("gif的blob文件",blob);
that.fileAndroid = that.convertBase64UrlToFile(blob);
that.uploadVideo(that.fileAndroid);
});
},
//視頻開始播放
videoPlay(){
const that = this;
const video = document.getElementById('myvideo');
const canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
console.log("視頻時(shí)長(zhǎng)",video.duration);
this.videoLength = video.duration;
//畫布上畫視頻，需要?jiǎng)討B(tài)地獲取它惧浴，一幀一幀地畫出來
var times = setInterval(function(){
context.drawImage(video, 0, 0, that.winWidth, that.winHeight);
that.gif.addFrame(context, {
copy: true
});
if(that.gifSetTime == false){
clearInterval(times);
}
}, 200);
},
//視頻播放完
videoEnded(){
this.gifSetTime = false;
console.log("視頻播放完畢！")
this.gif.render();
},
//blob to file
convertBase64UrlToFile(blob) {
var d = new Date().getTime();
var type = 'image/gif'
return new File([blob],"fileGif-" + d + '.gif', {type:type});
},
//上傳視頻
uploadVideo(file){
console.log("上傳的視頻文件", file)
},
}
};
</script>
<style scoped>
</style>
試過很多種方法纵朋，而這種在移動(dòng)端瀏覽器（特別是微信瀏覽器Ｇ研洹）的兼容性是最好的。但是這個(gè)生成的視頻文件將會(huì)失去音頻宪祥，如果需要音頻的可以看我另一篇簡(jiǎn)書有說明幾種方法。有更好的方法歡迎大家留言藏澳，互相學(xué)習(xí)~
