关于mediasource生成blob地址实现流视频播放

1.首先需要准备特殊格式的视频，这里需要用到Bento4工具来生成视频，下载解压即可，然后配置环境变量指向文件夹里面的bin文件夹即可，然后运行cmd，输入命令

mp4fragment 普通视屏.mp4  新视频.mp4  //带入相应参数名即可生成
mp4split 新视频.mp4  --video  --media-segment video-%llu.mp4 --pattern-parameters N  //生成视频文件
mp4split 新视频.mp4  --audio  --media-segment video-%llu.mp4 --pattern-parameters N  //生成音频文件

2.h5实现播放

　　const video = document.querySelector('video');
    //视频资源存放路径，假设下面有5个分段视频 video1.mp4 ~ video5.mp4，第一个段为初始化视频init.mp4
    const assetURL ='http://127.0.0.1:5500/testvideo/'
    //视频格式和编码信息，主要为判断浏览器是否支持视频格式，但如果信息和视频不符可能会报错
    const mimeCodec = 'video/mp4; codecs="avc1.42E01E"';
    if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
      const mediaSource = new MediaSource();
      video.src = URL.createObjectURL(mediaSource); //将video与MediaSource绑定，此处生成一个Blob URL
      mediaSource.addEventListener('sourceopen', sourceOpen); //可以理解为容器打开
    } else {
      //浏览器不支持该视频格式
      console.error('Unsupported MIME type or codec: ', mimeCodec);
    }

    function sourceOpen() {
      const mediaSource = this;
      const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
      let i = 1;
      function getNextVideo(url) {
        //ajax代码实现翻看上文，数据请求类型为arraybuffer
        ajax(url, function (buf) {
          //往容器中添加请求到的数据，不会影响当下的视频播放。
          sourceBuffer.appendBuffer(buf);
        });
      }
      //每次appendBuffer数据更新完之后就会触发
      sourceBuffer.addEventListener("updateend", function () {
        if (i === 1) {
          //第一个初始化视频加载完就开始播放
          video.play();
        }
        if (i < 24) {
          //一段视频加载完成后，请求下一段视频
          getNextVideo(`${assetURL}/video-${i}.mp4`);
        }
        if (i === 24) {
          //全部视频片段加载完关闭容器
          mediaSource.endOfStream();
          URL.revokeObjectURL(video.src); //Blob URL已经使用并加载，不需要再次使用的话可以释放掉。
        }
        i++;
      });
      //加载初始视频
      getNextVideo(`${assetURL}init.mp4`);
    };


    function ajax(url, cb) {
      const xhr = new XMLHttpRequest();
      xhr.open("get", url);
      xhr.responseType = "arraybuffer"; // "text"-字符串 "blob"-Blob对象 "arraybuffer"-ArrayBuffer对象
      xhr.onload = function () {
        cb(xhr.response);
      };
      xhr.send();
    }
//这只是最简单的实现方式，可以添加拖动播放功能