Question

我想一个接一个地流两个或三个视频（从数组中提取名称，然后从文件系统中加载它们就足够了），并且没有任何迹象表明前一个已经完成，然后再显示一个如下。我找到了这些用于单视频流的示例

https://medium.com/@daspinola/video-stream-with-node-js-and-html5-320b3191a6b6

Streaming a video file to an html5 video player with Node.js so that the video controls continue to work?

我做了一点改动：

var fs = require("fs"),
    http = require("http"),
    url = require("url"),
    numCallB = 0,
//  express = require('express'),
    path = require("path");
var fileIndex = 0;
var videos = ["./movie1.mp4", "./movie2.mp4", "./movie3.mp4"];
// movie1: https://github.com/daspinola/video-stream-sample/blob/master/assets/sample.mp4
// movie2: https://www.pond5.com/stock-footage/44586289/two-animated-automatic-data-processing-machines-conversing-e.html
// movie3: https://videos.pond5.com/automatic-data-processing-machines-footage-044587329_main_xl.mp4

http.createServer(function (req, res) {
    console.log('numCallB: ' + numCallB++)
    console.log('req.url: ' + req.url)

//  var fileName = path.resolve(__dirname, "movie.mp4");
    var fileName = videos[fileIndex % 3];
    console.log('fileName: ' + fileName)
    fs.stat(fileName, function(err, stats) {
        if (err) {
            if (err.code === 'ENOENT') { // 404 Error if file not found
                console.log('404 ENOENT')
                return res.sendStatus(404);
            }
            res.end(err);
        }
        var range = req.headers.range;
        console.log('range: ' + range)
        if (!range) { // 416 Wrong range
            console.log('416 Wrong range')
            return res.sendStatus(416);
        }
        var positions = range.replace(/bytes=/, "").split("-");
        var start = parseInt(positions[0], 10);
        var total = stats.size;
        console.log('total: ' + total)
        var end = positions[1] ? parseInt(positions[1], 10) : total - 1;
        console.log('end: ' + end)
//      var chunksize = 1000000;
        var chunksize = (end - start) + 1;
        console.log('chunksize: ' + chunksize)

        res.writeHead(206, {
            "Content-Range": "bytes " + start + "-" + end + "/" + total,
            "Accept-Ranges": "bytes",
            "Content-Length": chunksize,
            "Content-Type": "video/mp4"
        });

        var stream = fs.createReadStream(fileName, { start: start, end: end })
            .on("open", function() {
                console.log('stream open')
                stream.pipe(res);
            }).on("error", function(err) {
                console.log('stream error')
                res.end(err);
                console.log('fine error')
            }).on('end', function () {
                console.log('stream end');
            }).on('close', function () {
                console.log('stream close');
            })
    });
    console.log('=====================');
}).listen(8888);

您可以从此html页面开始

<html>
    <title>Welcome</title>
    <body>
        <video controls>
            <source src="http://localhost:8888/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>

但是我无法流式传输和显示电影2和3。在哪里可以找到更合适的示例，或者如何修改此示例？

如何制作连续的视频流？

0 个答案: