尽管范围请求支持，但视频未在狩猎中播放

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.现在它可以无缝工作了！