HTML5 Video Tutorial

By Xah Lee. Date: . Last updated: .

HTML5 video example with webm video format

<video src="i/I-15bis.ogg.360p.webm" controls></video>

Here's how your browser shows it:

video source

HTML5 video example with ogg video format

<video src="i/I-15bis.ogg.ogx" controls></video>

Here's how your browser shows it:

video source

Specifying Multiple Video Formats

If you have multiple video formats, you can use the “source” tag. Browser will pick the one it understands or most suitable. Example:

<video controls>
  <source src="mymovie.ogg" type="video/ogg">
  <source src="mymovie.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

HTML5 Video Tag Attributes

Following are optional attributes.

HTML5 Video Tag Optional Attributes
AttributePossible ValuesComment
preloadnone, metadata, auto
controlsDoes not take any value
autoplayDoes not take any value
loopDoes not take any value
widthintegerin pixels
heightintegerin pixels
posterFor example: … poster="image.jpg" …

Browser Support

As of , all major browsers support the video tag for years. But, browsers may not support the video format.

As of , the supported video formats is not specified. Usually the supported video formats are QuickTime, Matroska, Ogg, and the video codec supported are usually: H.264, vp8.

For detail about browser support, see:

See also: Intro to Video Codecs

HTML5 Audio

See: HTML5 Audio Tag.

Reference

Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

Ask me question on patreon