HTML

Last Updated: 9/18/2022

Video and Audio Elements

Video

  • Used to show video on the webpage
  • Supported video formats: MP4, WebM, and Ogg.

Basic Syntax

<video src="movie.mp4">
</video>

Display text in unsupported browsers

The text between the tags will be displayed in browsers that do not support the element.

<video src="movie.mp4" controls autoplay loop>
Your browser doesn't support video
</video>

Source element

  • Allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.
<video>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
</video>

Important Attributes

  • controls A boolean attribute. Used to adds video controls, like play, pause, and volume.
  • autoplay A boolean attribute. Used to start video automatically when the page loads.
  • loop A boolean attribute. Used to automatically seek back to the start upon reaching the end of the video.
  • muted: A boolean attribute. Audio will be initially silenced
<video src="movie.mp4" controls autoplay loop>
</video>

Track

  • Specifies text tracks for <audio> or <video> elements.
  • Tracks are formatted in WebVTT format (.vtt files).
  • src: Required. Specifies the URL of the track file
  • kind: Specifies the kind of text track. Supported values are captions, subtitles, chapters, descriptions, metadata
  • label: Specifies the title of the text track
  • default: Specifies the default track
<video controls>
  <source src="video/sintel-short.mp4" type="video/mp4" />
  <source src="video/sintel-short.webm" type="video/webm" />
  <track
    label="English"
    kind="subtitles"
    srclang="en"
    src="captions/vtt/sintel-en.vtt"
    default />
  <track
    label="Deutsch"
    kind="subtitles"
    srclang="de"
    src="captions/vtt/sintel-de.vtt" />
  <track
    label="Español"
    kind="subtitles"
    srclang="es"
    src="captions/vtt/sintel-es.vtt" />
</video>

Audio

  • Used to play an audio file on a web page.
  • Can use the attributes controls, autoplay, loop
  • Use source element to specify alternative files which the browser may choose from
  • Use track element to specify text tracks

Basic Syntax

<audio controls src="music.mp3></audio>

Source Element

<audio controls>
	<source src="music.mp3" type="audio/mpeg">
	<source src="music.ogg" type="audio/ogg">
	Your browser does not support the audio element.
</audio>
Previous
Next