On this page
*Video compression is now only available to Clipchamp Utilities users.
Playing back video files on websites is a common desire for many Clipchamp users. Most of the presets on clipchamp.com 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).
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 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 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 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 tag. Embedding an HTML5 video is easy:
Further CSS styling can accomplish fullscreen background video (as seen on some webpages), rotation, and even effects such as greyscale and blurring.
W3Schools has an excellent documentation on the tag, explaining further options and addressing cross-browser compatibility concerns. Both MP4 and WebM provide much better compression than animated GIF, making HTML5 video suited for large videos. With essentially all modern browsers supporting HTML5 video, we expect the still popular animated GIF format to vanish over time and be fully replaced by HTML5 video.
Motion JPEG
We recently introduced support for converting videos into MJPEG ("motion JPEG") files, which are a compromise between animated GIF and HTML5 video. Technically, MJPEG files are essentially concatenated JPEG-encoded still images. As JPEG is a "lossy" compression, whereas GIF is lossless, it compresses much better, resulting in smaller file sizes. Other than that, MJPEG files also have a greater color depth, avoiding the extensive use of "dithering" as seen in some animated GIFs.
When compared with proper HTML5 video, the one major advantage of MJPEG is that there is no need for HTML5 video support in browsers. On the flipside, there is no support for audio tracks and other "proper" video playback capabilities found in HTML5 video. Also, native browser support for MJPEG playback is somewhat scarce. That is, most (yet, not all) browsers can natively play back MJPEG streams that are progressively delivered from a remove server as HTTP multipart document. This type of MJPEG is actually a streaming protocol (used by many webcams) and not a file format. For the sake of clarification, clipchamp produces MJPEG files, which need another method to be played back within a website.
This is why we have created jquery.clipchamp.mjpeg.player.js, a simple, open-source MJPEG player in Javascript (link to GitHub repository) for you to use.
Using jquery.clipchamp.mjpeg.player.js to play back an MJPEG file on your website is easy. In the simple-most case, you use it in conjunction with jQuery by adding two tags to your site:
In this case, we retrieve the two files from a CDN each. For production purposes, you should at least host the jquery.clipchamp.mjpeg.player.js plugin on another server. Next, you need a wrapper element, which is an empty HTML element that hosts the MJPEG player. You are responsible for giving that wrapper element the right dimensions, like so:
Finally, a few simple lines of Javascript will start the playback:
$('#mjpeg_wrapper').clipchamp_mjpeg_player( 'http://URL\_of\_my\_MJPEG\_file.mjpeg', 24, // frames per second true, // autoloop function(wrapperElement, playerInterface) { // call playerInterface.finish() to stop the playback });
We first select our wrapper element with a simple CSS query and invoke the clipchamp_mjpeg_player(...) function. In that function call you can pass the framerate (i.e., the playback speed in numbers of frames per second and specify whether or not that video should be played back in a loop. The forth parameter is a callback function that is invoked with two parameters as soon as the MJPEG video has started playing back. The second parameter is an object with (so far) a single function "finish", which will end the playback.
