There’s a load of bumf about the original PHP version here (mostly relevant) and some supplementary info about this version here, though probably the best thing to do is to try the demo site. Yay!

Source on GitHub

Nota bene

The front end code is (almost) identical to that in the PHP version. It could do with updating a bit, e.g. to use the HTML5 history API rather than #! and moving the jQuery events over to on. But other than that I think it works fine.

I redid an existing project so I could focus on how Node, and not the app itself, works. It was definitely a learning process for me, and I’m sure I could have done things better (and would probably do some bits better if I were starting again now). So if you have any feedback on how I could improve things, I’d love to hear.

With those health warnings out of the way…

Settings

You’ll need to set up a MySQL database first (see sample content). Then there are some configuration things to do

/config/app.json (Please rename app-sample.json.)

• localPort – Local port to use
• sessionSecret – Session secret for Express
• siteUrl – Public URL for your site
• mode – development or production. development gives more error messages, while production uses minimized, combined public JS files that load a lot faster.
• batchSize – Number of videos to load at once in infinite scroll.
• videoCount – Approximate number of videos in the database. Just used for bragging rights in a few places.
• cookiePath – Cookie path to use. Unless you want to restrict it to a subfolder, I’d suggest using /.
• siteTitle – Name of the site. Used in browser title bar and elsewhere.
• siteTitlePost – Text to stick in the title bar after the video name (where appropriate).
• siteDescription – Meta description content.
• maxRelatedVideos – If we haven’t come via a search (via a link or refresh), show this many related videos at the side of a video.
• maxSimilarVideos – Show this many similar videos at the bottom of a video. See video.js for more. This number should obviously work for the largest video size offered.
• prettyLink – Prepend this to each video’s URL for SEO, so if this were amazing-stunts, the URLs would be something like http://example.com/#!amazing-stunts/name-of-this-video.
• jQueryCdnUrl – In production mode, load jQuery from here.
• gaAccount – Your Google Analytics UA number.
• gaDomain – Your Analytis domain.

Example

{
	"localPort": 3000,
	"sessionSecret": "session secret",
	"siteUrl": "http://bits.meloncholy.com/node-video-gallery/",
	"mode": "development",
	"batchSize": 20,
	"videoCount": 300,
	"cookiePath": "/",
	"siteTitle": "Video Gallery",
	"siteTitlePost": " | Video Gallery",
	"siteDescription": "This Video Gallery is a web app with lots of jQuery and Node goodness. Yum.",
	"maxRelatedVideos": 19,
	"maxSimilarVideos": 7,
	"prettyLink": "video",
	"jQueryCdnUrl": "http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js",
	"gaAccount": "UA-XXXXXXXX-X",
	"gaDomain": "meloncholy.com"
}

/config/database.json

• host – Database host
• database – Database name
• user – Database user
• password – Database password

Example

{
	"host": "localhost",
	"database": "database",
	"user": "user",
	"password": "password"
}

Dependencies

To get it to work, you’ll also need

• Express
• Jade
• Konphyg
• VidStreamer.js

Sample content

If you want to get going quickly, you can use the sample videos, photos and database from the PHP Video Gallery on GitHub (placeholder and database folders resp.).

And try something like this for vidStreamer.json (in /node_modules/vid-streamer/config) to get it to serve up the sample content.

{
	"mode": "development",
	"forceDownload": false,
	"random": true,
	"rootFolder": "/path/to/express/public/",
	"rootPath": "node-video-gallery/",
	"server": "VidStreamer.js/0.1"
}

Thanks

The download includes Longtail Video’s JW Player, released under Attribution-NonCommercial-ShareAlike 3.0 Unported (CC BY-NC-SA 3.0) licence. Commercial licences are also available. You’re of course welcome to swap the player for another one if you don’t like it, though you’ll need to change some of the source files that set up parameters to pass to the player.

The sample video footage comprises some short video clips and still images of these video clips by Catrin Hedström and released under a Attribution-NonCommercial-ShareAlike 3.0 Unported (CC BY-NC-SA 3.0) licence. It’s gorgeous footage too – do check it out!

Source on GitHub

Legal fun

Copyright © 2012 Andrew Weeks http://meloncholy.com

Video Gallery is licensed under the MIT licence.

Includes some code written by others; see source for credits and licence details (though it’s all permissive).

As using a LAMP stack to support a Node app seemed wrong, I wrote a simple JavaScript video streamer. Most of the requirements came from looking at how xmoovStream Server works.

• Supports http pseudostreaming
• Streams Flash video and can resume streams
• Streams other video and file formats and can resume these streams too
• Works with JW Player’s bitrate switching

Source on GitHub

Using VidStreamer

To make a standalone video streamer, try something like this

var http = require("http");
var vidStreamer = require("vid-streamer");
var app = http.createServer(vidStreamer);
app.listen(3000);
console.log("VidStreamer.js up and running on port 3000");

And here’s an example of including it in an Express app

var app = require("express").createServer();
var vidStreamer = require("vid-streamer");
app.get("/videos/", vidStreamer);
app.listen(3000);

Settings

There are a few things to twiddle in /config/vidStreamer.json. (Please rename vidStreamer-sample.json.)

• mode – Not actually used right now. :)
• forceDownload – Tell the browser to show a save file dialog.
• random – Show a random file instead of the one named (see below).
• rootFolder – The root folder from which files are returned. Accessing subfolders is possible by putting them in the path.
• rootPath – The path assumed to match up with the root folder.
• server – Server string returned in the header.

