How can i play the video on web browser when i connected web server?

Question

I made web server using node.js on Ubuntu.

I want to show video When player connected with web server.

index.html

<html>
 <body>
  <video width='400' controls>
   <source src='b.mp4' type='video.mp4'>
  </video>
 </body>
</html>

webserver.js

 var app = require('http').createServer(handler)
        , fs=require('fs');

    app.listen(1233);

    function handler(req, res){
     rs.readFile(__dirname + '/index.html',
     function(err,data){
      if(err){
       res.writeHead(500);
       return res.end('Error loading index.html');
      }
    res.writeHead(200);
    res.end(data);

    }); }

When I running web server and connected web server, the video didn't play on web browser. I can see only black box and video control bar.

But, when I open the html file on Ubuntu(not running server), the video playing well.

How can i play the video on web browser when i connected web server?

Thank you :)

score 0 · Answer 1 · answered Sep 06 '15 at 09:07

When the browser requests /b.mp4 your JavaScript server fetches index.html and sends it to the browser.

You need to pay attention to the URL being requested (which is available through the req object) and serve the appropriate content for it (with the appropriate content-type response header).

score 0 · Answer 2 · answered Sep 17 '15 at 05:04

I have started plying with Node.JS very recently. I would like to address your second last line

"How can i play the video on web browser when i connected web server?"

So far I have found two ways to render video/audio on the client's browser using nodejs server. I am going to share code for both ways.

The one way is loading an HTML page on client's browser (index.html where video is already embedded using tag) with video player ready to be played. And second way is sending the video directly as a response from server to your web browser. The latter method may or may not need HTML, depends on how you really want to achieve this.

Instead of using small port number like 1233, I would like to do justice with networking and let's say we want to use 8383 port number.

Method 1: Render an HTML page with video player already embedded to it. I am considering that your webserver.js and index.html files reside in same directory. Here is something which will satisfy your requirement -

var express = require('express');
var app = express();

app.use(express.static(__dirname + '/'));

var ipAddress = process.env.OPENSHIFT_NODEJS_IP;
var port = process.env.OPENSHIFT_NODEJS_PORT || 8383;

app.listen(port, ipAddress);

Run your webserver.js and type http://localhost:8383/index.html on your browser !

Method 2 - If you want to achieve it using require('http") then use following code -

var http = require('http');
fileSystem = require('fs'),
path = require('path');
util = require('util');

http.createServer(function (req, response) {
    var filePath = path.join('./', 'b.mp4');
    var stat = fileSystem.statSync(filePath);

    response.writeHead(200, {
        "Content-Type": "video/mpeg",
        "content-size": stat.size
    });

    var readStream = fileSystem.createReadStream(filePath);

    readStream.on('data', function (data) {
        var flushed = response.write(data);
        // Pause the read stream when the write stream gets saturated
        if (!flushed)
            readStream.pause();
    });

    response.on('drain', function () {
        // Resume the read stream when the write stream gets hungry 
        readStream.resume();
    });

    readStream.on('end', function () {
        response.end();
    });

}).listen(8383);

After running your webserver.js, type http://localhost:8383/.

How can i play the video on web browser when i connected web server?

2 Answers2