UX Design and Development course

Video

Users like videos; they can be fun, informative. On mobile devices, videos can be an easier way to consume information. But videos take bandwidth; they don't always work the same across every platform. Users don't like waiting for videos to load, or when they press play and nothing happens. Read more to find the simplest way to add video to your site and ensure users get the best possible experience on any device.

Keep reading ...

Add the video element and Specify multiple file formats

Not all browsers support the same video formats. The <source> element lets you specify multiple formats as a fallback in case the user’s browser doesn't support one of them. For example:

<video controls="">
  <source src="https://developers.google.com/web/fundamentals/documentation/introduction-to-media/video/video/chrome.webm" type="video/webm">
  <source src="https://developers.google.com/web/fundamentals/documentation/introduction-to-media/video/video/chrome.mp4" type="video/mp4">
  <p>This browser does not support the video element.</p>
</video>

When the browser parses the <source> tags, it uses the optional type attribute to help decide which file to download and play. If the browser supports WebM, it will play chrome.webm, if not, it will check if it can play MPEG-4 videos. Check out A Digital Media Primer for Geeks to find out more about how video and audio work on the web.

Specify a start and end time

Save bandwidth and make your site feel more responsive: use the Media Fragments API to add a start and end time to the video element.

To add a media fragment, you simply add #t=[start_time][,end_time] to the media URL. For example, to play the video between seconds 5 through 10, specify:

/video/chrome.webm#t=5,10

The whole block looks like:

<video controls="">
  <source src="https://developers.google.com/web/fundamentals/documentation/introduction-to-media/video/video/chrome.webm#t=5,10" type="video/webm">
  <source src="https://developers.google.com/web/fundamentals/documentation/introduction-to-media/video/video/chrome.mp4#t=5,10" type="video/mp4">
  <p>This browser does not support the video element.</p>
</video>

Include a poster image

Add a poster attribute to the video element so that your users have an idea of the content as soon as the element loads, without needing to download video or start playback.

<video poster="poster.jpg" ...>
  ...
</video>

A poster can also be a fallback if the video src is broken or none of the video formats supplied are supported. The only downside to poster images is an additional file request, which consumes some bandwidth and requires rendering. For more information see Image optimization.

Provide alternatives for legacy platforms

Not all video formats are supported on all platforms. Check which formats are supported on the major platforms and make sure your video works in each of these.

Produce video in multiple formats

There are lots of tools to help save the same video in different formats:

Responsive videos

Setting sizing in CSS allows the video player to become responsive.

<div class="video-container">
  <iframe src="//www.youtube.com/embed/l-BA9Ee2XuM" frameborder="0" width="560" height="315">
  </iframe>
</div>

Then the CSS, remember to set the parent container to position: relative;

.video-container iframe, .video-container object, .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Check out this example

Customize the video player

Different platforms display video differently. Mobile solutions need to consider device orientation. Use Fullscreen API to control the fullscreen view of video content.

Control fullscreening of content

For platforms that do not force fullscreen video playback, the Fullscreen API is widely supported. Use this API to control fullscreening of content, or the page.

To full screen an element, like a video:

elem.requestFullScreen();

To full screen the entire document:

document.body.requestFullScreen();

You can also listen for fullscreen state changes:

video.addEventListener("fullscreenchange", handler);

Or, check to see if the element is currently in fullscreen mode:

console.log("In full screen mode: ", video.displayingFullscreen);

You can also use the CSS :fullscreen pseudo-class to change the way elements are displayed in fullscreen mode.

Here is a fullscreen demo

View source to see how this is working.

Activating fullscreen mode

source

Given an element that you'd like to present in fullscreen mode (such as a <video>, for example), you can present it in fullscreen mode by simply calling its requestFullscreen() method; this method is implemented in Gecko as element.mozRequestFullScreen(), in Trident as element.msRequestFullscreen() and in WebKit as element.webkitRequestFullscreen().

Let's consider this <video> element:

<video controls id="myvideo">
  <source src="somevideo.webm"></source>
  <source src="somevideo.mp4"></source>
</video>

We can put that video into fullscreen mode with script like this:

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

Presentation differences

It's worth noting a key difference here between the Gecko and WebKit implementations at this time: Gecko automatically adds CSS rules to the element to stretch it to fill the screen: "width: 100%; height: 100%". WebKit doesn't do this; instead, it centers the fullscreen element at the same size in a screen that's otherwise black. To get the same fullscreen behavior in WebKit, you need to add your own "width: 100%; height: 100%;" CSS rules to the element yourself:

:-webkit-full-screen #myvideo {
  width: 100%;
  height: 100%;
}

On the other hand, if you're trying to emulate WebKit's behavior on Gecko, you need to place the element you want to present inside another element, which you'll make fullscreen instead, and use CSS rules to adjust the inner element to match the appearance you want.