facebook google plus twitter
Webucator's Free Developing Mobile Websites Tutorial

Lesson: Video

Welcome to our free Developing Mobile Websites tutorial. This tutorial is based on Webucator's Responsive Web Design Training course.

In this lesson, you will learn about using video for mobile.

Lesson Goals

  • Learn how to produce and display video for best viewing on mobile.
  • Learn how to save video in file formats best suited for mobile.
  • Learn how to use the HTML5 video tag.
  • Learn how to control video with JavaScript.

Optimizing the Video Experience for Mobile

Optimizing for Mobile

As the percentage of traffic to our websites from users on mobile devices grows, so too, of course, does the percentage of users viewing video from mobile. Before we delve into file formats, HTML5 code, or JavaScript, let's spend a few minutes on content creation: how should the video footage you shoot be different if your intended audience will be watching from a 3" screen?

First, keep in mind the constraints of the device. The small screen size on mobile devices means on-screen text or captions will be difficult to read if too small; be sure to make text big. Ditto with in-video links: it's often better to present hyperlinks on the Web page, above or under the video player, rather than in the video itself. A small screen also means wide, far-away shots will be difficult to view: zoom in on the interesting stuff.

Similarly, visitors on mobile devices frequently will hear the audio from your video on small, tinny speakers: be sure to make the audio as clear as possible.

Most importantly, test your video: does it look good on your smartphone? Of course, testing the video for optimal viewing is a best practice regardless of the intended viewing device - but testing on a phone should be a given.

Embedding from YouTube or Vimeo

YouTube, Vimeo, and other video sites offer mobile-friendly embedding of videos. Conveniently, the same embed code works, chameleon-like, on desktops and mobile: where a user viewing our page on a PC or Mac desktop might see the Flash version of the video, a user viewing the page on an Android or iPhone would see a non-Flash version.

As a strategy, publishing your videos to YouTube, Vimeo, or some other video site makes a lot of sense: you increase the visibility of the videos (since users can find it via the video site itself, not just on your site); YouTube or Vimeo is hosting your video for you; and embedding solves many technical, how-do-I-do-this-for-mobile questions.

As a quick demonstration, we'll select a YouTube video appropriate for our Jazz Calendar site; this Wynton Marsalis video looks good. We'll choose "Embed" under the "Share" option:

YouTube embed options

and paste the iframe code into Video/Demos/youtube.html:

embedded YouTube video on iphone and desktop

Note that we scale the iframe element, in Video/Demos/css/youtube.css, to fit the containing element:

#main #maincontent iframe {
	max-width:100%;
	margin-bottom:4%;
}

Hosting Your Own Videos

Hosting your videos on YouTube or Vimeo isn't always a perfect option. Worries over intellectual property rights (others can embed my videos), loss of traffic (visitors view my videos on YouTube instead of my site), professionalism (worries that visitors might think my site less professional if videos are embedded), and other concerns might dictate that you host your videos on your own site.

The HTML5 video tag, along with appropriate choices for video file format, makes relatively easy the process of presenting videos to be playable regardless of the viewing device.

First, let's look at the video tag:

<video width="480" height="270" controls poster="images/poster.png">
		<source type="video/mp4" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></source>
		<source type="video/webm" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm"></source>
		<source type="video/ogg" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv"></source>
		<p>Your browser does not support the video tag</p>
	</video>

Code Explanation:

The width and height attributes set the width and height, of course; we'll also set the CSS max-width of the video element to ensure a responsive handling of width. The presence of the controls attribute dictates that the player will show controls ("play", "pause", etc.) The poster attribute is the image to show on the player before video playing starts.

The video tag encloses a series of source tags, which specify alternative video files from which the browser may choose, depending on the media types or codecs the browser supports.

In the example above, we offer browsers three options to pick from: .mp4, .webm, and .ogg versions of our video. Note that we're using open-source videos from the Video for Everybody site - we kindly appreciate their sharing.

Last, the content inside the video tag but outside the source tags is what users will see if their browser does not support the video tag.

Video Formats

Specifics about video file formats is a bit beyond the scope of this course. What we really need is a list of best formats to use and some information on how to convert to those formats.

Flash video, often the format in which embedded video is presented for desktop browsers, generally won't work on mobile devices. Instead, we'll concentrate on three formats:

