การใส่ VDO ด้วย HTML5

Introduction

The video tag is one of those HTML5 features that gets a lot of attention. Often presented as an alternative to flash in the media, the video tag actually goes beyond that. Although it's recently joined the rest of the ubiquitous HTML tags, its capabilities and support across browsers have increased at an amazing speed. As you will see in this tutorial its main advantage is the natural integration with the other layers of the web development stack such as CSS and JavaScript as well as the other HTML tags.

This tutorial will give you a basic understanding of the video tag and also show various examples of different integrations with other HTML5 features, such as <canvas>.

1. The Markup

To make HTML video work in your site, the following lines should be sufficient.

<video>
  <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>

This snippet uses the <source> tag which lets you include multiple formats as fallback types in case the user's browser doesn't support one of them. More about this in the next section.

You can also use a single video format which makes the syntax very similar to the image tag. This syntax will be the most used one in the near future when all browsers support one common video format.

<video src="movie.webm"></video>

For now, we'll focus on the former case which is currently more common. The most important thing to remember is to make sure your server is serving video files with the correct MIME type in the Content-Type header. If not, videos might not work properly, even if they were working on a local copy of your site. In an Apache httpd.conf it's enough by adding these lines:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

If your app is being served in a Google App Engine app then you would need to add something like the following to app.yaml (one for each format):

- url: /(.*.ogv)
  static_files: videos_folder/1
  mime_type: video/ogg
  upload: videos_folder/(.*.ogv)

In order to improve the client side performance it's important to not forget to specify the type attribute in the source tags when dealing with multiple formats. This way, the browser can decide which format can download and play. In other words, it won't download the ones it can't play in order to increase the performance of the site.

2. Video Formats

Think of a video format as a zip file which contains the encoded video stream and audio stream. The three formats you should care about for the web are (webm, mp4 and ogv):

• .mp4 = H.264 + AAC
• .ogg/.ogv = Theora + Vorbis
• .webm = VP8 + Vorbis

