Audio And Video In HTML

Audio And Video In HTML

Adding video and audio in html page

Introduction

There was no video or audio tag support in early HTML versions. People used object or embed tags with extensions like Flash, Java Applet, etc for adding videos on their web pages.

HTML5 introduced tags like audio, video, source, etc. for adding multi-media support for websites.

<Video>

It allows embedding a video in an HTML page by adding the source and type of the video file.

Syntax:

<video src="./assets/never-gonna-give-you-up.mp4" type="video/mp4">

One can also add multiple format videos as a fallback condition if the end-users browser does not support that video format, using a source tag so that browser can load the video format that it supports.

Example:

<video>
  <source src="./assets/never-gonna-give-you-up.webm" type="video/webm" />
  <source src="./assets/never-gonna-give-you-up.mp4" type="video/mp4" />
  <p>
    Your browser doesn't support HTML video. Here is a
    <a href="https://youtu.be/dQw4w9WgXcQ">link to the video</a> instead.
  </p>
</video>

Attributes:

It provides a wide range of attributes for different use cases, a few of them are listed below, and their definitions are from official MDN documentation.

  • autoplay: boolean value default set to false, for playing video back as soon as it can do so without stopping.

  • controls: If this attribute is present, the browser will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback

  • muted: Its default value is false, meaning that the audio will be played when the video is played

  • poster: A URL for an image to be shown while the video is downloading. If this attribute isn't specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame.

For example, you can play on the MDN's video tag page they have a great example for that.

<Audio>

Used for embedding sound content on the HMTL document.

Syntax:

<audio src="./assets/never-gonna-give-you-up.mp3" type="audio/mpeg">

Just like video tags, all browsers do not support all types of audio encoding so for wide-range support we add multiple source tags in the audio tag.

Example:

<audio controls>
  <source src="./assets/never-gonna-give-you-up.mp3" type="audio/mpeg" />
  <source src="./assets/never-gonna-give-you-up.ogg" type="audio/ogg" />
  <p>
    Download <a href="./assets/never-gonna-give-you-up.mp3">MP3</a> or
    <a href="./assets/never-gonna-give-you-up.ogg">OGG</a> audio.
  </p>
</audio>

Brower will load the first one that it supports.

Attributes:

Audio tags have very few attributes, and their working is the same as that of the video tag. They are:

  • autoplay: boolean value default set to false, for playing audio back as soon as it can do so without stopping.

  • controls: If this attribute is present, the browser will offer controls to allow the user to control audio playback, including volume, seeking, and pause/resume playback.

  • loop: Boolean value default set to false, the audio player will automatically seek back to the start upon reaching the end of the audio.

  • muted: A Boolean attribute that indicates whether the audio will be initially silenced. Its default value is false.

  • preload: It can have 4 values (none, auto or empty string both are the same, metadata). The default value is different for each browser. The spec advises it to be set to metadata. To read about 4 values and their effect go to MDN documentation.

For more in-depth detail of the audio tag read more on Mozilla Developer Network (MDN) Web documentation.

Thanks for reading.

Did you find this article valuable?

Support Anuj Mistry by becoming a sponsor. Any amount is appreciated!