Video File Formats
Format File Extension Notes
MPEG 4 .mp4 Based on Apple older QuickTime format; supported natively in all browsers
Ogg .ogv, .ogg Open source; unencumbered by patents; supported natively by Firefox >3.5, Opera >10.50, Chrome >3.0
WebM .webm New (2010) format; supported natively by Chrome, Firefox, and Opera

Thus, to publish video - specifically, video able to be viewed on different desktop and smartphone browsers - we:

  1. Take our original video file (the raw file from the camera).
  2. Convert it to each of the file formats above.
  3. Publish with the video tag.

The user sees a video player with their browser - whether it be Safari on an iPhone, Internet Explorer on a Windows PC desktop, or anything else - picking the video format that works best.

Controlling the Video through JavaScript

Open Video/Demos/video.html in a desktop browser and also, if possible, on a smartphone:

videocontrols

Code Sample:

Video/Demos/video.html
<!DOCTYPE html>
<html>
<head>
  <title>Jazz Calendar - Local Live Jazz Music Events</title>
  <link rel="stylesheet" type="text/css" href="css/reset.css" />
  <link rel="stylesheet" type="text/css" href="css/video.css" />
  <meta name="viewport" content="initial-scale=1.0, width=device-width" />
</head>

<body>
  <div id="container">
	<div id="main">
	  <header>
		<img src="images/logo.gif" alt="Jazz Calendar" />
		<h3 id="tagline">Local jazz info</h3>
	  </header>
	  <nav>
		<ul>
		  <li><a href="index.html">Home</a></li>
		  <li><a href="performances.html">Performances</a></li>
		  <li><a href="about.html">About</a></li>
		  <li><a href="contact.html">Contact</a></li>
		</ul>
	  </nav>
	  <div id="maincontent">
		  <article>
			<h2>Video</h2>
			<video width="480" height="270" controls poster="images/poster.png" 
			id="vid">
			<source type="video/mp4"
				src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
				</source>
			<source type="video/webm"
				src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm"></source>
			<source type="video/ogg"
				src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv"></source>
			<p>Your browser does not support the video tag</p>
			</video>

			<div><button onclick="document.getElementById('vid').play()">
				Play</button>  
			<button onclick="document.getElementById('vid').pause()">
				Pause</button>  
			<button onclick="document.getElementById('vid').volume+=0.1">
				Incr. Volume</button>
			<button onclick="document.getElementById('vid').volume-=0.1">
				Decr. Volume</button>
			</div>
		</article>
	</div>
	<aside id="sidebar">
		<h3>Signup</h3>
		<p>Become a member of Jazz Calendar now! <a href="#">Email us</a> to receive frequent notices on upcoming live shows.</p>
	</aside>
	<footer id="contactinfo">
		<p>Jazz Calendar
		<br />123 Fake Street, Sometown, USA | 555-123-4567</p>
	</footer>
	</div>
</div>
</body>
</html>

Code Explanation:

Note that the video is presented using the same code we reviewed above, with the "big_buck_bunny" video (in various formats) coming from an external website - of course, these might be video files hosted on your own server.

New to this example are four buttons allowing the user to play or pause the video and to increase or decrease the volume. We accomplish this with a mix of HTML and JavaScript. Each button tag has an onclick handler; when clicked, the play() or pause() function is called or the volume property incremented/decremented, depending on which button were clicked. We find the video element upon which to act by referencing its id (vid) through document.getElementById. Note that, as smartphones like the iPhone will open the video in a new video-player window, these buttons won't be terribly useful on an iPhone.

Note that, for some browsers, increasing the volume past "1.0" or below "0.0" (the limits for volume) causes a JavaScript console error; that is, if the user has increased the volume all the way up and then kept clicking the "Incr. Volume" button. For simplicity's sake, we have chosen to leave the code as-is.

Converting Video Formats

There exists a variety of free, open-source, and/or relatively inexpensive options for converting raw, from-the-camera video files into HTML5-appropriate file formats:

  • Miro Video Converter is a free, downloadable video converter for PC and Mac, converting to mp4, ogg, and webm formats.
  • video.online-convert.com/ offers free, online conversion from and to a variety of formats;
  • Firefogg is a free Firefox add-on, offering conversion to ogg and webm formats.
  • HandBrake is an open-source, GPL-licensed, multiplatform, multithreaded video transcoder, available for MacOS X, Linux and Windows.

