foreword
When we make an audio management module of a background system, we usually need to do a front-end pre-processing of the video we upload. First of all, we have to limit the size and type of the file, and then there are some specific requirements, such as automatically reading some information of the file and passing it to the backend. Of course, these can be done on the back end, but relatively speaking, putting resource consumption on the front end will relatively reduce the pressure on the back end. Here we mainly introduce how to obtain the first frame of the front-end screen and the duration of the video. The screen can assist us to set the video cover image of the new information, and the duration can allow users to feel the accuracy and size of the file more intuitively.
Get video duration
Obtaining the duration is relatively easier than obtaining the first frame, but both have a common need, that is, we need to add a video tag to our html code, and put the video address we want to obtain information into the link of the tag middle.
To get the duration, you only need to add a listening event, loadedmetadata, to the video element. In this listening event, we can get the audioElement object, in which there are parameters of the video duration.
getVideoDuration(file) {
var url = URL.createObjectURL(file);
var audioElement = new Audio(url);
var self = this;
var result;
audioElement.addEventListener("loadedmetadata", function() {
// 视频时长值的获取要等到这个匿名函数执行完毕才产生
result = audioElement.duration; //得到时长为秒，小数，182.36
self.ruleForm.videoDuration = parseInt(result); //转为int值
});
}
Get the first frame
First of all, we need to understand how video works on our page. At the front end, the way I know to get in touch with the video is the video tag, so we need to have a video tag, and then add the video address to it, so that we can get some information about the video.
①The first step is to convert the file uploaded by the user into a blob address. Of course, in some cases, we can directly obtain the address passed by the backend, but when we need to submit the video and the form together, there is no way to do it There is a sequential order in this way. So we have to do our best to convert the video into an address and load it into the audio tag.
const file = '.....'
const a = new FileReader();
a.readAsDataURL(file);
a.onload = (e) => {
const blob = new Blob([e.target.result], {
type: file.type }) // 如果发现乱码检查一下type赋值的对不对
}
②The second step, as we all know, if the video is loaded successfully, then our video is loaded correctly, and the first frame of the video will be displayed, so at this time we can use canvas to capture the first frame of the screen Next, convert it to base64. Of course, if you need to upload the cover together, we can convert base64 to file.
findvideocover() {
let size = 160
// 获取video节点
const video = document.getElementById("videoPlay");
video.width = size
video.height = size
video.currentTime = 1 // 第一帧
//创建canvas对象
const canvas = document.createElement("canvas")
canvas.width = size
canvas.height = size
this.$nextTick(()=>{
// 利用canvas对象方法绘图
canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
// 转换成base64形式
const img = canvas.toDataURL("image/jpeg") // 这个就是图片的base64
this.coverUrl = img
})
}
base64 to file
const arr = base64.split(',')
const type = arr[0].match(/:(.*?);/)[1]
const size = window.atob(arr[1])
let n = size.length
const u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = size.charCodeAt(n)
}
const file = new File([u8arr], name, {
type })
epilogue
These two functions are not complicated, as long as you understand the principles and processes, you can easily achieve the effect. The main question is whether the video can be loaded into the video normally after converting the video from file to blob. If not, you need to ask for help from the backend, first pass the video up and get the address of the file, and then execute the reading of the first frame of the screen function as a cover.