Idea introduction
In Internet applications, video is a common form of media, but video files often occupy a large storage space and network bandwidth, affecting user experience and efficiency. In order to solve this problem, we can use video compression technology to balance the size and quality of video files and reduce the cost of video transmission and storage. At the same time, we also need to ensure the clarity and fluency of the video so that users can watch high-quality video content.
This article will introduce how to use the Vue+Springboot framework to implement a video compression & clear playback front-end application, mainly including the following aspects:
- The front end uses the Vue framework to build a simple video upload and playback interface, and uses the Element UI component library to provide beautiful styles and interactions.
- The backend uses the Springboot framework to build a RESTful API service that provides video upload, compression, download and playback functions, uses FFmpeg tools for video compression processing, and uses the H2 database to store video metadata.
- Use the axios library to realize the data interaction between the front and back ends, and use the video.js library to realize the customization and control of the video player.
Technical points explained
front end
1. Create a Vue project
We can use the Vue CLI tool to create a Vue project, the command is as follows:
vue create video-compression
copy
Just select the default configuration. After the project is created, enter the project directory and run the following command to start the development server:
npm run serve
copy
Open your browser and visit http://localhost:8080/, you can see a simple welcome page.
2. Install dependent libraries
We need to install the following dependent libraries:
- Axios: used to realize data interaction between front and back ends
- element-ui: used to provide beautiful UI components
- video.js: for customizing and controlling the video player
Run the following commands to install these libraries:
npm install axios element-ui video.js --save
copy
3. Configure Element UI
In the main.js file, introduce the element-ui style file and component library, and register it as a global component:
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
copy
4. Create a video upload and playback interface
Create a components folder in the src directory, and create a VideoUpload.vue file in it, which is our video upload and playback component. In this file, we need to define the following data and methods:
- videoFile: used to store the video file object selected by the user
- videoUrl: URL address used to store video files uploaded by users
- compressedVideoUrl: URL address for storing compressed video files downloaded by users
- uploadVideo: used to upload video files, call the backend /upload interface, and assign the returned URL address to videoUrl
- compressVideo: used to realize the compression function of video files, call the backend /compress interface, and assign the returned URL address to compressedVideoUrl
- downloadVideo: Used to realize the download function of video files, call the /download interface of the backend, and save the compressed video files locally
- playVideo: Used to realize the playback function of video files, use the video.js library to create a video player, and use videoUrl or compressedVideoUrl as the video source
In the <template> tag, we need to use element-ui components to build a simple interface, including the following parts:
- An el-upload component for selecting and uploading video files, binding videoFile data and uploadVideo method
- An el-button component, used to trigger the compression function of the video file, bind the compressVideo method
- An el-button component, used to trigger the download function of the video file, bind the downloadVideo method
- An el-button component, used to trigger the playback function of the video file, bind the playVideo method
- A div element used to display the video player, set the id to video-player
The complete code of the VideoUpload.vue file is as follows:
<template>
<div class="video-upload">
<el-upload
action="#"
:auto-upload="false"
:show-file-list="false"
:before-upload="uploadVideo"
>
<el-button type="primary">选择视频</el-button>
</el-upload>
<el-button type="success" @click="compressVideo" :disabled="!videoUrl">压缩视频</el-button>
<el-button type="info" @click="downloadVideo" :disabled="!compressedVideoUrl">下载视频</el-button>
<el-button type="warning" @click="playVideo" :disabled="!videoUrl && !compressedVideoUrl">播放视频</el-button>
<div id="video-player"></div>
</div>
</template>
<script>
import axios from 'axios'
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
export default {
name: 'VideoUpload',
data() {
return {
videoFile: null,
videoUrl: '',
compressedVideoUrl: ''
}
},
methods: {
uploadVideo(file) {
this.videoFile = file
let formData = new FormData()
formData.append('file', file)
axios.post('http://localhost:8081/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(res => {
this.videoUrl = res.data
this.$message.success('上传成功')
}).catch(err => {
console.error(err)
this.$message.error('上传失败')
})
return false
},
compressVideo() {
axios.get('http://localhost:8081/compress', {
params: {
url: this.videoUrl
}
}).then(res => {
this.compressedVideoUrl = res.data
this.$message.success('压缩成功')
}).catch(err => {
console.error(err)
this.$message.error('压缩失败')
})
},
downloadVideo() {
axios.get('http://localhost:8081/download', {
params: {
url: this.compressedVideoUrl
},
responseType: 'blob'
}).then(res => {
let blob = res.data
let url = window.URL.createObjectURL(blob)
let link = document.createElement('a')
link.href = url
link.download = this.videoFile.name.replace(/\.\w+$/, '-compressed.mp4')
link.click()
window.URL.revokeObjectURL(url)
this.$message.success('下载成功')
}).catch(err => {
console.error(err)
this.$message.error('下载失败')
})
},
playVideo() {
let player = videojs('video-player', {
controls: true,
autoplay: true,
preload: 'auto',
fluid: true,
sources: [{
src: this.compressedVideoUrl || this.videoUrl,
type: 'video/mp4'
}]
})
}
}
}
</script>
<style scoped>
.video-upload {
margin: 20px;
}
#video-player {
width: 800px;
height: 450px;
}
</style>How to use FFmpeg for video compression
FFmpeg is a powerful video processing tool that can be used for video compression. The principle of video compression is to reduce the bit rate, resolution, frame rate or encoding format of the video, thereby reducing the size of the video file, but at the same time it will also lose a certain amount of video quality. FFmpeg can control various options of video compression through command line parameters, for example:
-vcodec: Specifies the video encoding format, such as libx264 (H.264), libx265 (H.265), libvpx (VP8/VP9), etc.-crf: Specify the compression quality factor, the value range is 0-51, 0 means lossless, 23 is the default value, the larger the value, the lower the quality-b:v: Specify the video bit rate, such as 1M, 500k, etc.-s: Specifies the video resolution, such as 1280x720, 640x480, etc.-r: Specify the video frame rate, such as 30, 24, 15, etc.
Here are some examples of video compression using FFmpeg:
-
Compress video using the H.264 encoding format and a compression quality factor of 23:
ffmpeg -i input.mp4 -vcodec libx264 -crf 23 output.mp4 -
Compress video using the H.265 encoding format and a compression quality factor of 28:
ffmpeg -i input.mp4 -vcodec libx265 -crf 28 output.mp4 -
Compress video using VP9 encoding format and 1M bit rate:
ffmpeg -i input.mp4 -vcodec libvpx-vp9 -b:v 1M output.webm -
Reduce video resolution to 640x480:
ffmpeg -i input.mp4 -s 640x480 output.mp4 -
Reduce the video frame rate to 15:
ffmpeg -i input.mp4 -r 15 output.mp4