on Code

Creating a HTML5 Video Extension for MediaWiki

Another bit of random coding from Fuzzy Tolerance.

I have a wiki page where I put a lot of tutorial videos for our division. Some are hosted on YouTube because they are about something general or about something related to one of our open source projects. But some are just for the locals and I don’t want them to live on YouTube for various reasons. I’ve been wanting to try a little HTML5 video, and this seemed like a good opportunity.

I hunted through the MediaWiki extensions, but I couldn’t find what I was looking for. I looked through the MediaWiki extension docs and made a quick and dirty HTML5 video extension.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?php
# Credits
$wgExtensionCredits['parserhook'][] = array(
    'path'        => __FILE__,
    'name'        => 'HTML5 Video',
    'author'      => array('Tobin Bradley'),
    'url'         => '//fuzzytolerance.info/',
    'description' => 'Create HTML5 Video Tags',
    'version'     => '1.0'
);

$wgHooks['ParserFirstCallInit'][] = 'html5vidinit';

function html5vidinit( $parser ) {
	$parser->setHook( 'video', 'html5vidrender' );
	return true;
}

function html5vidrender( $input, $args, $parser, $frame ) {
	$output = '<video width="100%"  autobuffer controls>' .
            '<source src="videos/' . $input . '.MP4" type="video/mp4" />' .
			 '<source src="videos/' . $input . '.ogv" type="video/ogg" />' .
			  '<object width="640" height="384" type="application/x-shockwave-flash" data="videos/player.SWF">' .
			'<param name="movie" value="videos/player.SWF" />' .
			'<param name="allowfullscreen" value="true" /> ' .
			'<param name="flashvars" value="autostart=falsefile=' . $input . '.mp4" />' .
			'</object>' .
            '</video>' .
            '<p><a href="videos/' . $input . '.MP4" >Download Video</a></p>' ;

	return  $output ;
?>

Nothing magical here:

  • I put a videos folder in my mediawiki directory and put videos in ogv and mp4 formats there (same video name for both, different extensions). There's lots of stuff you can use to convert video files. I used Transmageddon on linux, but you can always just use ffmpeg.
  • Toss a flash video player in that folder as well for IE users. I used JW Player.
  • Make a folder called html5vid in your MediaWiki extensions folder. Save the above code in that folder as html5vid.php.
  • Add the line require_once('extensions/html5vid/html5vid.php'); to your LocalSettings.php file to enable the extension.
  • In a wiki entry, drop in . Just the video file name without extensions.
Note the code is very primitive - the path to the videos, the video types, the video size, the path to the flash engine, etc. - all hard coded. It outputs the video tag, tries the MP4 file, if that's no good it tries the OGV file, and if that doesn't work it loads the Flash player. At the end it puts a link to download the MP4.

Writing extensions for MediaWiki is really easy. Especially if they’re fairly lousy and bereft of features like this one :). One thing to note - Firefox will not stream video if the MIME type from the server is incorrect. For Apache, drop this in your config file:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Thanks to this site for saving me a few hours of skull-to-desk.