1. 需要在B/S架构播放2G的1小时时长视频，考虑性能要做视频分片

一、大视频存储

可以把视频进行切片处理，使用的工具软件ffmpeg 把视频ts切片生成.m3u8格式的。 先去官网下载软件： 执行命令：ffmpeg -i ./稻香.mp4 -c:v h264 -flags +cgop -g 30 -hls_time 5 -hls_list_size 0 -hls_segment_filename index%3d.ts index.m3u8 例如时长1小时的一个文件，使用此工具按照每5秒分割一个一个的小视频，生成的每个小视频后缀都是.ts格式： 同时也会生成一个.m3u8格式的文件，这个文件就是上图这些小视频的"索引"了，记录着每一帧在哪个uri下： 这样就可以一小个视频来进行存储了。

二、大视频播放

本人使用vue3框架播放视频 使用<video>标签指定播放地址为m3u8那个文件就可以了，有专门的视频播放js类库，会自己解析。 我使用的是import videojs from video.js;。具体代码如下：

<template>
<div>
  <video id="singleVideo" class="video-js vjs-default-skin vjs-big-play-centered" ></video>
</div>
</template>

<script>
import video.js/dist/video-js.css
import videojs from video.js;
import videojs-contrib-hls

export default {
          
   
  name: "PlayVideo",
  data () {
          
   
    return {
          
   
      videoSrc: 
    }
  },
  methods: {
          
   
    play() {
          
   
      //使用
      let singlePlayer = videojs("singleVideo", {
          
   
        autoplay: false,//自动播放
        controls: true,//控件显示
        poster: /tmp/xiao.png, // 封面
        width: "300",//视频框宽度
        height: "200",//视频框高度
        preload: auto, // 自动加载资源
      });
      let res ="/tmp/v/play.m3u8";
      if (res) {
          
   
        singlePlayer.src({
          
    src: res, type: "application/x-mpegURL" });
        // singlePlayer.play();
      }
    },
  },
  created() {
          
   
    //延迟1秒后执行，否则报错undefined
    setTimeout(()=>{
          
   
      this.play()
    },1000)
  }
}
</script>

<style scoped>

</style>