Embedding mp4 videos in a Virtual Learning Environment

I recently finished a fairly long project to make a DVD collection more readily available to members of a university library. The DVDs are expensive academic ones, and the library is not that keen on lending them out. Also, this would restrict usage to one person at a time, which means if they’re assigned viewing for a seminar or assignment, life becomes very difficult. This being the case, the library got permission to make the DVDs available on the university network. However, for copyright reasons and to minimise the risk of piracy, access has to be restricted to only current members of the university, which means controlling access pretty heavily; they can’t just be made available over the internet.

The small faculty library have limited influence over the university computing services, which meant that bespoke viewing solutions were not really an option. For example, they couldn’t have a special password-protected page set up that would control access through user identification. For copyright purposes, something like this with by-user watermarking would be a nice solution; but technically difficult and probably expensive, even once the basic page was set up.

The chosen solution was to make use of an existing user-restriction system: the university Virtual Learning Envirnoment (VLE). The university IT service agreed to set things up, but for various reasons were eventually forced to drop the project. Obviously (as I’m posting this) it fell to me to handle it. I thought it might be useful to post a description in case any other poor sap has to do a similar project in the future.

A complication that arose fairly early was that the VLE would not (at least at that time) allow media files to be played directly. As a result, I had to set up embedded players within the VLE to play each set of files.

There were several basic stages to the project:

• Transcribe the content descriptions of each DVD for use on the VLE. Thse came as text pages on the DVD, (not files; still text images!) which would have been somewhat nightmarish to transcribe. Fortunately the library had paper handbooks that had accompanied the original VHS versions of the DVDs.
• Rip the DVD to .mp4.
• Create XML playlists for each DVD.
• Create webpages for each DVD with an embedded player.
• Create static webpages for the transcriptions of each DVD, and an overall DVD listing page linking to the individual embedded-player pages.

Some were trickier than others, but I’ll run through them all quickly.

Transcription

The paper handbooks were invaluable here. I simply scanned the pages and OCRed them to get the basic text. Naturally there were plenty of OCR errors to correct, some of which I picked up at the time and others much later.

Ripping

For ripping the DVDs I used Handbrake (http://handbrake.fr/). This is a very useful bit of kit, fully open-source and GPL for those worried about it, and usable on Windows, OS X and Linux.

To rip DVDs with Handbrake:

1. Go to Options. Set the default folder to wherever you want this lot of files stored (which saves hassle later), and set up a filename scheme. This needs to be set for each DVD if you want the files named anything useful.
2. Insert the DVD and select “DVD” as the source.
3. In my case, the DVDs were fairly low resolution, so for space-efficiency and quick processing we chose the “Iphone and Ipod Touch” setting defaults.
4. Set audio however you want; in our case it was worth mixing down to Mono because there was only a mono track.
5. Select “Web Optimise”
6. Manually select the first track, so chapters “1 through 1”
7. Check the filename and path. Manually chance the prefix to .mp4 if you want .mp4s, as it tends to default to m4v.
8. Add the chapter to the queue
9. Change the start track to the next one. This will automatically change the end track, so you’re still only picking one track at a time.
10. Repeat until all tracks are added.
11. Open the queue, check all the tracks are actually there, and off you go. Ripping will take a while, so I suggest using a machine you won’t be needing for the rest of the afternoon; it might be safe enough, but there’s always a chance of causing problems if you try to work on it at the same time.

XML Playlists

A playlist looks like this:

  <playlist version="1" xmlns="http://xspf.org/ns/0/">
    <title>playlist title</title>
    <info>main DVD page URL</info>
    <tracklist>
      <track>
        <title>number and title of track</title>
        <creator>copyright holder</creator>
        <info>filename.mp4</info>
        <annotation>description of track</annotation>
        <location>filepath/filename.mp4</location>
      </track>
...(repeat for other tracks)     </tracklist>
  </playlist>

Sections in red need to be filled in appropriately. In the case of the VLE I was working with, files seemed to need absolute paths rather than relative ones.

I wrote them in Notepad++ (http://notepad-plus-plus.org/), which keeps track of bracket pairs, quote pairs and so on, making it amazingly useful for this kind of thing. In fact I do all my HTML editing in NP++.

Pages with embedded players

The player I ended up using is called JW Player, available from Longtail Video (http://www.longtailvideo.com/players/). It supports both Flash and HTML5. I used the simpler Flash option as the VLE was liable to create enough problems, without worrying about browser issues. I believe the newest release of JWP (currently 5.9) may make things simpler, but haven’t tried it. I started the project with the January 2011 release (probably 5.0), and have not seen any particular reason to change over.

I downloaded JWP and unzipped it into a folder on the VLE. That’s about all you need to do with it.

Each embedded-player webpage looks like this:

<h2>DVD Title</h2>
<script type='text/javascript' src='../../media/swfobject.js'></script>
<div id="mediaspace">descriptive text that should not appear unless there are problems. I used it to include a warning that library catalogue machines could not play the videos</div>
<script type='text/javascript'>
  var so = new SWFObject('../../media/player.swf','mpl','980','480','9');
    so.addParam('allowfullscreen','true');
    so.addParam('allowscriptaccess','always');
    so.addParam('wmode','opaque');
    so.addVariable('playlistfile','DVD_playlist.xml');
    so.addVariable('playlistsize','340');
    so.addVariable('playlist','right');
    so.addVariable('bufferlength','30');
    so.addVariable('autostart','true');
    so.addVariable("repeat","list");
    so.addVariable("shuffle","false");
    so.addVariable('backcolor','52708b');
    so.addVariable('frontcolor','000000');
    so.addVariable('lightcolor','ffffff');
    so.write('mediaspace');
</script>
<p>Read the <a href="path/thisdvdsummary.html">written summary</a>
</p>
<p>Return to the <a href="path/maindvdlist.html">main DVD listing</a>
</p>

Static pages

The pages with transcriptions, DVD listings and other information were just bog standard HTML pages.

Folder structure

Just for completeness, here’s the folder structure I used for the project, with generic names instead of the specifics I used.

Main (root folder for the project)
    Main.Media (contents of the JW Player download, used to actually play the .mp4s)
    Main.DVDs (includes the homepage for the videos, and any summaries or transcriptions to the contents of multiple individual DVDs; the latter could instead have been in a specific Summaries subfolder)
        Main.DVDs.ThisDVD (includes the individual mp4s; the xml playlist; summary page for the specific DVD; and the embedded-player page).