Chapter 2. Adding Responsive Video Content

Throughout the history of the Internet, since its early days, designers and developers have been able to add images to websites—these are great to illustrate points or concepts, but are a static record at a point in time. More and more developers are turning to the power of video to help illustrate something: the themes are varied, from news right through to cooking, or even a step-by-step coding tutorial! With the advent of mobile media comes an increasing need for responsive content—we need to ensure our content can be viewed without issue on more and more devices.

In this chapter, we'll go on a journey through some of the concepts required to make our content responsive, as well as cover some of the tips and tricks to make our content available on multiple platforms. In this chapter, we will cover the following topics:

Determining support for the <video> formats and choosing the right format
Embedding HTML5 video...

Getting ready

For the purpose of our exercises in this chapter, we'll be using similar markup throughout; it is worth saving the following code as a template file to help you complete each exercise:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>XXXXXXXXXX</title>
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
  <link href="css/XXXXXXXX.css" rel="stylesheet">
</head>
<body>
</body>
</html>

Now that we have our groundwork prepared, let's begin our journey into working with responsive video, with a look first at the formats available for use.

We will also be using various videos from the Big Buck Bunny Project by the Blender Foundation, namely the 852 x 480 and 1280 x 720 formats; you can download these from http://www.bigbuckbunny.org/index.php/download/.

Note

The videos used throughout this project...

Determining support for <video> formats

The first step on our journey in creating responsive video content is to determine which video format we're going to use. There are several video formats available for use in the browser, but the two worth noting are WebM and MP4. The former is still supported within Firefox, Chrome, and Opera only; the latter is supported by all of the main desktop browsers, except IE8 and Opera. For the purposes of creating responsive content, we still need to work with both though, as the mobile platform has yet to decide on a common standard:

Browser	Firefox	Chrome	Safari	IE (9+)	Opera	iOS	Android
Format supported	MP4	MP4	MP4	MP4	WebM	MP4, WebM	MP4, WebM

This table can also be referred to at http://www.jwplayer.com/html5/ (in the article "The State of HTML5 Video", by Jeroen Wijering).

As the HTML5 video standard is still in something of a state of flux, it is worth checking the CanIUse.com site, to keep abreast of progress...

Choosing the right format

So far, we've learnt that to work with the HTML5 <video> tags, we need to use either the WebM or MP4 formats (or ideally both, to ensure coverage). It's possible that you may have existing content that isn't in this format; if this is the case, let's look at how we can get it converted.

There are dozens of applications available for download, to convert from one format to another—my personal favorite is XMedia Recode for Windows, which is available at http://www.xmedia-recode.de. This allows conversion to and from a host of different formats, including both WebM and MP4. Let's take a look at how it works using the following steps:

We'll start by downloading a copy of XMedia Recode from http://www.xmedia-recode.de/en/download.html; the latest version is 3.1.9.4 at the time of this writing.
Double-click on the setup executable to launch installation and accept all defaults throughout the wizard.
At this point, XMedia Recode...

Embedding HTML5 video content

As with all projects, we need to start somewhere—we could simply double-click on a video and let it play in any application we have installed, that supports the format. However, this isn't what we're here to do; we want to view the content in a browser and set it to resize automatically!

The following steps will show you how to achieve this using videos I've converted from the open source Big Bunny Project at http://www.bigbuckbunny.org:

Let's start by opening a copy of the template file we created earlier in the book, then alter the <title> tag of our demo, as shown in the following code snippet:
```
<title>Demo: Controlling Video sizes using media queries</title>
```
In the <body> tag of our code, go ahead and add the following lines; these reference the different video formats we can use, depending on which browser we're working with:
```
  <video controls>
    <source src="video/bigbuckbunny.mp4&quot...
```

Determining an available viewport for use

If you have spent any time developing content for responsive layouts, you will have no doubt come across media queries. The same applied to videos; you could typically see something akin to the following (simplified) example:

<video controls>
  <source src="the-sky-is-calling-large.mp4" media="screen and (min-width:800px)">
  <source src="the-sky-is-calling-small.mp4" media="screen and (max-width:799px)">
</video>

Unfortunately, most browsers have since removed support for media queries. This is largely due to the poor user experience we get if the video is suddenly interrupted when resizing the screen. Fortunately, we can produce similar effects, although we need to resort to JavaScript or jQuery to achieve this. In this next example, we're going to show a small video if the screen is resized to a small window, or hide it when displayed in full screen. Let's take a look at...

Getting ready

For the purpose of our exercises in this chapter, we'll be using similar markup throughout; it is worth saving the following code as a template file to help you complete each exercise:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>XXXXXXXXXX</title>
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
  <link href="css/XXXXXXXX.css" rel="stylesheet">
</head>
<body>
</body>
</html>

Now that we have our groundwork prepared, let's begin our journey into working with responsive video, with a look first at the formats available for use.

We will also be using various videos from the Big Buck Bunny Project by the Blender Foundation, namely the 852 x 480 and 1280 x 720 formats; you can download these from http://www.bigbuckbunny.org/index.php/download/.

Note

