HTML Track readyState Property: Track Ready State

HTML Track readyState Property: Understanding Track Readiness

The HTML <track> element is used to provide timed text tracks (subtitles, captions, descriptions, chapters, or metadata) for HTML media elements like <video> and <audio>. The readyState property of the <track> element provides information about the readiness of the text track. It indicates whether the track’s data is still loading, is fully loaded, or if there are any errors. Understanding and monitoring the readyState is crucial for providing a seamless user experience when working with media tracks.

What is the readyState Property?

The readyState property returns a number representing the current state of the <track> element. It’s a read-only property, meaning you can only retrieve its value, not set it directly. The returned value is an integer constant.

Purpose of the readyState Property

The primary purpose of the readyState property is to allow developers to:

• Monitor the loading status of a text track.
• Handle different loading states to provide appropriate user feedback.
• Ensure that the track is fully loaded before enabling features that depend on it.
• Manage errors that may occur during the loading process.

Syntax

The readyState property is accessed via JavaScript:

const track = document.querySelector("track");
const state = track.readyState;

Possible Values

The readyState property can have one of the following values, represented by numeric constants:

Examples

Here are a few examples demonstrating how to use the readyState property in different scenarios. Each example includes the necessary HTML and JavaScript code.

Basic Example: Displaying the Ready State

This example retrieves the readyState of a track and displays it on the page.

<video width="400" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
  <track
    id="track1"
    src="https://www.w3schools.com/html/subtitles_en.vtt"
    label="English"
    kind="subtitles"
    srclang="en"
    default
  />
</video>
<p>Track readyState: <span id="readyStateDisplay"></span></p>

<script>
  const trackElement1 = document.getElementById("track1");
  const readyStateDisplayElement1 = document.getElementById("readyStateDisplay");

  trackElement1.onload = function () {
    readyStateDisplayElement1.textContent = trackElement1.readyState;
  };
</script>

In this example, the readyState is displayed once the track is loaded.

Monitoring Ready State Changes

This example monitors changes to the readyState property and updates the displayed value accordingly.

<video width="400" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
  <track
    id="track2"
    src="https://www.w3schools.com/html/subtitles_en.vtt"
    label="English"
    kind="subtitles"
    srclang="en"
    default
  />
</video>
<p>Track readyState: <span id="readyStateDisplay2"></span></p>

<script>
  const trackElement2 = document.getElementById("track2");
  const readyStateDisplayElement2 = document.getElementById("readyStateDisplay2");

  trackElement2.addEventListener("load", function () {
    readyStateDisplayElement2.textContent = trackElement2.readyState;
  });

  trackElement2.addEventListener("cuechange", function () {
    readyStateDisplayElement2.textContent = trackElement2.readyState;
  });
</script>

Here, the readyState is updated when the track is loaded or when a cue change event occurs.

Handling Different Ready States

This example demonstrates how to handle different readyState values to provide user feedback during track loading.

<video width="400" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
  <track
    id="track3"
    src="https://www.w3schools.com/html/subtitles_en.vtt"
    label="English"
    kind="subtitles"
    srclang="en"
    default
  />
</video>
<p id="readyStateMessage">Loading track...</p>

<script>
  const trackElement3 = document.getElementById("track3");
  const readyStateMessageElement3 = document.getElementById("readyStateMessage");

  trackElement3.onloadstart = function () {
    readyStateMessageElement3.textContent = "Track loading started...";
  };

  trackElement3.onloadedmetadata = function () {
    readyStateMessageElement3.textContent = "Track metadata loaded...";
  };

  trackElement3.onload = function () {
    if (trackElement3.readyState === HTMLTrackElement.COMPLETE) {
      readyStateMessageElement3.textContent = "Track loaded and ready!";
    }
  };

  trackElement3.onerror = function () {
    readyStateMessageElement3.textContent = "Error loading track.";
  };
</script>

In this case, different messages are displayed based on the track’s loading state, enhancing the user experience.

Using Constants for Clarity

This example uses the HTMLTrackElement constants to check the readyState for improved code readability.

<video width="400" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
  <track
    id="track4"
    src="https://www.w3schools.com/html/subtitles_en.vtt"
    label="English"
    kind="subtitles"
    srclang="en"
    default
  />
</video>
<p id="readyStateMessage2"></p>

<script>
  const trackElement4 = document.getElementById("track4");
  const readyStateMessageElement4 = document.getElementById("readyStateMessage2");

  trackElement4.onload = function () {
    if (trackElement4.readyState === HTMLTrackElement.LOADING) {
      readyStateMessageElement4.textContent = "Track is loading...";
    } else if (trackElement4.readyState === HTMLTrackElement.COMPLETE) {
      readyStateMessageElement4.textContent = "Track is ready!";
    }
  };
</script>

Using constants like HTMLTrackElement.LOADING and HTMLTrackElement.COMPLETE makes the code more understandable.

Real-World Applications

The readyState property is valuable in scenarios like:

• Adaptive Streaming: Dynamically adjusting the quality of video streams based on network conditions and track readiness.
• Accessibility Features: Ensuring that subtitles and captions are fully loaded before being displayed to users with hearing impairments.
• Interactive Media Players: Enabling or disabling features based on the availability of text tracks.
• Custom Media Controls: Providing accurate feedback to users about the loading status of tracks.

Tips and Best Practices

• Always check the readyState before attempting to use a track’s data to avoid errors.
• Use the onload, onloadstart, onloadedmetadata, and onerror events to handle different loading states.
• Use the HTMLTrackElement constants for improved code readability.
• Provide meaningful feedback to users about the loading status of tracks.
• Test your implementation thoroughly across different browsers and devices.

Browser Support

The readyState property of the HTML <track> element is widely supported across modern web browsers:

• Chrome
• Edge
• Firefox
• Safari
• Opera

Conclusion

The readyState property of the HTML <track> element is essential for monitoring the loading status of text tracks and ensuring a smooth user experience. By understanding its values and usage, developers can create robust and accessible media applications.