html5-video - 如何通过传递请求标头分块播放视频

Question

这是我的代码：

var audioEl= <HTMLVideoElement>document.getElementById('mediaplayer');

如果我直接将 src 附加到这个 audioEle.g。audioEl.src =<video_or_mp3_url> 然后它使用范围标头检索大块媒体内容......我的服务器将拥有范围并将媒体数据发送到块但我不能直接将 media_content_url 分配给这个 src 因为我必须通过一些身份验证这就是为什么我使用 fetch API 只是发送请求标头的原因，但是即使我在标头中指定，此 fetch API 也不处理范围标头，服务器将响应 partial_content 206 响应代码。如何使用 fetch API 实现这个用例（以块的形式获取 mp3 或 mp4）？

   **HTML Code**
    <video controls id="mediaplayer">
     

**Javascript Code :**
var audioEl= <HTMLVideoElement>document.getElementById('mediaplayer');
playVideo(){
var requestObj = new Request('<video_or_mp3_url>', {
      method: 'GET',
      headers: {
        <some_auth headers>
        'Content-Type': 'multipart/byteranges',
        **range:'bytes=0-'**
      },
      referrerPolicy: 'no-referrer'
    });
getVideoDetails(requestObj);
}

getVideoDetails(requestObj){
 fetch(requestObj, { cache: "no-store" }).then(function (response) {
      return response;
    }).then(async function (outcome) {
     
      const blob = await outcome.blob();
    
      const url = window.URL.createObjectURL(blob);
      
      audioEl.src = url;     
      audioEl.currentTime = 5;//time offset
      audioEl.play();
    });
}