HTML Video played Property: Video Played

HTML Video played Property: Understanding Video Playback

The HTML Video played property provides a way to access the ranges of the video that the user has played. This property returns a TimeRanges object, which contains the start and end times of each continuous segment of the video that has been played. It’s useful for tracking user progress, implementing custom video analytics, or creating interactive video experiences.

What is the played Property?

The played property is a read-only property of the HTMLVideoElement interface. It returns a TimeRanges object representing the portions of the video that have been played. These ranges are continuous segments, meaning that if the user skips around in the video, each segment they watch will be recorded as a separate range.

Syntax

const timeRanges = video.played;

Return Value

A TimeRanges object with the following properties:

Examples

Basic Example: Displaying Played Ranges

This example demonstrates how to access the played property and display the played ranges in a simple format.

<video id="myVideoPlayed" width="320" height="240" controls>
  <source
    src="https://www.w3schools.com/html/mov_bbb.mp4"
    type="video/mp4"
  />
  Your browser does not support the video tag.
</video>
<p id="playedRanges"></p>

<script>
  const videoPlayed = document.getElementById("myVideoPlayed");
  const playedRangesDisplay = document.getElementById("playedRanges");

  videoPlayed.addEventListener("timeupdate", () => {
    let playedRanges = "";
    for (let i = 0; i < videoPlayed.played.length; i++) {
      playedRanges += `Range ${i + 1}: ${videoPlayed.played.start(
        i
      )} - ${videoPlayed.played.end(i)} seconds<br>`;
    }
    playedRangesDisplay.innerHTML = "Played Ranges:<br>" + playedRanges;
  });
</script>

In this example, an event listener is added to the timeupdate event of the video. The timeupdate event is fired when the current playback position has changed. Inside the event listener, the played property is accessed, and the start and end times of each range are extracted and displayed in the playedRanges paragraph.

Advanced Example: Creating a Playback Progress Bar

This example demonstrates how to use the played property to create a custom playback progress bar that visually represents the played ranges.

<video id="myVideoProgress" width="480" height="270" controls>
  <source
    src="https://www.w3schools.com/html/mov_bbb.mp4"
    type="video/mp4"
  />
  Your browser does not support the video tag.
</video>
<canvas id="progressBarCanvas" width="480" height="20"></canvas>

<script>
  const videoProgress = document.getElementById("myVideoProgress");
  const progressBarCanvas = document.getElementById("progressBarCanvas");
  const progressBarCtx = progressBarCanvas.getContext("2d");

  videoProgress.addEventListener("timeupdate", () => {
    drawProgressBar();
  });

  function drawProgressBar() {
    progressBarCtx.clearRect(
      0,
      0,
      progressBarCanvas.width,
      progressBarCanvas.height
    );
    progressBarCtx.fillStyle = "#4CAF50"; // Green color for played ranges

    const duration = videoProgress.duration;
    for (let i = 0; i < videoProgress.played.length; i++) {
      const start = videoProgress.played.start(i);
      const end = videoProgress.played.end(i);
      const startX = (start / duration) * progressBarCanvas.width;
      const width = ((end - start) / duration) * progressBarCanvas.width;
      progressBarCtx.fillRect(startX, 0, width, progressBarCanvas.height);
    }
  }
</script>

In this example, a canvas element is used to draw the progress bar. The timeupdate event listener triggers the drawProgressBar function, which clears the canvas and redraws the played ranges as green rectangles. The position and width of each rectangle are calculated based on the start and end times of the played ranges, relative to the total duration of the video.

Interactive Example: Highlighting Played Sections

This example adds interactive features to visually emphasize the played sections of the video.

<video id="myVideoHighlight" width="480" height="270" controls>
  <source
    src="https://www.w3schools.com/html/mov_bbb.mp4"
    type="video/mp4"
  />
  Your browser does not support the video tag.
</video>
<canvas
  id="highlightCanvas"
  width="480"
  height="270"
  style="position: absolute; left: 0; top: 0; pointer-events: none;"
></canvas>

<script>
  const videoHighlight = document.getElementById("myVideoHighlight");
  const highlightCanvas = document.getElementById("highlightCanvas");
  const highlightCtx = highlightCanvas.getContext("2d");

  videoHighlight.addEventListener("timeupdate", () => {
    drawHighlight();
  });

  function drawHighlight() {
    highlightCtx.clearRect(
      0,
      0,
      highlightCanvas.width,
      highlightCanvas.height
    );
    highlightCtx.fillStyle = "rgba(255, 255, 0, 0.3)"; // Semi-transparent yellow

    const duration = videoHighlight.duration;
    for (let i = 0; i < videoHighlight.played.length; i++) {
      const start = videoHighlight.played.start(i);
      const end = videoHighlight.played.end(i);
      const startX = (start / duration) * highlightCanvas.width;
      const width = ((end - start) / duration) * highlightCanvas.width;
      highlightCtx.fillRect(startX, 0, width, highlightCanvas.height);
    }
  }
</script>

In this example, a canvas element is positioned directly over the video using CSS. The timeupdate event listener triggers the drawHighlight function, which clears the canvas and redraws the played ranges as semi-transparent yellow rectangles. This provides a visual indication of the portions of the video that have been played.

Tips and Considerations

• Performance: Accessing the played property and iterating over the TimeRanges object can be computationally expensive, especially for long videos or frequent updates. Optimize your code to minimize unnecessary calculations and updates.
• User Experience: Use the played property to enhance the user experience by providing visual feedback on playback progress, enabling resume functionality, or creating interactive video experiences.
• Accuracy: The accuracy of the played property depends on the browser implementation and the video encoding. Test your code thoroughly to ensure it works as expected across different browsers and devices.
• Dynamic Updates: The TimeRanges object returned by the played property is dynamically updated as the video is played. This allows you to track user progress in real-time and respond to playback events accordingly.

Browser Support

The played property is supported by all modern web browsers.

Conclusion

The HTML Video played property is a valuable tool for web developers looking to track user progress, implement custom video analytics, or create interactive video experiences. By understanding how to access and interpret the TimeRanges object returned by the played property, you can create more engaging and informative video applications.