Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "how to use vue to record video and compress video files". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

First, download gif.js-related files, which can be downloaded here, and then put these files in the static/js of the root directory.

Gif.js related documents and storage path

Download the dependency package:

Npm i timers

3. Declare on the page:

Import {setInterval, clearInterval} from "timers"; import GIF from ".. / static/js/gif.js"

4. Html code block:

Video size: {{videoSize}} Video duration: {{videoLength}}

5. Initialize GIF when the page is loaded:

Mounted () {/ / initial gif this.gif = new GIF ({workers: 1, quality: 1000, width: window.innerWidth, height: window.innerHeight, workerScript:'.. /.. / static/js/gif.worker.js',});}

6. When input returns to the page after recording the video, get the video file. Each time you get the video file, you need to remove the previous listening:

/ / input file goes to changeVideo (e) {var file = e.target.files [0]; const video = document.getElementById ('myvideo'); / / Video starts playing video.removeEventListener (' play', this.videoPlay, false); / / after video playback video.removeEventListener ('ended', this.videoEnded, false); this.androidFile (file);}

7. The this.androidFile method mentioned in the previous step is to play the video file on the page once, process the video during the playback process, complete the whole conversion process, and obtain the final file:

/ / androidFile (file) {/ / Video byte size 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 to base64 var reader = new FileReader (); reader.readAsDataURL (file) Reader.onload = function () {that.videoSrc = this.result; video.play ();} / / the video starts playing video.addEventListener ('play', this.videoPlay, false); / / after the video is played, video.addEventListener (' ended', this.videoEnded, false) / / execute this.gif.on ('finished', function (blob) {if (that.fileAndroid.size = = blob.size) return; console.log ("blob file of gif", blob); / / file that.fileAndroid = that.convertBase64UrlToFile (blob); / / upload video file that.uploadVideo (that.fileAndroid);});}

Eighth, the this.videoPlay method mentioned in step 7. In the process of playing the video on the page, capture an image through canvas every 200ms and stack these pictures to gif.js one by one:

/ / videoPlay () {const that = this; const video = document.getElementById ('myvideo'); const canvas = document.getElementById (' canvas'); var context = canvas.getContext ('2d'); console.log ("video duration", video.duration); this.videoLength = video.duration / / to draw a video on canvas, you need to get it dynamically, drawing frame by frame 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);}}

9. The this.videoEnded method mentioned in step 7. After the video is played, render the dynamic image of the image stack through gif.js:

/ / after the video is played, videoEnded () {this.gifSetTime = false; console.log ("Video playback is over!") This.gif.render ();}

The that.convertBase64UrlToFile method mentioned in step 7. Convert the Blob file generated by gif.js to File format:

/ / blob to file convertBase64UrlToFile (blob) {var d = new Date () .getTime (); var type = 'image/gif' return new File ([blob], "fileGif-" + d +' .gif', {type:type});}

Finally, upload the picture to the server through the that.uploadVideo method described in step 7:

/ / upload video uploadVideo (file) {console.log ("uploaded video file", file)}

All my code is provided here, Android's video file is relatively large, so it is compressed, while IOS itself has video compression, so I make a distinction here.

Video size: {{videoSize}} Video duration: {{videoLength}} 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 () {/ / judgment terminal var u = navigator.userAgent Var isAndroid = u.indexOf ('Android') >-1 | | u.indexOf (' Adr') >-1; / / android terminal var isiOS =!! u.match (/\ (I [^;] +; (U;)? CPU.+Mac OS X/); / / ios terminal if (isAndroid) {console.log ('isAndroid') this.isAndroid = true;} else if (isiOS) {console.log (' isiOS') this.isAndroid = false }, mounted () {/ / initial gif this.gif = new GIF ({workers: 1, quality: 1000, width: this.winWidth, height:this.winHeight, workerScript:'.. /.. / static/js/gif.worker.js',});}, methods: {/ / input file towards changeVideo (e) {var file = e.target.files [0]; const video = document.getElementById ('myvideo') If (file! = = undefined) {/ / judge to go to if (this.isAndroid) {/ / the video starts playing video.removeEventListener ('play', this.videoPlay, false); / / after the video is played, video.removeEventListener (' ended', this.videoEnded, false); this.androidFile (file);} else {this.iphoneFile (file) }}, / / IOS shooting video iphoneFile (file) {const that = this; / / Video byte size this.videoSize = file.size; var url = null; / / file is converted to blob if (window.createObjectURLcompressed undefined) {/ / basic url = window.createObjectURL (file);} else if (window.URLcompressed undefined) {/ / mozilla (firefox) url = window.URL.createObjectURL (file) } else if (window.webkitURLFUND undefined) {/ / webkit or chrome url = window.webkitURL.createObjectURL (file);} this.videoSrc = url; if (file.size)

500000) {this.uploadVideo (file);} else if (file.size > = 2100000) {this.$vux.toast.text ('video is too large, please limit it to 10 seconds');} else {this.$vux.toast.text ('video recording cannot be less than 5 seconds');}}, / / Android video androidFile (file) {/ / video byte size 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 to base64 var reader = new FileReader (); reader.readAsDataURL (file); reader.onload = function () {that.videoSrc = this.result; video.play () } / / the video starts to play video.addEventListener ('play', this.videoPlay, false); / / after the video is played, video.addEventListener (' ended', this.videoEnded, false); this.gif.on ('finished', function (blob) {if (that.fileAndroid.size = = blob.size) return; console.log ("gif's blob file", 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 ("video duration", video.duration); this.videoLength = video.duration / / to draw a video on canvas, you need to get it dynamically. Draw 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) }, / / after the video is played, videoEnded () {this.gifSetTime = false; console.log ("video playback is over!") 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});}, / upload video uploadVideo (file) {console.log ("uploaded video file", file)},}} "how to use vue to record video and compress video files" is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.