In recent years video has emerged as one of the key types of sticky content that we can use to engage users online. Recent stats have shown that video is incredibly powerful in increasing the time someone spends on a website, but it does rely on the video being well produced and it also relies on making sure that the video is delivered in the correct formats.
I have been on both sides of the fence when it comes to video; I have been the supplier / creator as a freelance producer / director and as the manager of a video proposition for a large digital agency. But I have also been on the implementation side for years working for digital agencies to implement video on websites. One of the things that has become evident is that often video producers do not understand the technical requirements of implementing video online and conversely technical people often do not understand the creative process of producing an engaging video. The former is the matter that I am going to address today.
When you produce a website you build it so that it is accessible to the most people possible within the constraints of the scope and budget you have. This means making it work for a variety of different browsers and devices. The major problem is that these different browsers and devices were all built by different organisations and thus have slightly different code languages and idiosyncrasies. This is a pain at the best of times, especially when it comes to making things work in Internet Explorer, but it is especially relevant when thinking about video. The introduction of HTML5 has meant this is especially important as it means that Flash is no longer the default way to deliver video.
One approach that many people favour is to simply rely on YouTube or Vimeo (other video suppliers are available) and embed the players. But the problem with this is that you have a branded player and your videos are managed on a different platform. There are SEO considerations with this approach as well, not to mention that YouTube doesn’t work on all devices, specifically some SmartTVs. You might not be concerned by this yet but it may be an issue in the future as browsing diversifies. For many, however, the major issue is having the videos in a branded player.
The HTML5 video tag has made it incredibly easy to add video to websites and has meant that you no longer need to have a custom video player built for the job. The tag is simple, even a non-techy could implement it:
<video width=”600″ height=”360″ src=”/video/video1.mp4″ controls></video>
This utilises the browser or device players and follows the same approach that Apple have taken, where the iPhone and iPad play a video in the native player rather than in the one provided. But this tag does present a problem, and this comes back to my point about different browsers and different code approaches.
If you simply implement an .mp4 video file then you have immediately ruled out all users in Firefox and Internet Explorer, as they do not use this video type. Mozilla, the producers of Firefox, favour the use of the OGG/Theora video encode and Apple will only support MPEG4/H264 video. Google’s WebM format is likely to unite most of the browsers, but currently Apple will not support this so the divide is likely to exist for sometime.
So the real issue is making sure your video is available to as many people as possible, irrelevant of device or browser. Due to the divide that currently exists, you need to use both .mp4 and a .ogg formats (ogg covers all the codecs, rather than ogv which is focussed on video and therefore excludes some). But there are still browsers, particularly legacy ones, that do not support HTML5. In order for your video to work in these browsers you will also need to include a .flv Flash file so that those browsers can use the Flash plugin to play video.
To cover all the bases and to future proof your website I would recommend also including Google’s WebM video format. If there is one thing history has taught us it is that Google tends to get traction so WebM is likely to become the format of choice for most non-Apple browsers in the next few years.
What this shows is that it is necessary to have at least 3, but ideally 4, separate video files for your website if you want to make sure the video is accessible to all users. This is a consideration that often is overlooked by video producers who do not specifically work in web. And it is understandable that many video producers wouldn’t know about this, unless they also have a background in coding websites. This was demonstrated recently when one of the video agencies working with one of our clients said:
“.flv and .mp4 not a problem (.mp4 is what you have now). .ogg and .webm, these are new and not the normal files we use (or anyone in the industry for that matter).”
This comment probably stemmed from a lack of understanding of web technology. The OGG Theora has been around since its initial development and subsequent release by Xiph (in 2001 and 2004 respectively), and was originally recommended by W3C and WHATWG as the preferred format for native browser playback of video when embedded by the HTML5 <video> element. Similarly, WebM has been around since 2010 and is the preferred alternative format for native playback of video in all browsers not IE or Netscape/Safari. (Source: HTML5 specification, revisions 1142-1143, and Larry Brangwyn who has a decade of video encoding experience for web.) Saying that no one else in the industry uses those formats is an indication of the widespread lack of understanding of coding technology amongst video producers in general.
Implementing video successfully for the web is very important, especially as we move into the new world of responsive website and people interacting with online content on all sorts of devices…not just mobile and tablets but TVs, on planes and trains, even through your fridge or your ski goggles! These new devices will require native video playing rather than embedded video players and the only way to make sure they work is to have the correct video formats. Hopefully the future will hold a unified video format, but for the time-being get your video supplier to encode these 4 formats and you will be pretty safe. Then you only need to worry about the content in the video…and that is a whole different can of worms!