A Metro-style video gallery with Ajax, infinite scroll and other fun stuff. Now rewritten in Node.js.
There's a load of bumf about the original PHP version here (mostly relevant) and some supplementary info about this version here.
[https://bits.meloncholy.com/node-video-gallery/](Demo site)
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 it works fine.
You'll need to set up a MySQL database first (see sample content below). 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 likehttps://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": "https://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": "https://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"
}
To get it to work, you'll also need
If you want to get going quickly, you can use the sample videos, photos and database from the PHP Video Gallery (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"
}
Copyright © 2012 Andrew Weeks https://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).
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!
I have a website and a Twitter. Please come and say hi if you'd like or if something's not working; be lovely to hear from you.