Determining support for <video> formats

The first step on our journey in creating responsive video content is to determine which video format we're going to use. There are several video formats available for use in the browser, but the two worth noting are WebM and MP4. The former is still supported within Firefox, Chrome, and Opera only; the latter is supported by all of the main desktop browsers, except IE8 and Opera. For the purposes of creating responsive content, we still need to work with both though, as the mobile platform has yet to decide on a common standard:

Browser	Firefox	Chrome	Safari	IE (9+)	Opera	iOS	Android
Format supported	MP4	MP4	MP4	MP4	WebM	MP4, WebM	MP4, WebM

This table can also be referred to at http://www.jwplayer.com/html5/ (in the article "The State of HTML5 Video", by Jeroen Wijering).

As the HTML5 video standard is still in something of a state of flux, it is worth checking the CanIUse.com site, to keep abreast of progress at http://caniuse...

Choosing the right format

So far, we've learnt that to work with the HTML5 <video> tags, we need to use either the WebM or MP4 formats (or ideally both, to ensure coverage). It's possible that you may have existing content that isn't in this format; if this is the case, let's look at how we can get it converted.

There are dozens of applications available for download, to convert from one format to another—my personal favorite is XMedia Recode for Windows, which is available at http://www.xmedia-recode.de. This allows conversion to and from a host of different formats, including both WebM and MP4. Let's take a look at how it works using the following steps:

We'll start by downloading a copy of XMedia Recode from http://www.xmedia-recode.de/en/download.html; the latest version is 3.1.9.4 at the time of this writing.
Double-click on the setup executable to launch installation and accept all defaults throughout the wizard.
At this point, XMedia Recode will be installed; we now need to run...

Embedding HTML5 video content

As with all projects, we need to start somewhere—we could simply double-click on a video and let it play in any application we have installed, that supports the format. However, this isn't what we're here to do; we want to view the content in a browser and set it to resize automatically!

The following steps will show you how to achieve this using videos I've converted from the open source Big Bunny Project at http://www.bigbuckbunny.org:

Let's start by opening a copy of the template file we created earlier in the book, then alter the <title> tag of our demo, as shown in the following code snippet:
```
<title>Demo: Controlling Video sizes using media queries</title>
```
In the <body> tag of our code, go ahead and add the following lines; these reference the different video formats we can use, depending on which browser we're working with:
```
  <video controls>
    <source src="video/bigbuckbunny.mp4" type="video/mp4">
    <source src="video...
```

Determining an available viewport for use

If you have spent any time developing content for responsive layouts, you will have no doubt come across media queries. The same applied to videos; you could typically see something akin to the following (simplified) example:

<video controls>
  <source src="the-sky-is-calling-large.mp4" media="screen and (min-width:800px)">
  <source src="the-sky-is-calling-small.mp4" media="screen and (max-width:799px)">
</video>

Unfortunately, most browsers have since removed support for media queries. This is largely due to the poor user experience we get if the video is suddenly interrupted when resizing the screen. Fortunately, we can produce similar effects, although we need to resort to JavaScript or jQuery to achieve this. In this next example, we're going to show a small video if the screen is resized to a small window, or hide it when displayed in full screen. Let's take a look at how we can achieve this:

We'll begin with extracting...

Catering to fallback support

So far, we've produced HTML5-formatted video content and seen how to embed it in our pages. There may be occasions, though, when we are working on a device that doesn't support a certain type of video format.

While support for HTML5 video is improving all the time, we're still at a stage where not every platform supports the same formats. This leaves us with two choices. We can either try to incorporate a different format, or we can simply set the content to degrade gracefully. We've looked at providing different formats, so let's switch track and see how we can gracefully degrade our content using Modernizr as the basis for our test. The following steps will guide us through the process of content degrading:

Let's begin by adding the following code to a new file and save it as modernizr.html:

<!DOCTYPE html>
<html class="no-js">
<head>
  <meta charset="utf-8"/>
  <title> Demo: Detecting support with Modernizr</title>
  <meta...

Responsive Media in HTML5: Learn effective administration of responsive media within your website or CMS system using practical techniques

What do you get with Print?

Responsive Media in HTML5

Chapter 2. Adding Responsive Video Content

Getting ready

Note

Determining support for <video> formats

Choosing the right format

Embedding HTML5 video content

Determining an available viewport for use

Getting ready

Note

Determining support for <video> formats

Choosing the right format

Embedding HTML5 video content

Determining an available viewport for use

Catering to fallback support

Page 1 of 12

Description

What you will learn

Product Details

What do you get with Print?

Product Details

Frequently bought together

Table of Contents

Recommendations for you

People who bought this also bought

About the author

FAQs

Responsive Media in HTML5: Learn effective administration of responsive media within your website or CMS system using practical techniques

What do you get with Print?

Contact Details

Shipping Address

Billing Address

Description

What you will learn

Product Details

What do you get with Print?

Contact Details

Shipping Address

Billing Address

Product Details

Packt Subscriptions

Frequently bought together

Table of Contents

Recommendations for you

People who bought this also bought

About the author

FAQs