Chrome 浏览器中的视频标记在将进度条查找到随机位置时请求不正确的范围。 Firefox 运行完美

Question

我有 FASTAPI 服务器，可以服务器部分内容，响应状态 206。

@video_router.get("/video/file/{folder}/{name}")
async def video_endpoint(folder: str, name: str, range: str = Header(None)):
    CHUNK_SIZE = 2048*2048
    video_path = Path(f"./media/{folder}/{name}")
    video_size = video_path.stat().st_size
    start, end = range.replace("bytes=", "").split("-")
    start = int(start)
    if start + CHUNK_SIZE > video_size:
        end = video_size
    else:
        end = start + CHUNK_SIZE

    with open(video_path, "rb") as video:
        video.seek(start)
        data = video.read(end - start)
        headers = {
            'Content-Range': f'bytes {start}-{end}/{video_size}',
            'Accept-Ranges': 'bytes'
        }
        return Response(data, status_code=206, headers=headers, media_type="video/mp4")

我从 React 前端请求此 URL 来提供部分内容。

<video
          controlsList="nodownload"
          key="abc"
          width="100%"
          height="100%"
          poster={poster_url}
          controls
          src={video_url}
          type="video/mp4"
          preload="metadata"
        />

这在 Firefox 浏览器中工作得很好，但在 Google Chrome 中，当我向后或向前寻找任何位置的进度条时。视频播放器挂起/卡住。播放“暂停/播放”按钮后，视频从头开始播放，即字节=0-。

在调试标头中传递的范围参数时，我注意到 Chrome 浏览器请求错误的字节，即 bytes=INCORRECT_NUMBER-。此外，INCORRECT_NUMBER 对于进度条中的任何位置都是相同的。请检查下面的图片。

执行此操作后，您可以看到视频标签不再向 FASTAPI 服务器请求任何数据。

我尝试更改标题、其他反应视频播放器和 iframe 标签。

我希望通过提供部分内容的 fastapi 服务器流式传输视频。非常感谢视频标签替代方案或解决方法的建议。

Answer 1

视频大小 - 1 结束 - 开始 + 1

需要进行以上修改。