Tl;博士 - 问题:
使用 Node.js 将视频文件流式传输到 html5 视频播放器以使视频控件继续工作的正确方法是什么？
我认为这与处理标题的方式有关。无论如何，这是背景信息。代码有点长，但是非常简单。
使用 Node 将小视频文件流式传输到 HTML5 视频很容易
I learned how to stream small video files to an HTML5 video player very easily.使用此设置，控件无需我进行任何操作即可工作，并且视频流完美无缺。带有示例视频的完整工作代码的工作副本是 here, for download on Google Docs .
客户:
<html>
<title>Welcome</title>
<body>
<video controls>
<source src="movie.mp4" type="video/mp4"/>
<source src="movie.webm" type="video/webm"/>
<source src="movie.ogg" type="video/ogg"/>
<!-- fallback -->
Your browser does not support the <code>video</code> element.
</video>
</body>
</html>
服务器:
// Declare Vars & Read Files
var fs = require('fs'),
http = require('http'),
url = require('url'),
path = require('path');
var movie_webm, movie_mp4, movie_ogg;
// ... [snip] ... (Read index page)
fs.readFile(path.resolve(__dirname,"movie.mp4"), function (err, data) {
if (err) {
throw err;
}
movie_mp4 = data;
});
// ... [snip] ... (Read two other formats for the video)
// Serve & Stream Video
http.createServer(function (req, res) {
// ... [snip] ... (Serve client files)
var total;
if (reqResource == "/movie.mp4") {
total = movie_mp4.length;
}
// ... [snip] ... handle two other formats for the video
var range = req.headers.range;
var positions = range.replace(/bytes=/, "").split("-");
var start = parseInt(positions[0], 10);
var end = positions[1] ? parseInt(positions[1], 10) : total - 1;
var chunksize = (end - start) + 1;
if (reqResource == "/movie.mp4") {
res.writeHead(206, {
"Content-Range": "bytes " + start + "-" + end + "/" + total,
"Accept-Ranges": "bytes",
"Content-Length": chunksize,
"Content-Type": "video/mp4"
});
res.end(movie_mp4.slice(start, end + 1), "binary");
}
// ... [snip] ... handle two other formats for the video
}).listen(8888);
但此方法仅限于小于 1GB 的文件。
使用 fs.createReadStream
流式传输(任何大小)视频文件
通过利用 fs.createReadStream()，服务器可以读取流中的文件，而不是一次将其全部读入内存。这听起来像是做事的正确方式，而且语法非常简单:
服务器片段:
movieStream = fs.createReadStream(pathToFile);
movieStream.on('open', function () {
res.writeHead(206, {
"Content-Range": "bytes " + start + "-" + end + "/" + total,
"Accept-Ranges": "bytes",
"Content-Length": chunksize,
"Content-Type": "video/mp4"
});
// This just pipes the read stream to the response object (which goes
//to the client)
movieStream.pipe(res);
});
movieStream.on('error', function (err) {
res.end(err);
});
这可以很好地流式传输视频!但是视频控件不再起作用。
最佳答案
Accept Ranges header (writeHead() 中的位)是 HTML5 视频控件工作所必需的。
我认为与其盲目发送完整文件，不如先检查 REQUEST 中的 Accept Ranges header ，然后读入并仅发送该位。 fs.createReadStream 支持 start 和 end 选项。
所以我尝试了一个示例并且它有效。代码不是很漂亮，但很容易理解。首先，我们处理范围 header 以获取开始/结束位置。然后我们使用 fs.stat 来获取文件的大小，而无需将整个文件读入内存。最后，使用 fs.createReadStream 将请求的部分发送给客户端。
var fs = require("fs"),
http = require("http"),
url = require("url"),
path = require("path");
http.createServer(function (req, res) {
if (req.url != "/movie.mp4") {
res.writeHead(200, { "Content-Type": "text/html" });
res.end('<video src="http://localhost:8888/movie.mp4" controls></video>');
} else {
var file = path.resolve(__dirname,"movie.mp4");
fs.stat(file, function(err, stats) {
if (err) {
if (err.code === 'ENOENT') {
// 404 Error if file not found
return res.sendStatus(404);
}
res.end(err);
}
var range = req.headers.range;
if (!range) {
// 416 Wrong range
return res.sendStatus(416);
}
var positions = range.replace(/bytes=/, "").split("-");
var start = parseInt(positions[0], 10);
var total = stats.size;
var end = positions[1] ? parseInt(positions[1], 10) : total - 1;
var chunksize = (end - start) + 1;
res.writeHead(206, {
"Content-Range": "bytes " + start + "-" + end + "/" + total,
"Accept-Ranges": "bytes",
"Content-Length": chunksize,
"Content-Type": "video/mp4"
});
var stream = fs.createReadStream(file, { start: start, end: end })
.on("open", function() {
stream.pipe(res);
}).on("error", function(err) {
res.end(err);
});
});
}
}).listen(8888);
关于javascript - 使用 Node.js 将视频文件流式传输到 html5 视频播放器，以便视频控件继续工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24976123/