Standalone example

{
	"mode": "development",
	"forceDownload": false,
	"random": false,
	"rootFolder": "/path/to/videos/",
	"rootPath": "videos/",
	"server": "VidStreamer.js/0.1"
}

Example for Express. (Note that rootPath should be relative to the root URL of your Express app.)

{
	"mode": "development",
	"forceDownload": false,
	"random": false,
	"rootFolder": "/path/to/express/public/",
	"rootPath": "",
	"server": "VidStreamer.js/0.1"
}

Serving random files

You can use VidStreamer to serve up random files instead of the actual file requested. This can be useful if you’re demoing an app that’s supposed to have hundreds of videos but you don’t want to go to the trouble of making them all.

• Which file to return is calculated from the requested file name, so the same one will be returned each time for the same name. This is useful if you want to switch between video bitrates for example.
• The file returned will be of the same type (same extension) as the requested file.
• The file returned will be from the same folder as the requested file.

Thanks

I hadn’t really thought about how to write video streamer before, so Devendra Tewari’s post and of course the xmoovStream Server source were very useful to me.

Source on GitHub

Legal fun

Copyright © 2012 Andrew Weeks http://meloncholy.com

VidStreamer.js is licensed under the MIT licence.

HRODC postgraduate training courses

ACCEPT JESUS, FOREVER FORGIVEN!

While both are, of course, fine examples of important web design maxims, surely their impact would be much greater if they could be finessed into one great web page? After all, who could resist combining the eloquent brevity of a 1.2MB page full of tables with the understated finesse of animated rainbow gifs and autoplaying music?

Turns out I couldn’t. And, having just rediscovered the result, I thought I’d stick it up here.

Aaarg!

To enjoy the full experience, including the music and a bird that follows your cursor around, please view in an old version of IE.

Download source

I recently uploaded a Video Gallery web app I’d made (demo, code download). Unfortunately I don’t have the real videos and pictures that it was supposed to use, so I thought I’d cut some clips from the silent-but-gorgeous They Call Us Animals music video footage. But the Video Gallery has about 300 different videos in the database, and I really didn’t want to make 900 sample clips (each one in 720p, 480p and 360p). So I made about 10, which seems enough to give a little variety.

But I couldn’t just serve up any video. Using the HTTP pseudostreaming support in JW Player, the site lets users change video sizes while they’re watching, and the player will switch to a different resolution source file if one is available to improve the viewing experience. It looks good, but the effect was rather spoiled when the video selector returned a higher resolution version of a completely different clip.

So I wrote a little PHP script that would serve up an apparently random sample video consistently.

Using the code

First set $folder to point at the folder where the files you want to serve are located. It’s currently set up to use the folder where the file is uploaded.

The file selector will serve up jpegs, pngs and flv files from the box. If you want to allow others, add their file extensions and MIME types to the $ext_list array. There are examples for CSS, PDF and HTML files in the source. (On a side note, please don’t add PHP to the list and use $folder = '.' unless you don’t mind it returning itself sometimes.)

To get a random-but-consistent file, link to it as any other file

<a href="http://example.com/rotate.php?file=kittens.flv">link</a>

<img src="http://example.com/rotate.php?file=kittens.jpg" />

The file returned will be of that same type (flv or jpg above). It will not be kittens.flv, but you will get the same one every time you ask for kittens.flv.

The code

After performing a few checks on the file type and allowed extensions, I used crc32 to convert the supplied filename into an integer and ran it through the modulus operator to get a number in the range of the file count in the current folder. Then it reads the chosen file and we’re done. And that’s it.

$ext_list = array();
$ext_list['gif'] = 'image/gif';
$ext_list['jpg'] = 'image/jpeg';
$ext_list['jpeg'] = 'image/jpeg';
$ext_list['png'] = 'image/png';
$ext_list['flv'] = 'video/x-flv';
$file = null;
$vid = null;
$vids = null;
$content_type = null;
if (!isset($_GET['file'])) return;
$file = pathinfo($_GET['file']);
// Just in case there's other stuff in the folder too (like this file)
if (!array_key_exists($file['extension'], $ext_list)) return;
if (substr($folder, -1) != '/') $folder .= '/';
// Select a file based on the given extension.
$vids = glob($folder . '*.' . $file['extension']);
$vid = $vids[abs(crc32($file['basename'])) % count($vids)];
$content_type = 'Content-type: ' . $ext_list[$file['extension']];
header ($content_type);
readfile($vid);

Fun with .htaccess

Supplying random-but-consistent videos like this changes their path, as it’s now necessary to include (at least) consistent-random.php?file=. Not ideal, but a few lines added to .htaccess can point the original paths at the new placeholder files.

RewriteBase /video-gallery/
RewriteRule ^images/thumb/([-_a-zA-Z0-9\.]+)$ placeholder/images/thumb/consistent-random.php?file=$1 [L]
RewriteRule ^images/full/([-_a-zA-Z0-9\.]+)$ placeholder/images/full/consistent-random.php?file=$1 [L]
RewriteRule ^videos/([-_a-zA-Z0-9\.]+.flv)$ placeholder/videos/consistent-random.php?file=$1 [L]

And we’re done! The Video Gallery now thinks it’s supplying the videos and images as originally intended, not the placeholder ones it’s actually showing.

Download source