HTML Audio and Video

HTML Audio

HTML includes elements that you can use to add sound to your pages (music, voice recordings, etc). The audio and source elements work together to load an audio file in a supported format for the viewer to listen to. Both elements having attribute options that allow for customizing the appearance and functionality of the player.

The audio Element and its Attributes

The outermost tag pair you’ll use when adding an audio element to your page is the <audio></audio> tag pair. These can contain multiple source elements, each of a different format that may be needed for full support in any browser. You can also add plain text inside of the pair that will display in a case where the video doesn’t load.

<audio controls>
  This content is not supported by your browser
</audio>

audio Element Attributes

All of the attributes available for the audio tag pair are Boolean attributes. This means that if the word is present in the tag, that option for the audio player is enabled. You can add more than one of the attributes to the audio element at a time. Attribute options are listed below.

  • autoplay – Boolean attribute that makes the audio begin playing automatically on page load.
    • This is a bad practice for accessibility. Don’t autoplay audio or video.
      <audio autoplay>
       This content is not supported by your browser
      </audio>
  • controls – Boolean attribute that displays audio controls for the user to play, pause, and control the volume.
    • It’s a good practice to allow your user to control any audio or video you do include on your site.
      <audio controls>
       This content is not supported by your browser
      </audio>
  • loop – Boolean attribute that replays the audio upon reaching the end of the audio.
    • Allow your users to control whether or not anything plays and avoid default settings being “on.”
      <audio loop>
       This content is not supported by your browser
      </audio>
  • muted – Boolean attribute that initially mutes the audio.
    • Allow your users to control whether or not anything plays and avoid default settings being “on.”
      <audio muted>
       This content is not supported by your browser
      </audio>

The source Element and its Attributes

There can be as many source elements inside of each pair of audio tags as you need. Each source element should have a single src attribute that is an absolute or relative link to the audio file. The sources will be read from top to bottom, so you’ll want to ensure that the files are added in order from most browser support to least browser support.

<audio controls>
  <source src="audio/jingle.mp3">
  <source src="audio/jingle.wav">
  This content is not supported by your browser
</audio>

source Element Attributes

The source element has one required attribute: the src attribute, which is used to give a location for the audio source file. This can be a relative or absolute link. 

  • src – text attribute used to link to the audio source file. Should include the file type.
    • <audio controls>
      <source src="audio/jingle.mp3">
      <source src="audio/jingle.wav">
        This content is not supported by your browser
      </audio>

Including a Message to Display if No Supported Format is Found

Even when you do your best, there will be times when your file is not supported or cannot be loaded by the browser. To make the issue clear to the user, you can add a plain text message inside of the audio tag pair, after all of the source elements. This text will display in place of the player in the way that the alt text displays for an image that doesn’t load.

<audio controls>
  <source src="audio/jingle.mp3">
  <source src="audio/jingle.wav">
  This content is not supported by your browser
</audio>

HTML Video

With the video element in HTML, you can add videos to your pages. With a link to the original file, HTML uses the video tag along with the source element to add video in a supported format to your page, with both tags having attribute options that allow for customizing the appearance and functionality of the player.

The video Element and Its Attributes

The outermost tag pair you’ll use when adding a video element to your page is the <video></video> tag pair. These can contain multiple source elements, each of a different format that may be needed for full support in any browser. 

<video controls width="500">
  <source src="video/commercial.mp4">
  <source src="video/commercial.webm">
</video>

video Element Attributes

All of the attributes available for the video tag pair except one are Boolean attributes. This means that if the word is present in the tag, that option for the video player is enabled. You can add more than one of the attributes to the video element at a time. The attribute that is not a Boolean value is the width attribute, which is used like the same attribute on an image. Attribute options are listed below.

  • autoplay – Boolean attribute that makes the video begin playing automatically on page load.
    • This is a bad practice for accessibility. Don’t autoplay audio or video.
      <video autoplay width="500">
      <source src="video/commercial.mp4">
      <source src="video/commercial.webm">
      </video>
  • controls – Boolean attribute that displays video controls for the user to play, pause, and control the volume.
    • It’s a good practice to allow your user to control any audio or video you do include on your site.
      <video controls width="500">
      <source src="video/commercial.mp4">
      <source src="video/commercial.webm">
      </video>
  • loop – Boolean attribute that replays upon reaching the end of the video.
    • Allow your users to control whether or not anything plays and avoid default settings being “on.”
      <video loop width="500">
      <source src="video/commercial.mp4">
      <source src="video/commercial.webm">
      </video>
  • muted – Boolean attribute that initially mutes the video.
    • Allow your users to control whether or not anything plays and avoid default settings being “on.”
      <video muted width="500">
      <source src="video/commercial.mp4">
      <source src="video/commercial.webm">
      </video>
  • width – Specifies the pixel width of the video’s display area.
    • This helps the browser know how much space the video will take up and is a good practice to use.
      <video controls width="500">
      <source src="video/commercial.mp4">
      <source src="video/commercial.webm">
      </video>

The source Element and Its Attributes

There can be as many source elements inside of each pair of video tags as you need. Each source element should have a single src attribute that is an absolute or relative link to the audio file. The sources will be read from top to bottom, so you’ll want to ensure that the files are added in order from most browser support to least browser support.

source Element Attributes

The source element has one required attribute: the src attribute, which is used to give a location for the video source file. This can be a relative or absolute link. 

  • src – text attribute used to link to the video source file. Should include the file type.
    • <video controls width="500">
      <source src="video/commercial.mp4">
      <source src="video/commercial.webm">
      </video>

Adding Video with an Iframe

An iframe can be used to add many different things to your pages, and one of those things is to embed a video from a site like YouTube to your webpage. The code to add an iframe to your page is usually something that you can copy and paste from the site where the video is hosted. You can also use an iframe to embed code and other widgets to your pages. The code below is copied from YouTube as-is.

iframe Element Attributes

The iframe element has many available attributes. Some are listed and described below. 

  • src – (required) – text attribute used to link to the video source file. Included in the code pasted from YouTube.
  • width – (required) – The width of the frame in CSS pixels (do not use units). Default is 300.
  • height – (required) – The height of the frame in CSS pixels (do not use units). Default is 150.
  • title – Contains a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip.
    • A tooltip appears when you hover over a clickable element with a mouse. 
  • frameborder – The value 1 (the default) draws a border around this frame. The value 0 removes the border around this frame, but you should instead use the CSS property border to control <iframe> borders.
    • You may see an error in validation if you leave this attribute in your code.
  • allow – Specifies a Permissions Policy for the <iframe>. The policy defines what features are available to the <iframe> (for example, access to the microphone, camera, battery, web-share, etc.) based on the origin of the request.
  • allowfullscreen – Set to true if the <iframe> can activate fullscreen mode by calling the requestFullscreen() method with JavaScript.
    • Note: This attribute is considered a legacy attribute (which means it is outdated) and re-defined as:
      • allow=”fullscreen”