線上播放是視頻是160M以上的mp4視頻，經(jīng)過查看發(fā)現(xiàn)是視頻一直不斷的發(fā)送請求，下面就是根據(jù)這個找到的解決方案，經(jīng)過查找，發(fā)現(xiàn)video不適合在視頻很大的情況下使用，所以使用了把mp4視頻轉(zhuǎn)化為m3u8的方法：

1、mp4視頻轉(zhuǎn)為m3u8

1.1、安裝FFmpeg

1.1.1 下載

去FFmpeg官網(wǎng)下載，

image.png

image.png

1.1.2解壓到本地

image.png

設(shè)置環(huán)境變量，搜索環(huán)境變量

image.png

在里面新建一條然后把bin的路徑放在里面保存

1.1.3驗證安裝是否成功

ffmpeg –version

image.png

出現(xiàn)這個就是安裝成功

1.2、代碼轉(zhuǎn)換

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表示每個切片的持續(xù)時間（這里設(shè)置為10秒），-hls_list_size表示M3U8播放列表中切片文件的最大數(shù)量（這里設(shè)置為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();
    },
  }
};