Similar to the <audio> element, the <video> element allows you to embed videos in webpages.
The source attribute (src="") provides a link to the url for the video.
The poster="" attribute should always be supplied with the <video> element. This attribute takes a URL as its value. This URL should point to an image that is displayed in place of the video until the end-user tells the browser to play the video.
NOTE: The image should be the same width/height ratio as the video element.
As with the <audio> element, this attribute tells the browser what to do when the page loads. It can have one of three values:
none - The browser should not load the video until the user presses play.auto (default) - The browser should download the video when the page loads.metadata - The browser should just collect information such as the size, first frame, track list, and duration.The width & height attributes specify the size of the player in pixels.
controls - When the controls attribute is supplied it indicates the browser should supply its own controls for playback.
When used, this attribute specifies that the file should play automatically.
This tells the browser whether or not to loop the video.
As with many HTML5 elements and the <audio> element, not all browsers support the same format. Therefore, even with HTML5 you need to provide your video in multiple formats.
As with the <audio> element, use the <video> element to specify the video source. This would be used in-place of the src="" attribute in the video element.
You can use multiple source elements, which specifies to the browser the video is available in multiple formats. (NOTE: Due to a bug on the iPad, you should provide the MP4 video as the first format.)
As with the <audio> element, you should include a <p> element “fallback” that will be displayed if the browser does not support the video element or the format of video used. The browser will display whatever is between the opening and closing video tags.
Within the source element, the src="" attribute specifies the URL.
Use the type="" attribute to tell the browser what format the video is in. (i.e. video/H264, video/mp4) Otherwise, it will download some of the video to see if it can play the file, find that it cannot, and then try the next one until it has exhausted all options or found a valid file format. (This takes time and bandwidth!!!)
The codec that was used to encode the video is supplied within the type attribute, following the video file type, separated by a semicolon (;) . (i.e. type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' NOTE: The use of double and single quotes to delineate.)
<video poster="imgs/puppy.jpg" width="400" height="320" preload controls loop>
<source src="media/puppy.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
<source src="media/puppy.webm" type='video/webm;codecs="vp8, vorbis"' />
<p>A video of a puppy playing in the snow</p>
</video>