Playing back video files on websites is a common desire for many Clipchamp users. Most of the presets on produce video files that are amenable to playback on websites, that is in browsers. This blog post explains some simple ways of playing back animated GIF animations, MJPEG movies, and MP4 videos (as produced by the Mobile and Desktop / Web presets).

Animated GIF

Playing back animated GIF “videos” is probably the easiest and best supported way of embedding videos into websites. As a matter of fact, GIF (Graphics Interchange Format) is actually an ancient file format for still images, which has been around since the late 1980s. Being able to display short animations as sequences of stills is probably the only reason why GIF images are still in use to date.

As an image file format, GIF is rather limited: it compresses worse than JPEG (let alone WebP) and is restricted to an 8-bit color depth (no more than 256 colors). GIF animations lack an audio track and should generally be limited to very short video sequences having a low resolution (as files storing animated GIF sequences can otherwise grow very large).wall

When it comes to the web, the only reason, really, to use GIF animations these days is compatibility with legacy browsers. There would hardly be any legacy browser to date that does not support animated GIFs. Embedding an animated GIF file is easy – just use the plain old HTML <img> tag like so:

That’s it – no messing around with video codecs, no compatibility concerns because of other “bleeding edge” HTML5 features, no Javascript, no CSS, no nothing.

HTML5 Video

The <video> tag is one of the most yearned for HTML5 features that has recently made its way into virtually any modern browser. HTML5 video finally gets us rid of the dreaded Adobe Flash plugin, hopefully never to be seen again. Different to animated GIF, HTML5 video is an umbrella term for the <video> tag and an accompanying Javascript API to play back “proper” video (container) formats, such as MP4 or WebM.

That being said, it can simultaneously play back audio and video tracks, supports interactive player controls such as seeking (“scrubbing”), pause/resume, rewind, fullscreen mode etc. More recently, “advanced” features such as support for multiple video tracks and (controversial) digital rights management (DRM) features were added to HTML5 video in some browsers.Alas, HTML5 video does not come without challenges, namely worrying about codec support and generally, compatibility with legacy browsers. Most notably, browser vendors did not initially agree on the set of supported container (file) formats and audio and video codecs, the contenders being MP4 (with H.264 for video and AAC for audio) and WebM (with VP8 for video and Vorbis for audio).

The primary reason for this “schism” of video formats are patent royalties, payable for the use of H.264 and AAC (with VP8 and Vorbis being royalty-free alternatives). However, with Mozilla receiving an H.264 codec from Cisco, the top 5 browsers have finally gained MP4 support for the HTML5 <video> tag. Embedding an HTML5 video is easy: