HTML <video> Tag

The <video> tag is a powerful element that creates a video player on a web page. This player support video playback directly inside the HTML page with media controls, such as, start, stop, volume, and others.

HTML Tag

Example

#

A <video> with media controls (start, stop, volume, etc).

<video width="320" controls>
  <source src="/media/movie.mp4" type="video/mp4">
</video>

Using <video>

The <video> tag creates a media player for video files directly onto a page.

This element supports three different video formats: MP4, WebM, and OGG.

The <video> element can also play audio files, but the <audio> tag provides a better user experience.

More Examples

A <video> element with two <source> tags. Each <source> specifies a video source file. The browser uses the first supported file format it finds.

<video width="320" height="240" controls>
  <source src="/media/movie.mp4" type="video/mp4">
  <source src="/media/movie.ogg" type="video/ogg">
</video>

Code Explanation

  • <video> - defines a video element
  • height - sets the height of the video player
  • width - sets the width of the video player
  • controls - enables multi-media controls (play, pause, track, sound, fullscreen, and more)
  • <source> - specifies the video file and media type

Attributes for the <video> tag

This table lists the <video> tag optional attributes.

Attribute Value Description
height pixels Sets the video player height in pixels.
width pixels Sets the video player width in pixels
src URL Defines the video file URL or path
controls no value Displays video controls (e.g. play, pause, volume).
autoplay no value Automatically plays the video as soon as it is ready.
id    identifier Defines a unique identifier for the video.
class    classnames Sets one or more CSS classes to be applied to the video.
style    CSS-styles Sets the style for the video.
data-*    value Defines additional data that can be used by JavaScript.
hidden    hidden Specifies whether the video is hidden.
title    text Sets a title that displays as a tooltip.
loop no value Plays the video again every time it's finished
muted no value Disables the audio output of the video.
poster URL Image to be shown before the video starts to play.
preload auto
metadata
none
Defines how the video will be loaded on page load.
crossorigin anonymous
use-credentials
Defines how the video handles cross-origin requests

For additional global attributes see our global attributes list.


Did you know?

Did you know?

A thumbnail image (or poster) before video play time

The poster attribute on a <video> tag adds a poster or image preview.
This preview image has a red 'PLAYING SOON' message.

<video poster="/img/html/playing-soon.png"
       width="320" height="240" controls>
  <source src="/media/movie.mp4" type="video/mp4">
  <source src="/media/movie.ogg" type="video/ogg">
</video>

Media Types

These are the media types (formerly MIME types) that are supported by the <video> element.

Format Media Type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

Media Tags

The <video> tag is part of a group of tags that create multi-media experiences on the web. This group is referred to as the Media tag group. Together, these tags allow you to create powerful multi-media solutions.

Here is a list of media tags.

Element Description
<audio> Creates a player for sound such as music, sound effects, or others
<video> Creates a video player on a page
<source> Adds a media source for a <video>, <audio>, or <picture>
<track> Adds a text track, such as, subtitles and captions, to the media
<embed> Creates a container for an external resource
<iframe> Creates a frame in which another web page can be embedded
<svg> Displays an scalable vector image
<canvas> Creates a graphics container where JavaScript can draw
<img> Displays an image
<area> Specifies a map area for an image
<map> Defines a client-side image map, i.e. an image with clickable areas
<figure> Displays self-contained content, usually an image
<figcaption> Adds a caption to a <figure> (image) element

Browser support

Here is when <video> support started for each browser:

Chrome
4.0 Jan 2010
Firefox
3.5 Jun 2009
IE/Edge
9.0 Mar 2011
Opera
10.5 Mar 2010
Safari
4.0 Jun 2009

You may also like

Video courtesy: Blender Foundation, www.bigbuckbunny.org

Guides