HTML Video Tag

By Xah Lee. Date: . Last updated: .

Here's a video tag:

<video src="http://xahmusic.org/music/i/chinese_girl_on_bmw_sing_west_lake_love_song.mp4" controls></video>

Here's how your browser shows it:

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>

Video Tag Attributes

Optional attributes.

preload
none, metadata, auto
controls
Show control panel. • Does not take any value
autoplay
Start to play automatically. • Does not take any value
loop
Loop playback. • Does not take any value
width
value is integer, in pixels
height
value is integer, in pixels
poster
e.g. … poster="image.jpg" …

Video Formats Browser Support

video format support 2018-11-14
format/browserChromeSafariFirefoxEdge
.mp4yesyesyesyes
.webmyesnoyesyes
.mkvyesnonoyes

HTML Video Audio

  1. HTML Video Tag
  2. HTML Audio Tag
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Reference
  5. DOM
  6. SVG
  7. Web Dev Blog