线上播放是视频是160M以上的mp4视频，经过查看发现是视频一直不断的发送请求，下面就是根据这个找到的解决方案，经过查找，发现video不适合在视频很大的情况下使用，所以使用了把mp4视频转化为m3u8的方法：
1、mp4视频转为m3u8
1.1、安装FFmpeg
1.1.1 下载
去FFmpeg官网下载，
image.png
image.png
1.1.2解压到本地
image.png
设置环境变量，搜索环境变量
image.png
在里面新建一条然后把bin的路径放在里面保存
1.1.3验证安装是否成功
ffmpeg –version
image.png
出现这个就是安装成功
1.2、代码转换
ffmpeg -i C:\Users\PC\Downloads\test.mp4 -c:v libx264 -c:a aac -map 0 -f hls -hls_time 10 -hls_list_size 0 C:\Users\PC\Downloads\test.m3u8
在上面的命令中，input.mp4是要切片的文件名，-hls_time表示每个切片的持续时间（这里设置为10秒），-hls_list_size表示M3U8播放列表中切片文件的最大数量（这里设置为0，表示没有限制），output.m3u8是M3U8播放列表的文件名
2、代码使用
2.1、下载依赖
npm install video.js --save // 视频播放器插件
npm install videojs-contrib-hls --save // 播放hls流插件
2.2、页面使用
<template>
<video ref="videoPlayer" class="video-js vjs-big-play-centered"></video>
</template>
<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import 'videojs-contrib-hls';
import zhCN from 'video.js/dist/lang/zh-CN.json';
videojs.addLanguage('zh-CN', zhCN);
</script>export default {
name: 'WaterQuality',
components: { VueQr },
props: {},
data() {
return {
videoSrc: 'http://2.0.0.1:8082/xxx.m3u8',
options: {
autoplay: false,
controls: true,
fill: true,
loop: true,
preload: true
}
};
},
mounted() {
this.$nextTick(() => {
this.initPlayer();
});
},
beforeDestroy() {
if ( this.player) {
this.player.dispose();
}
},
methods: {
initPlayer() {
let ref = this.$refs.videoPlayer;
if (!ref) {
return;
}
this.options.sources = [{ src: this.videoSrc, type: 'application/x-mpegURL' }];
this.player = videojs(ref, this.options, () => {});
this.player.language('zh-CN');
this.player.play();
},
}
};
