HTML5 video has the same syntax, and the same issues, as the
<audio> tag: codec support changes in different browsers, and the need for a fallback solution for browsers that do not support the element, such as IE.
The basic structure is the same; the
<video> tag can use the same
preload attributes as the
<audio> tag. The only difference is that unlike audio, video has a specific size.
height for the video should be entered with CSS:
<video controls style="width: 50%; height: auto;"> <source src="sintel.mp4" type="video/mpeg"> <source src="sintel.webm" type="video/webm" > </video>
You can also use the
poster attribute to point the
<video> tag to an image that acts as a placeholder for the movie (by default, the
<video> tag will only show the first frame of the file as its default, which may well be black, or may otherwise misrepresentation of the film as a whole):
<video controls poster="atlanta-placeholder.jpg" style="width: 50%; height: auto;"> <source src="atlanta.mp4" type="video/mpeg" > <source src="atlanta.webm" type="video/webm" > <video>
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.