Simply stated, there are two primary media elements for HTML5, both of which are absurdly easy to use. The video element is named , and the audio element is named .
Unlike audio, which doesn’t actually require much (or any) space on the screen, video requires an onscreen frame, as well as more sophisticated and more numerous controls. That’s why although the two markup elements are similar, video comes with considerably more baggage, even though the basic structure of the element remains the same:
<video src="video.ogg" <i>controls</i>>Alternatives</video>
Here the src attribute points to the video file you’d like to have played back. It specifies the name of the video object file for playback and must be a valid URI. Example: src="video.ogg".
The list of control attributes for video is considerably longer and a bit more complicated, too:
autoplay: Tells the browser to start playing video as soon as the object file is loaded. Examples: autoplay or autoplay="autoplay".
controls: Tells the browser to display an onscreen widget to control video playback (usually with Pause/Play buttons, a progress bar, and volume controls). Examples: controls or controls="controls".
height: Sets the height, in pixels, of the box inside which the video will display. Example: height="480".
loop: Tells the browser to go back to the beginning and keep playing when it gets to the end of the object file. Examples: loop or loop="loop".
mediagroup: Used for synchronizing playback of multiple videos or media elements (such as a sign language track or an SAP track). Takes a string value, where all items with the same mediagroup value are treated together as members of that group. Example: mediagroup="movie".
muted: Sets audio output state for playback; if present, audio is muted when playback begins. Use this when loud or startling audio might otherwise bother page visitors so that they can elect to turn on audio if they like. Examples: muted or muted="muted".
poster: Specifies an image to display while the video file is not available (hasn’t loaded yet). Example: poster="poster.jpg".
preload: Tells the browser whether it should preload the object file, and if so how it should be preloaded. Possible values include:
none: Does not load any part of the video file when the page loads.
metadata: Loads only the video metadata when the page loads. It also sets up playback but doesn’t have data loaded yet.
auto: Loads entire video file when the page loads.
The preload attribute is ignored if autoplay is present.
width: Sets the width, in pixels, of the box inside which the video displays. Example: width="640".
The following markup displays a video snippet from Wikipedia:
<video controls poster="poster.png" src="http://upload.wikimedia.org/wikipedia/commons/5/5c/Cat.ogg" width="640" height="480"> <source src="cat.webm" type="video/webm"> <source src="cat.mp4" type="video/mp4"> <p> Browser does not support HTML5 video; alternate playback provided.</p> </video>
The figure shows what this page inside a properly constructed HTML file with some additional text and information looks like onscreen in Chrome, just after the video concludes playback.”? The control bar for video is nearly identical to the control bar for audio.
The difference is that the video control bar has a frame control at the far right. Please note also that alternatives for video playback work the same as they do for audio feedback, so you can stack your preferred player first for HTML5 browsers to use if they can, followed by other players in whatever order you prefer.
