HTML Audio/Video DOM Reference

HTML5 introduced the <audio> and <video> elements, allowing developers to embed multimedia content natively in web pages. These elements come with a powerful JavaScript API, called the DOM (Document Object Model) API, enabling dynamic control over media playback.

At The Coding College, we aim to simplify these APIs, helping you create interactive and user-friendly multimedia experiences.

Common Properties

The following properties are shared by both <audio> and <video> elements:

PropertyDescription
currentTimeGets or sets the current playback position in seconds.
durationReturns the length of the media in seconds.
pausedReturns true if the media is paused.
volumeGets or sets the volume (0.0 to 1.0).
mutedGets or sets whether the media is muted.
readyStateReturns the media’s readiness state.
loopGets or sets whether the media should loop.

Common Methods

These methods allow you to control playback programmatically:

MethodDescription
play()Starts or resumes playback.
pause()Pauses playback.
load()Reloads the media.
addTextTrack()Adds a new text track (used in subtitles).

Event Listeners

HTML media elements emit events, enabling you to respond to user actions or media states.

EventDescription
playFired when playback starts.
pauseFired when playback is paused.
endedFired when playback ends.
timeupdateFired when the playback position changes.
volumechangeFired when the volume is changed.
errorFired when an error occurs during playback.

Example:

<audio id="myAudio" controls>
  <source src="audio-file.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
<script>
  const audio = document.getElementById('myAudio');
  audio.addEventListener('play', () => {
    console.log('Audio started playing!');
  });
</script>

Audio-Specific Properties

For <audio> elements, the same DOM properties and methods apply as in <video> elements, but without visual display features.

Example:

<audio id="audioExample" controls>
  <source src="song.mp3" type="audio/mp3">
  Your browser does not support the audio element.
</audio>
<script>
  const audio = document.getElementById('audioExample');
  console.log('Duration:', audio.duration); // Logs the total duration.
</script>

Video-Specific Properties

In addition to shared properties, <video> elements include the following:

PropertyDescription
videoWidthReturns the intrinsic width of the video.
videoHeightReturns the intrinsic height of the video.
posterGets or sets the URL of the video poster.

Example:

<video id="videoExample" controls width="320" height="240" poster="poster.jpg">
  <source src="video-file.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>
<script>
  const video = document.getElementById('videoExample');
  video.addEventListener('ended', () => {
    console.log('Video playback finished!');
  });
</script>

Use Cases for DOM Control

  • Custom Media Players: Create unique playback controls with JavaScript.
  • Analytics: Track user interactions with media.
  • Dynamic Playback: Synchronize multiple media elements.
  • Accessibility: Enable custom captions or descriptions.

Explore more on HTML5 media and enhance your skills with tutorials and projects at The Coding College!

Leave a Comment