1. Background
Large videos often freeze when playing on the website and cannot be played smoothly. When looking for solutions, I found many articles suggesting using m3u8 streaming media playback instead of MP4 playback. I did a test and now summarize and record the problems and solutions encountered during the test. Method.
2. Test implementation
1. Use ffmpeg for video conversion
1) Download ffmpeg
2) Add configuration to the environment variable path to use the command on the console
3) Use the command to convert MP4 format video to m3u8 format
ffmpeg.exe -i video.mp4 -hls_time 60 -hls_list_size 0 -f hls a.m3u8
In the above command, -i video.mp4 indicates that the input video source is video.MP4 (the video directory has been opened with the command here), and -hls_time 60 indicates that the video segmentation time is 60 seconds (in order to ensure the continuity of the picture, the video length is cut out by the number of frames) There will be a fluctuation range of several seconds), -hls_list_size 0 means to retain all segmented fragments (if this instruction is not added, only 5 fragments will be retained by default), -f hls means to use the hls streaming protocol to output the video (usually you do not need to add this The segment command usually automatically detects the input file and determines the output format based on the file extension of the output file). a.m3u8 indicates that the index of the cut video will be output as a file with this name.
After the command is executed, an a.m3u8 index file and several ts video files will be output.
*After using the command to convert, I found that the overall size of the video has become much smaller. I converted an MP4 video of about 2G into a small video clip of about 200M. There is no big somatosensory difference in the image quality and audio playback. I don’t understand the specific principle yet. , try it for a while to see if there are any pitfalls.
2.VUE project use
1) The project installs the videojs video playback library and its streaming media transmission protocol support
npm install --save video.js
npm install --save videojs-contrib-hls
Introduce videojs and corresponding style files into the page that needs to play the video
import videojs from "video.js";
import "video.js/dist/video-js.css";
The video-js.css style file cannot be found through vscode's automatic completion. When the style is not set, the page will display the configuration information below.
Sample code:
<template>
<q-page padding>
<div class="row">
<div class="col-6">
<video id="myVideo" class="video-js vjs-default-skin vjs-fluid"></video>
</div>
</div>
</q-page>
</template>
<script>
import { defineComponent } from "vue";
import videojs from "video.js";
import "video.js/dist/video-js.css";
function options(src, type) {
return {
autoplay: true,
muted: false,
loop: false,
controls: true,
preload: "auto",
fluid: true,
sources: [
{
type,
src,
},
],
notSupportedMessage: "视频资源无法加载",
textTrackDisplay: false,
};
}
export default defineComponent({
name: "PageIndex",
mounted() {
this.$nextTick(() => {
this.getVideo();
});
},
data() {
return {
attachmentLink: "http://localhost/resource/demo.m3u8",
srctype: "application/x-mpegURL",
attachmentLink1: "http://localhost/resourc/1-引言.mp4",
srctype1: "video/mp4",
};
},
methods: {
getVideo() {
let player = videojs("myVideo", options(this.attachmentLink, this.srctype), () => {
//player.play();
player.on("loadstart", function () {
console.log("Start load video");
});
player.on("play", function () {
console.log("Play video");
});
player.on("pause", function () {
console.log("Pause video");
});
player.on("ended", function () {
console.log("Video end");
});
});
},
},
});
</script>
3. Questions
1. If the m3u8 video cannot be played normally, you can check whether this type of MIME Type is allowed
.m3u8
.ts
2. When encapsulating video playback into components, repeated call exceptions and layout misalignment problems are encountered.
1) When calling the video component repeatedly, you need to change the fixed ID to a dynamic splicing ID, and before creating a new player entity, determine whether the corresponding entity has been created and release the old resources in time. Pay attention to id and resource release to prevent duplicate entities from causing errors when videojs() creates player entities. I used the Quasar framework, which has the beforeDestroy() life cycle function. There may be corresponding functions in other frameworks.
2) The adaptation of vjs-fluid is based on the width and height of the upper div container. After encapsulating it as a component, you must pay attention to defining the height of the upper div container of the video. Otherwise, the video will burst the upper container after adapting to the height, and the upper container will explode on the parent page. Covers other content
I defined a width and height for the upper div to avoid the problem of bursting the container. The fixed width and height of 16:9 and the vjs-16-9 style are used because vjs-fluid adapts the control after defining the width of the div. There will be black edges in the size. We can study whether there is a better solution in the future.
4. Summary
The above are the problems encountered during the project changes and their solutions. We will record and summarize them for subsequent review. If others encounter similar problems, they can also be used as a reference.