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

线上播放是视频是160M以上的mp4视频，经过查看发现是视频一直不断的发送请求，下面就是根据这个找到的解决方案，经过查找，发现video不适合在视频很大的情况下使用，所以使用了把mp4视频转化为m3u8的方法：

1、mp4视频转为m3u8

1.1、安装FFmpeg

1.1.1 下载

去FFmpeg官网下载，

1.1.2解压到本地

设置环境变量，搜索环境变量

在里面新建一条然后把bin的路径放在里面保存

1.1.3验证安装是否成功

ffmpeg –version

出现这个就是安装成功

1.2、代码转换

ffmpeg -i  C:UsersPCDownloads	est.mp4 -c:v libx264 -c:a aac -map 0 -f hls -hls_time 10 -hls_list_size 0 C:UsersPCDownloads	est.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();
    },
  }
};