HTML5 - Learn HTML5 and JavaScript for Android - page 69

New to the HTML5 spec is also the support of media queries within video
sources. This can ensure that if you are using a tablet device, you can get a
much higher resolution video delivered to you without having to choose the
quality of the media you wish to view. If you are on a mobile handset, you will
get video that is optimized for your handset with a smaller file size so that it
doesn't consume all of your data allowance.
NOTE: Video media queries exists within the HTML5 spec, but it
doesn't seem to be supported by any browsers yet.
Embedding your video in HTML5 is relatively simple. You use the video tag and
specify the width and height attributes of the video. You can then specify the
poster frame for the video. The poster frame is a single still from the video that
you can use to display to the user prior to them clicking on the play button.
Create a new folder called tutorials in Aptana, and within that create a folder
called video. This folder will be used for this exercise. Within the video folder,
create a folder called media. Copy the video and poster image files you have
encoded and downloaded from Bits on the Run to the media folder and rename
them as follows.
 video.webm
 video.mp4
 poster.jpg
Create a new file in the video folder called index.html . Your folder structure
should look similar to the following:
 tutorials
 video
 media
 video.webm
 video.mp4
 poster.jpg
 index.html
Open index.html in Aptana and enter the HTML from Listing 3-23.