The speed of evolution of the video tag is really encouraging. Just a year ago the only browser that supported the video tag in its stable version was Safari. Now, all modern browsers support HTML5 video, including the upcoming IE9. As for the codecs, Firefox, Chrome and Opera have agreed to include the support for .webm as the common video format through theWebM Project. Internet Explorer will support it too if the codec is installed on the computer (we hope they don't make this a requirement in the future).

Note: At the time of writing, Safari does not support the .webm format.

Here you can see how your browser can only render one or two of the three formats we mentioned (you should feel lucky if you see the three of them!):

At the time of this writing (August 2010) this is the snippet that has the safest combination of formats so you can be sure your video is displayed in all browsers:

<video>
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
  Video tag not supported. Download the video <a href="movie.webm">here</a>.
<video>

Note: Because of a bug in the iPad you will need to put .mp4 as the first option if you want the video to be loaded in that device. That is, until the bug is fixed.

As I mentioned before, almost all browser vendors agreed to support a common video format. So, in less than a year from now, here is the code which will most likely be used across the web:

<video>
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  Video tag not supported. Download the video <a href="movie.webm">here</a>.
<video>

One of the main concerns about using the .mp4 format is that its video codec (h.264) is not an open codec and the licenses that a company would have to pay for using it are very complex to understand. There's more information about this format in this video chapter.

Another issue with the .mp4 format is that the type attribute needs to be more specific than other formats depending on the profile used to encode the video. Although the most common is "avc1.42E01E, mp4a.40.2", you should double check thisprofile list to be sure.

Even though Microsoft announced the support of the video tag, as well as other HTML5 elements, in the upcoming IE version (i.e. IE9), its user migration rate to newer versions, is lower than the other major browsers. Hence the following section:

3. What happens with current IE versions that don't support the video tag?

There are two plugins that can be used as possible solutions:

Chrome Frame

The advantage of using the Chrome Frame plugin is that, once it's installed, Internet Explorer will have the support for the latest HTML, JavaScript and CSS standard features that older versions of IE don't support. This plugin has an added benefit for web developers, which is that it allows them to code applications with modern web features without leaving the IE users behind. Just think the amount of time that a web developer saves without having to code hacks and workarounds for IE.

Flash fallback

You can also use flash as a fallback case. Depending on the format of your video you might need to encode it again to a compatible format for the flash player. The good news is that Adobe has committed to support the webm format in their flash player although that time timeline is still not clear. The biggest drawback of this solution compared to the Chrome Frame plugin is that you will get the flash player as the degraded version of what ever custom UI or enhanced features you have built for your video tag. The details of this technique can be seen in the Quick Guide to Implementing the HTML5 Audio tutorial.

4. Encode Your Videos

If you need to encode your existing videos to the formats we mentioned in the previous section you can use Miro Converter both for Windows and Mac to easily get the format you need. The program doesn't allow you to tweak many settings but comes with the most common outputs for the web, including the three formats we use in this tutorial. Under the hood, this software is actually a wrapper for ffmpeg and ffmpeg2theora which you can use in both Windows, Mac and Linux from the command line and specify more parameters. Read more about this tool at divintohtml5.org.

5. The Fun Part

As we said in the introduction the main advantage of the video tag being a member of the HTML5 family, is the integration with the other layers of web development stack. In the following examples we'll give you an overview of what's possible to do with it.

5.1. Video + other HTML

All the common HTML attributes can now be used in the video player. For instance, in the following snippet we are usingtabindex to make the player keyboard accessible. There are new attributes that can be used in the video tag which are also common to the audio tag such as loop and autoplay, both are self explanatory. The attribute poster indicates what image will be shown while the video is initially loading and finally, controls is used to indicate that instead of building our custom controls we want the browser to render ones automatically for us. There's also a preload attribute we can use to download the video in the background as soon as the page loads, even if it hasn't started playing.

<video poster="star.png" autoplay loop controls tabindex="0">
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>

The full level of integration of the video tag as a native browser element deprecates some issues you might have had in the past with third party embedded players such as drop down menus and iframes overlaying on the player or weird layout behavior when the other HTML elements surrounding the video were dynamically resized.

Since the video is not treated as an embedded foreign object, there are some other benefits that affect the user experience. For instance, even if the focus is on the player itself actions like page scrolling or keyboard key strokes will be completely functional.

Note: If you are trying to write polyglot documents to keep the XHTML syntax in the context of HTML5 then the attributes in your code should look like this:

<video poster="star.png" autoplay="autoplay" loop="loop" controls="controls" tabindex="0">
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>

5.2. Video + JS

The video tag comes with a set of attributes and methods which let you have a fine control of your video from your JS code. You can see them in real time in the following sample.

As any other HTML element you can attach common events to the video tag such as drag events, mouse events, focus events, etc. But the video element comes with a bunch of new events to detect (and control) when the video is playing, paused or finished. Since loading a video resource can have many caveats there are many events to have a fine control of the loading process, both at network level (loadstart, progress, suspend, abort, error, emptied, stalled) and at buffering level (loadedmetadata, loadeddata, waiting, playing, canplay, canplaythrough).

At its simplest level you can attach the canplay event to start doing stuff with the video.

video.addEventListener('canplay', function(e) {
  this.volume = 0.4;
  this.currentTime = 10;
  this.play();
}, false);

There are several custom player controls available on the internet right now. In the following sample we are using some elements to control two videos simultaneously and also emulate the fast forward effect with the playbackRate attribute. Use the slider to toggle the volume between the videos.

  

5.3. Video + CSS

As you may have guessed, the video tag can be styled using traditional CSS (e.g. border, opacity, etc) since it is a first-class citizen in the DOM. But the cool thing is that you can also style it with the latest CSS3 properties like reflections, masks, gradients, transforms, transitions and animations.

Hover over the next video to see some of them in action.