Resume playback and watch history are critical features in video applications that improve user experience by allowing users to continue watching videos from where they left off and by keeping track of viewed content. This requires capturing, storing, and retrieving playback state efficiently.

Capturing Playback Position

Accurate capture of the video"s current playback position is fundamental to resume functionality. The currentTime property of the HTML5 video element reflects the current timestamp in seconds.

Implementation Details:

  • Attach event listeners to timeupdate, pause, and ended events to capture playback position frequently and at key interaction points.
  • Store the position in persistent storage to survive page reloads or session terminations.
code
const video = document.getElementById('videoPlayer');

video.addEventListener('timeupdate', () => {
localStorage.setItem('videoPosition', video.currentTime);
});

video.addEventListener('pause', () => {
localStorage.setItem('videoPosition', video.currentTime);
});

Explanation:

  • The timeupdate event fires multiple times during playback, enabling frequent updates of the current time.
  • Saving on pause ensures position is recorded when the user stops or interrupts playback.
  • Clearing the saved position on ended prevents resuming a finished video unnecessarily.
Banner for Real Time Video Analytics

Restoring Playback Position

When the video is loaded again, the saved playback position must be retrieved and applied before playback starts, to resume where the user left off.

Implementation Details:

  • Listen for the loadedmetadata event to ensure video duration is available.
  • Retrieve the stored playback time and set the video element"s currentTime to that value if it is valid.
code
const savedPosition = localStorage.getItem('videoPosition');

if (savedPosition) {
video.currentTime = parseFloat(savedPosition);
}

Explanation:

  • parseFloat converts the stored string back to a number.
  • Setting currentTime prior to playback allows the video to resume from the saved point.

Watch History Tracking

Watch history keeps records of which videos have been watched, along with details such as last playback position, duration watched, and timestamp.

Implementation Details:

  • Maintain a watch history object mapping video IDs to playback metadata.
  • For anonymous users, store data locally (e.g., localStorage).
  • For authenticated users, synchronize watch history with a backend database to allow cross-device access.

Example watch history object:

code
{
"videoId": "abc123",
"lastPosition": 120.5,
"watchedDuration": 1800,
"lastWatched": "2025-05-21T10:15:30Z"
}

Explanation:

  • lastPosition tracks where playback was last stopped.
  • watchedDuration accumulates the total viewing time.
  • lastWatched records the timestamp of the most recent viewing.

Syncing Watch History Across Devices

For authenticated users, watch history and resume positions should be synced to enable continuity across devices.

Implementation Details:

  • Send watch state data periodically to backend APIs via AJAX or WebSocket.
  • On video load, fetch last saved playback state from the backend.
  • Handle network latency and potential conflicts with last-modified timestamps or versioning.

Handling Edge Cases

  • Video Source Updates: If video content changes (e.g., new encoding), validate stored positions against new video duration.
  • Corrupted Storage: Include error handling when reading playback position or watch history to avoid crashes.
  • Privacy Compliance: Ensure storage and syncing comply with data privacy regulations.