Building the User Interface by Using HTML5: Text, Graphics ... - server

46 | Lesson 2compressing data. Compression reduces the amount of space needed to store a file, and itreduces the bandwidth needed to transmit the file. Video compression reduces the size ofvideo images while retaining the highest quality video with the minimum bit rate. All of thismakes for better performance.In a nutshell, the main video formats along with codecs (for the last two) are:• MP4 or H.264• OGG + Theora with Vorbis audio• WebM + VP8A best practice is to use the type attribute to specify the video format. You should alsouse the codecs attribute to specify the codec(s), if applicable. Sample markup is shownas follows:LICENSED PRODUCT NOT FOR RESALEThe tag is being used as content of the video element so that the type attributecan be set and so that the multiple format option is available.Not all video formats are supported by all browsers, although MP4/H.264 is the mostwidely used by both Web browsers and mobile devices. (The HTML5 Video Web page athttp://www.w3schools.com/html5/html5_video.asp displays a table showing which videoformats work for what browser. The table is updated regularly.) To help make your videoviewable by the majority of browsers and devices, you can use the source attribute toinclude multiple formats in your markup. This example shows the same video available intwo formats, and the OGG format specifies codecs:WORK WITH THE VIDEO ELEMENTGET READY. To work with the HTML5 video element, perform the following steps:1. Locate a video clip, and an image file to use as a poster. If you don’t have a videoclip, search for a public domain MP4 file on the Web and download it. Save the videoand image files to your HTML5 folder.2. In your editing tool, create an HTML file with the following markup. Substituteappropriate file names for your image file and video clip. Change the type attribute,if necessary, and replace sample.mp4 with the name of your video file.