{"id":4190,"date":"2010-02-25T01:32:20","date_gmt":"2010-02-25T00:32:20","guid":{"rendered":"http:\/\/www.chipwreck.de\/blog\/?p=4190"},"modified":"2018-06-05T20:33:00","modified_gmt":"2018-06-05T18:33:00","slug":"html-5-video-tag-and-attributes","status":"publish","type":"post","link":"https:\/\/www.chipwreck.de\/blog\/2010\/02\/25\/html-5-video-tag-and-attributes\/","title":{"rendered":"HTML 5 Video \u2013 Tag and Attributes"},"content":{"rendered":"

This post is about the basic use of the HTML 5 video-tag and its attributes, the next one will be talking about events, DOM attributes and how to control video via javascript.<\/p>\n

[Update 8 Dec 2011: Added .webm-codec]<\/em><\/p>\n

A full-blown HTML 5 video-tag looks like this:<\/p>\n

\r\n<video width=\"320px\" height=\"240px\" autobuffer=\"autobuffer\" autoplay=\"autoplay\" loop=\"loop\" controls=\"controls\" poster=\"\/_img\/videostill.jpg\">\r\n    <source src='video.mp4' type='video\/mp4; codecs=\"amp4v.20.8, mp4a.40.2\"'>\r\n    <source src='video.mpg' type='video\/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"'>\r\n    <source src='video.ogv' type='video\/ogg; codecs=\"theora, vorbis\"'>\r\n<\/video>\r\n<\/pre>\n
Or in its shortest variant:<\/p>\n
\r\n<video src=\"video.mp4\"><\/video>\r\n<\/pre>\n
The video attributes:<\/h4>\n
width<\/kbd> and height:<\/kbd> define the dimensions of the playback-window, if not set the browser tries to use the dimensions from the video.<\/p>\n
loop:<\/kbd> sets the video to play in a loop.<\/p>\n
autoplay:<\/kbd> starts the video immediately.<\/p>\n
controls:<\/kbd> tells the browser to display a set of controls for playback, seeking and volume. Which controls these are and how they look depends on the browser.<\/p>\n
autobuffer:<\/kbd> Automatically start buffering (loading) the video, so it’s first loaded if you start playing. Currently Chrome and Safari ignore this attribute, so the video is being buffered on page load.<\/p>\n
poster:<\/kbd> Here you can supply an image which will be displayed while the movie is not loaded yet.<\/p>\n
Controls display:<\/h4>\n
Here’s how the different browsers (Mac) in their current version render the video controls:<\/p>\n
\"Display<\/p>\n
One can of course choose to disable these controls and provide your own ones – more about this in the next post.<\/p>\n
The source tag:<\/h4>\n
You can use more than one video source to provide the video in different formats (read: codecs). Now the browser plays the first one it’s able to play. Since there is no single video codec all (useful) browser currently can handle this is necessary at the moment.<\/p>\n
Notice the two types of quotes in this tag: The source tag has two attributes, src<\/kbd> and type<\/kbd>, and the type is specified in two parts: MIME-type and a codec-definition:<\/p>\n
src='video.mp4' type='video\/mp4; codecs=\"amp4v.20.8, mp4a.40.2\"'<\/code><\/p>\n
Firefox currently only plays ogg\/theora, Safari does mpeg\/H.264 and Chrome can play both formats.<\/p>\n
Specifying video codecs<\/h4>\n
The codec specification itself is somewhat complicated, here a short overview which codecs are currently supported and how to specify them:<\/p>\n