The video element of HTML5 allows us to embed video content into websites in a standard manner. Before HTML5 videos were played (embedded) through a third party, let's say Flash, YouTube, etc... or more recently through an <object> tag.

Syntax:

<video></video>

Attributes:

  • src - Provides the path of the video file in form of URL.
  • type - Defines MIME-type of the media source.
  • autoplay - Tells a browser whether to start playing the video as soon as it loads or not; value is Boolean.
  • controls - If enabled, provides a browser default video controls; a Boolean value.
  • muted - A weird attribute that may be used to mute an automatic play during loading or other states; not well supported by browsers.
  • loop - Makes video play in an infinite loop (repentance); a Boolean value.
  • poster - If there is no video data available, this attribute will replace a first frame of the video (if available) with an image of your choice; a value must be a URL source of the image.
  • preload - Suggests a browser how to preload a video; ultimately it depends on browser how to do it. These values are allowed:
    • metadata - Allows preloading metadata of the video source
    • auto - Allows browser to decide what data will be preloaded (metadata, entire video or nothing)
    • none - If the user is not expected to view the video clip, preloading may be prevented
  • width - Defines width of the video element in pixels
  • height - Defines height of the video element in pixels
  • global attributes
  • event attributes

These media types are currently supported by HTML5:

  • MP4 or MPEG-4 (.mp4); MIME-type is video/mp4
  • WebM (.webm); MIME-type is video/webm
  • Ogg (.ogg); MIME-type is video/ogg

Example

Example of a basic usage of video element in HTML5:

 

›› go to examples ››