[英]Video not playing in safari despite range request support
I have a streaming server that supports 206 range requests and successfully plays and seeks video on firefox, edge, and chrome.我有一个支持 206 范围请求的流媒体服务器,并在 firefox、edge 和 chrome 上成功播放和寻找视频。 However, when I try to play the same video on Safari--it doesn't work and the video doesn't seem to even load.但是,当我尝试在 Safari 上播放同一视频时——它不起作用,而且视频似乎甚至无法加载。 Any help would be appreciated...任何帮助,将不胜感激...
(I'm using react--thus the jsx syntax) (我正在使用 react——因此是 jsx 语法)
Serverside Code:服务器端代码:
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;
}
Client-Side code:客户端代码:
<video controls autoPlay preload="auto" className="w-full h-full">
<source src={url} type="video/mp4" />
</video>
So, I modified my code by adding what whatever was missing as compared to the code shown in this example: https://github.com/bootstrapping-microservices/video-streaming-example .因此,我通过添加与此示例中显示的代码相比缺少的内容来修改我的代码: https://github.com/bootstrapping-microservices/video-streaming-example 。 And it works seamlessly now!现在它可以无缝运行!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.