A note: if taking video with an iPhone, be careful about trimming the video right from iPhoto: the modified version of the .mov file produced by iPhoto is a file that Miro was unable to edit - be sure to use the original raw video file

Further Reading

Dive Into HTML5 is a great resource for more information on HTML5 in general; Video on the Web is, in particular, an excellent source of information on creating, saving, and publishing video in HTML5 and, thus, for mobile viewing.

Soccer Video

Duration: 20 to 30 minutes.

In this exercise, you will add several videos to an interior page on the Pickup Soccer site. The following screenshots shows the page on an iPhone - the screen capture on the left is the top of the page and the screen capture on the right is the bottom of the page:

two iPhone screencaptures - solution to exercise

  1. Open Video/Exercises/video/index.html in your file editor.
  2. Find and embed a video from YouTube or Vimeo; test to make sure the video works on both desktop and mobile browsers; be sure to address flexible width for the embedded element, especially on mobile.
  3. Use the video tag to display the video (the "Big Buck Bunny" video) as a video player underneath the embedded video; use Video/Exercises/video/images/poster.png as the poster image for the video.
  4. Add buttons below the video tag to allow the user to play, pause, and control the volume for the video.
  5. Be sure to address the width of the video element, especially on mobile.
  6. Test your work in both desktop and mobile browsers.

Challenge:

If your current setup allows and you have access to raw video footage, convert your own video file to .mp4, .ogv, and .webm formats; use these files in the video tag for your solution. Use any of the options listed above - Handbrake, Miro, Firefogg, video.online-convert.com - or another video-conversion method. Be sure to test your video on a variety of devices.

Solution:

Video/Solutions/video/index.html
<!DOCTYPE html>
<html>
<head>
	<title>Soccer Pickup</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css" />
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</head>

<body>
	<div id="container">
	<header>
		<a href="index.html"><img src="images/logo.png" alt="Soccer Pickup" id="logo" /></a>
		<nav id="mainnav">
		<ul>
			<li><a href="index.html">Home</a></li>
			<li><a href="find-a-game.html">Find a Game</a></li>
			<li><a href="about.html">About</a></li>
			<li><a href="contact.html">Contact</a></li>
		</ul>
	</nav>
	</header>
	<div id="maincontent">
		<h1>Soccer Video</h1>
		<p>Embedded video:</p>
		<iframe src="http://player.vimeo.com/video/11828030?title=0&byline=0&portrait=0" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe><p><a href="http://vimeo.com/11828030">FIFA World Cup 2010 South Africa</a> from <a href="http://vimeo.com/cguinnness">Christopher Guinness</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
		<p>Hosted video:</p>
		<video width="720" height="405" controls poster="images/poster.png" id="vid">
			<source type="video/mp4" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></source>
			<source type="video/webm" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm"></source>
			<source type="video/ogg" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv"></source>
			<p>Your browser does not support the video tag</p>
		</video>

		<div>  
		<button onclick="document.getElementById('vid').play()">
				Play</button>
		<button onclick="document.getElementById('vid').pause()">
				Pause</button>
		<button onclick="document.getElementById('vid').volume+=0.1">
				Incr. Volume</button>  
		<button onclick="document.getElementById('vid').volume-=0.1">
				Decr. Volume</button>
		</div>
	</div>
	<aside id="sidebar">
		<h3>About Us</h3>
		<p>Soccer Pickup is your source for finding local recreational soccer games for adults. Leagues are great - but sometimes you just want to lace up your boots and find an informal game. Check back often to find a game near you!</p>
	</aside>
	<footer id="footerinfo">
		<p>Soccer Pickup: Your guide to finding a game.</p>
	</footer>
	</div>
</body>
</html>

Code Explanation:

We choose a FIFA 2010 World Cup video from Vimeo to embed, pasting the Vimeo-supplied iframe code into our page; we set the iframe element to have max-width: 100% in Video/Solutions/video/css/style.css.

We use the video tag to present the video, supplying three different versions (.mp4, .ogv, and .webm) of the same video clip to work on a wide variety of browsers. We use button tags, with an onclick handler, to allow the user to control the video on desktop browsers.