HTML5 Multimedia

Before HTML5, playing audio or video on web pages usually required third-party plugins like Adobe Flash. HTML5 completely changed this by introducing <audio> and <video> elements, making multimedia a native part of the web platform.

The <video> Element

The <video> element is used to embed video content in web pages.

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

• src: Specifies the path to the video file.
• width / height: Sets the player dimensions.
• controls: This boolean attribute shows standard video controls to users, such as play/pause buttons, volume control, progress bar, etc. It's strongly recommended to always include this attribute.
• autoplay: If set, the video will automatically play after loading. Note: Most modern browsers restrict or block autoplaying videos with sound to improve user experience. Usually needs to be used with the muted attribute.
• muted: Plays the video muted.
• loop: If set, the video will automatically restart after ending.
• poster: Specifies an image to display while the video is loading or before the user clicks play.

The <audio> Element

The <audio> element is used to embed audio content and is used very similarly to <video>.

<audio src="music.mp3" controls>
  Your browser does not support the Audio tag.
</audio>

It also supports controls, autoplay, muted, loop, and other attributes.

Using <source> Elements to Provide Multiple Formats

Different browsers may support different video and audio formats. To ensure the best compatibility, you can use <source> elements to provide multiple media files in different formats. The browser will automatically select the first format it supports to play.

A common video format combination is MP4, WebM, and Ogg.

<video controls width="600">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogv" type="video/ogg">
  Your browser does not support the Video tag.
</video>

A common audio format combination is MP3, Ogg, and WAV.

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

By doing this, you can greatly improve the availability of your multimedia content across different devices and browsers.