cinemagraph.jpg

Cinemagraphs

HTML5 video with animated gif fallback, intended for giving subtle movement to an image, uplifting the experience.

2 minute read

What is a Cinemagraph?

Cinemagraphs are somewhere in between a video and an image, supposed to be used for introducing subtle motion which is a little more interesting than just a regular image. Cinemagraphs do not add additional information to image content, like a video would, but instead they just lift the experience to a slightly different level.

Why use them?

With the contemporary websites of today, the use of large, bold imagery is more and more prominent. With mobile browsing on the increase, the number of people experiencing a website only from a mobile device, never from a desktop, to satisfy their consumer needs means that we need a solution which caters for this audience.

Browser/Device support issues

Until the release of iOS 10, HTML5 videos were not permitted for autoplay on iPhone, iPad and iPod devices, this was largely due to bandwidth constraints. This has meant that on such devices, a simple video would not work to create the Cinemagraph experience thus requiring a fall back in the form of an animated gif. This fallback is also applicable for devices/browsers not supporting h.264 video playback.

Implementation in JavaScript for a Web Application

Cinemagraphs with a fallback solution are straight forward to implement in a web application. There are several approaches but in essence the following steps are required.

Firstly, we need a mechanism for a placeholder for a Cinemagraph in the DOM.

<div class="video-player" data-video-mp4="/Assets/CONTENT/videos/workshop-1-desktop.m4v" data-fallback="/Assets/CONTENT/videos/ workshop-1-poster.gif"></div>

So we have a class to target, a video source and a fallback source.

In JavaScript, we then work out which source to use based on environmental parameters, such as device version/video support etc. This step can be fine-tuned for any number of parameters as required.

It used to be easy, when devices didn’t support autoplay video we would always us the fallback gif if mobile. Now, we need to be more specific and target iOS versions > 10. Somewhere on the internet there will be a clip of how to do that.

One thing that is crucial is to check browser support for h264 video encoding support, as follows:

 
function h264Support() {
        try {
            var v = document.createElement("video");
            return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
        } catch (e) {
            return false;
        }
    }

If this is false, then the fallback must be used.

Once the source (video/fallback) has been determined, using JavaScript we need to append the HTML markup to the placeholder for either video or image. If video, we need to decorate accordingly with the following attributes:

 <video loop muted playsinline>

iOS 10 and above will only play inline videos with either no soundtrack or possessing the muted attribute.

 

This website has a good example… www.wagamama.com  

Further examples: http://www.hongkiat.com/blog/cinemagraph/

 

 


  • JavaScript
  • Mid-level
  • Clientside

Leave a comment

Submit