[nodejs] playing an MP4 video in node.js express

7,049 views
Skip to first unread message

Ghislain Quenum

unread,
May 10, 2014, 7:57:02 AM5/10/14
to nod...@googlegroups.com
I am developing an app where I'd like to show a video. The app is being developed with node.js and express 4. So I grabbed the videos module and added the html5 video tag in the view as follows:

<video id="vidid" class="video-js vjs-default-skin" controls autoplay="none" preload="auto" width="600" height="400">
    <source src="path/to/video" type="video/mp4">
</video>


Note that for the path of the video, I declared the public folder as where all static assets should be served from. Then I created a videos folder under public and put the file in there. I also made sure I called the play function on the video in my script. Although the UI displays fine, the video does not load at all. I can't figure out why. Does anyone have any idea? Btw, I am testing it on Safari 7.0.3 Thanks in advance

José

Jake Wolpert

unread,
May 10, 2014, 12:46:38 PM5/10/14
to nod...@googlegroups.com
Are you streaming the video? Do you see errors in the error console?

The key to videos is to respect the request.headers.range.

as in 
function send(err,data){
if (err)
return send404(fileName)
cache.put(fileName,data,600000) // 10 minutes
var range = request.headers.range // bytes=0-1
if (!range){
response.writeHead(200, {
"Content-Type": mimeType,
"X-UA-Compatible": "IE=edge;chrome=1",
'Content-Length': data.length
});
response.end(data)
}else{
var total = data.length,
split = range.split(/[-=]/),
ini = +split[1],
end = split[2]?+split[2]:total-1,
chunkSize = end - ini + 1
response.writeHead(206, { 
"Content-Range": "bytes " + ini + "-" + end + "/" + total, 
"Accept-Ranges": "bytes",
"Content-Length": chunkSize,
"Content-Type": mimeType
})
response.end(data.slice(ini, chunkSize+ini))
}
}

--
Job board: http://jobs.nodejs.org/
New group rules: https://gist.github.com/othiym23/9886289#file-moderation-policy-md
Old group rules: https://github.com/joyent/node/wiki/Mailing-List-Posting-Guidelines
---
You received this message because you are subscribed to the Google Groups "nodejs" group.
To unsubscribe from this group and stop receiving emails from it, send an email to nodejs+un...@googlegroups.com.
To post to this group, send email to nod...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/nodejs/CAGXCHEmFmJS_-WoEHjFuJo-%2BjHY94WP5vgJ4197ekrc7wU%2B0DQ%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.

"José G. Quenum"

unread,
May 10, 2014, 4:02:13 PM5/10/14
to nod...@googlegroups.com, nod...@googlegroups.com
No I'm not streaming the video. I just declared the path in the video tag. Should I stream it? Could I get some examples?
Btw, the view displaying the video contains other web components. How should I couple it with the streaming. 
Thanks

--- José 

Jake Wolpert

unread,
May 10, 2014, 11:33:42 PM5/10/14
to nod...@googlegroups.com
I thought I could get away without streaming at first. Some browsers only like streaming, so I read up on it, started streaming and it works in every browser I tested (ff,chrome,safari,IE10+, IOS safari)

The code I shared is what I use on my site.

What do you mean by "other web components"? HTML markup? Is this a web page?

Jake

Pipe Gutierrez

unread,
May 11, 2014, 6:08:04 PM5/11/14
to nod...@googlegroups.com
I'm posting here the simplest example I could manage (sans html doctypes), Just to show that you don't need any special code to stream your video. The browser and HTTP server handle these things automatically.


server.js:
var express = require('express'),
  app = express();

app.use(express.static("./app"));

app.get("/", function(req, res, next) {
  res.sendfile("index.html")
});

app.listen(8080);
console.log("Server started in http://localhost:" + 8080);

index.html:
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
  <video controls="true" src="<videoinAppFolder.mp4>"></video>
</body>
</html>

RE:
Note that for the path of the video, I declared the public folder as where all static assets should be served from. Then I created a videos folder under public and put the file in there. I also made sure I called the play function on the video in my script.
 
I suggest you try with the simplest example first and build from there. In my example I'm assuming you place the video file in the root of your static directory.

Tips for debugging:
  • Check the network tab in the devtools (if an error occurs here, your video is not being served correctly)
  • If no network error is present check the codec your video was encoded with. I recommend downloading and testing with big buck bunny
  • Not all browsers support mp4, firefox for example.

Ps: I have a project that encodes and streams any video supported by handbrake here: https://github.com/Dudemullet/playertwo

Denys Khanzhyiev

unread,
May 11, 2014, 6:19:38 PM5/11/14
to nodejs
Express should serve video files just fine with static middleware and with support of ranges.
It looks like your problem is on client side.


"José G. Quenum"

unread,
May 12, 2014, 1:44:49 PM5/12/14
to nod...@googlegroups.com, nod...@googlegroups.com
Hi all,
Let me try these suggestions quickly and get back to you guys. 
Thanks a bunch

--- José 

José G Quenum

unread,
May 25, 2014, 3:27:41 PM5/25/14
to nod...@googlegroups.com
It works finally. Thanks to everyone who tried to help out. 
Regards
Jose

Sent from my iPad
Reply all
Reply to author
Forward
0 new messages