HTML5 Video

HTML5 adds support for a standard Video tag instead of relying on plugins like QuickTime or Flash to display video content. On the plus side, this means better video playback on a wide variety of devices with varying technical ability. On the downside, implementing HTML5 video can be tricky. The following instructions should help greatly when adding video to your pages.

Creating HTML5 Video Files

First, you'll need a master copy of your video - export your video from whatever video editor you're using at the target resolution, but in high quality.

Next, you'll need to make the optimized versions that will go on the website. You'll need at least an h.264 video, but for better compatibility you should also make a WebM video. We recommend using Miro Video Converter (http://www.mirovideoconverter.com/) since you just have to drag & drop your master video onto the app, then pick the format and go.

(The system also supports OGG Theora, but that only gets you compatibility with a tiny fraction of Firefox that doesn't support WebM, and the video looks significantly worse in Theora. It's better just to use h.264 and WebM and let that tiny fraction of Firefox fall back to using Flash instead of HTML5.)

Last, you'll need to make a poster. A quick and easy way to do this is to play the master video file in VideoLAN and choose Video -> Take Snapshot from the menu. Take the image generated, open it in Photoshop and Save for Web as a JPEG.

Upload Video to TerminalFour

For CMS users this should be pretty straightforward, but since there are 3 files to upload it's recommended that you make a sub-folder in the TerminalFour Media Library for each video to keep the 3 files together. When you're done the folder will look similar to this:

Place Video on Page

In the Terminal Four Site Structure, find the Section on which you want to place the video and add a new piece of content. Choose "HTML5 Video" as your Content Template. (If this is not available to you, you may need to first Modify the Section and make HTML5 Video available in the Content Templates tab.) Fill out the form with the files you just uploaded.


Alternate Method: Adding a Video Using JavaScript

The Montclair State website's standard JavaScript includes a way to display video using HTML5 or Flash depending on what the visitor's browser is capable of handling. All of the checking is handled behind the scenes - you just need to provide the files.

Most of the time, content creators should use the TerminalFour method to add HTML5 videos - use this method only for videos not hosted via the CMS. To use this method, you must be familiar with JavaScript and JSON.

1: Create an HTML5 Video Object

width, height, poster, and h264 are required. The rest of the parameters are optional, but WebM is strongly recommended.

var tmp = new html5Video({
	"width": 704,
	"height": 396,
	"h264": "http://clips.vorwaerts-gmbh.de/VfE_html5.mp4",
	"webm": "http://clips.vorwaerts-gmbh.de/VfE.webm",
	"ogg": "http://clips.vorwaerts-gmbh.de/VfE.ogv",
	"poster": "./poster.jpg",
	"downloadLink": true
});

2: Write the Object onto the page where you want the video

tmp.write();

Result: