MakeW3web

Video and Audio Elements

The `<video>` and `<audio>` elements in HTML5 allow you to embed video and audio content directly into your web pages without the need for external plugins, such as Flash. These elements make it easier to incorporate multimedia content in a native and accessible manner.

  1. `<video>`: The `<video>` element is used to embed video content in a web page. You can specify multiple sources in different formats to ensure compatibility across various browsers.

Example:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

The `controls` attribute provides native playback controls, such as play, pause, and volume control. The `<source>` elements specify different video formats, and the text inside the `<video>` element is displayed if the browser does not support the `<video>` element.

  1. `<audio>`: The `<audio>` element is used to embed audio content in a web page. Similar to the `<video>` element, you can provide multiple sources in different formats for cross-browser compatibility.

Example:

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

The `controls` attribute provides native playback controls for the audio. The `<source>` elements specify different audio formats, and the text inside the `<audio>` element is displayed if the browser does not support the `<audio>` element.

Both `<video>` and `<audio>` elements have additional attributes and features, such as `autoplay`, `loop`, `preload`, and `muted`. You can use JavaScript to further control playback and interact with these elements. Using the `<video>` and `<audio>` elements makes it easier to include multimedia content in your web pages while ensuring a more accessible and native experience for users.

Was this page helpful?