尽管支持范围请求，但视频无法在 Safari 中播放

Question

我有一个支持 206 范围请求的流媒体服务器，并在 firefox、edge 和 chrome 上成功播放和搜索视频。但是，当我尝试在 Safari 上播放同一视频时——它不起作用，而且视频似乎甚至无法加载。任何帮助将不胜感激...

（我正在使用 react——因此使用 jsx 语法）

服务器端代码：

try {
    const { range, videoID } = req.requestData;
    const videoPath = "media/" + videoID + ".mp4";
    let videoSize;
    try {
      videoSize = fs.statSync(videoPath).size;
    } catch (err) {
      console.log("Error during video size scan...");
      res.status(500).end();
    }
    // Example: "bytes=32324-"
    const CHUNK_SIZE = 10 ** 6; // 1MB
    const start = Number(range.replace(/\D/g, ""));
    const end = Math.min(start + CHUNK_SIZE, videoSize - 1); // gets the end of the range, start + 1mb or end of video
    const contentLength = end - start + 1;
    
    const headers = {
      "Content-Range": `bytes ${start}-${end}/${videoSize}`,
      "Accept-Ranges": "bytes",
      "Content-Length": contentLength,
      "Content-Type": "video/mp4",
    };
    // HTTP Status 206 for Partial Content
    res.writeHead(206, headers);
    try {
      // create video read stream for this particular chunk
      const videoStream = fs.createReadStream(videoPath, { start, end });

      // Stream the video chunk to the client
      videoStream.pipe(res);
    } catch (err) {
      res.status(500).end();
    }
  } catch (err) {
    res.status(500).end();
    return;
  }

客户端代码：

        <video controls autoPlay preload="auto" className="w-full h-full">
          <source src={url} type="video/mp4" />
        </video>

Answer 1

因此，我修改了我的代码，添加了与此示例中显示的代码相比缺少的任何内容：https://github.com/bootstrapping-microservices/video-streaming-example。现在可以无缝运行了！

尽管支持范围请求，但视频无法在 Safari 中播放

Video not playing in safari despite range request support

html

javascript

safari

video-streaming

express