關於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();
    }
//這只是最簡單的實現方式，可以添加拖動播放功能