实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <script src="./js/vue.js" type="text/javascript" charset="utf-8"></script> -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="./js/gif.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/vconsole.min.js"></script>
<script>
new VConsole();
</script>
</head>
<body>
<div id="app">
<div>
<input ref="changeInput" type="file" accept="video/*" capture="user" @change="changeVideo" />
<div>
<div v-if='videoSize'>视频大小：{{videoSize}}</div>
<div v-if='videoLength'>视频时长：{{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>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
videoSize: '',
videoSrc: '',
videoLength: '',
isAndroid: false,
fileAndroid: {},
winWidth: 300,
winHeight: 300,
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) {
console.log('input文件走向')
var file = e.target.files[0];
const video = document.getElementById('myvideo');
if (file !== undefined) {
console.log('有文件')
//判断走向
if (this.isAndroid) {
console.log('是安卓手机')
//视频开始播放
video.removeEventListener('play', this.videoPlay, false);
//视频播放完
video.removeEventListener('ended', this.videoEnded, false);
this.androidFile(file);
} else {
console.log('不是安卓手机')
this.iphoneFile(file);
}
}
},
//IOS拍摄视频
iphoneFile(file) {
const that = this;
//视频字节大小
this.videoSize = (file.size / 1024/1000).toFixed(2) + "Mb";
var url = null;
//file转换成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) {
alert('视频太大，请限制在10秒内')
} else {
this.$vux.toast.text('视频录制不能少于5秒');
}
},
//安卓拍摄视频
androidFile(file) {
//视频字节大小
// this.videoSize = file.size;
this.videoSize =( file.size / 1024/1000).toFixed(2) + "Mb";
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转base64
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function() {
that.videoSrc = this.result;
// console.log('---------that.videoSrc------',that.videoSrc)
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);
console.log('that.fileAndroid.size',that.fileAndroid.size)
// this.videoSize =that.fileAndroid.size
this.videoSize =(that.fileAndroid.size / 1024/1000).toFixed(2) + "Mb";
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("视频时长", video.duration);
this.videoLength = video.duration + '秒';
//画布上画视频，需要动态地获取它，一帧一帧地画出来
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>
</style>
</body>
</html>
