13、解决线上100M以上视频循环播放倒是页面卡死的情况

线上播放是视频是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();
    },
  }
};