08 ‐ Working with Audio

Adding Video in HTML

To add video to your HTML document, you can use the <video> element. The <video> element allows you to embed video files in various formats such as MP4, WebM, or OGG. Here's an example of how you can add video to your HTML document:

<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

Your browser does not support the video element.

In the example above, we have used the <video> element with the controls attribute, which adds video controls (play, pause, volume, etc.) to the video player. The <source> element is used to specify the video file's source and its MIME type.

Adding Audio and Video with Multiple Sources

You can provide multiple sources for audio and video files using the <source> element. This allows the browser to choose the best source based on its compatibility. Here's an example of how you can provide multiple sources for audio and video files:

<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>

<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video element.
</video>

In the example above, we have provided two sources for both audio and video files. The browser will choose the first compatible source based on the file format and codec support.

Adding Audio in HTML

To add audio to your HTML document, you can use the <audio> element. The <audio> element allows you to embed audio files in various formats such as MP3, WAV, or OGG. Here's an example of how you can add audio to your HTML document:

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

Your browser does not support the audio element.

In the example above, we have used the <audio> element with the controls attribute, which adds audio controls (play, pause, volume, etc.) to the audio player. The <source> element is used to specify the audio file's source and its MIME type.

Adding Video in HTML

To add video to your HTML document, you can use the <video> element. The <video> element allows you to embed video files in various formats such as MP4, WebM, or OGG. Here's an example of how you can add video to your HTML document:

<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

Your browser does not support the video element.

In the example above, we have used the <video> element with the controls attribute, which adds video controls (play, pause, volume, etc.) to the video player. The <source> element is used to specify the video file's source and its MIME type.

Adding Audio and Video with Multiple Sources

You can provide multiple sources for audio and video files using the <source> element. This allows the browser to choose the best source based on its compatibility. Here's an example of how you can provide multiple sources for audio and video files:

<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>

<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video element.
</video>

In the example above, we have used the <source> element to provide multiple sources for audio and video files. The browser will choose the best source based on its compatibility with the user's device and browser. This ensures that the audio and video content can be played on a wide range of devices and browsers.