Adding Markers to the Progress Indicator in an HTML5 Video Player (Edited)

Your method of updating the width of the #played-progress element can be expanded to add multiple markers positioned based on the time relative to the video's total duration.

Here's how I see it:

1. After loading the video metadata (loadedmetadata), calculate the position of each marker as a percentage of the video's total duration. This ensures correct placement of markers regardless of the video's length.

2. For each range, create a div with the class marker-point, set its CSS left property to the calculated percentage, and append it to the #progress-bar.

3. Use the .marker-point class to position the markers absolutely within the progress bar and style them to be visible.

Here's the code implementing this:

JavaScript:

		

			
				
			
		
		$(document).ready(function(){
    // Get the video element
    var videoElement = document.getElementById("mediaPlayer");
    var timeRanges = [
        { start: 0, end: 5 },
        { start: 5, end: 10 },
        { start: 10, end: 25 },
        { start: 25, end: 40 },
    ];

    // Add markers after video metadata is loaded
    videoElement.addEventListener("loadedmetadata", function () {
        var duration = videoElement.duration;
        timeRanges.forEach(function(range) {
            var marker = $('
');
            var positionPercent = (range.end / duration) * 100;
            marker.css('left', positionPercent + '%');
            $('#progress-bar').append(marker);
        });
    });

    // Update playback progress
    videoElement.addEventListener("timeupdate", function () {
        if (videoElement.duration) {
            $('#played-progress').css('width', (videoElement.currentTime * 100 / videoElement.duration) + "%");
        }
    });
});
	

CSS:

		

			
				
			
		
		.marker-point {
    position: absolute;
    height: 8px;
    width: 4px;
    background-color: blue;
    border-radius: 2px;
    top: 0;
}
	

If you don't want to reinvent the wheel, you can use libraries for implementing a video player like Video.js. These libraries have plugins that provide the functionality to add markers.

In short, you would need to:

Initialize the Video.js player.

Define an array of marker objects with time and label fields.

After loading the video metadata, iterate through the marker array, calculate their positions, and then add them to the progress bar element.

Use the .marker-dot class to style the markers and add tooltips with the marker labels on hover.

Here's how you can implement markers using Video.js:

JavaScript:

		

			
				
			
		
		var markers = [
  { time: 10, label: "Part 1" },
  { time: 25, label: "Part 2" },
  { time: 50, label: "Part 3" },
  { time: 75, label: "Part 4" }
];

this.player = videojs(document.getElementById('mediaPlayer'), {
  sources: [{ type: 'video/mp4', src: 'assets/videos/sampleVideo.mp4' }],
});

// Wait for video metadata to load
this.player.on('loadedmetadata', function() {
    markers.forEach(function(marker) {
        if (marker.time < player.duration()) {
            var markerEl = document.createElement('div');
            markerEl.className = 'marker-dot';
            markerEl.style.left = (marker.time / player.duration()) * 100 + '%';
            markerEl.setAttribute('title', marker.label);

            // Jump to marker time on click
            markerEl.addEventListener('click', function(e) {
                e.stopPropagation();
                player.currentTime(marker.time);
            });

            document.querySelector('.vjs-progress-holder').appendChild(markerEl);
        }
    });
});
	

CSS:

		

			
				
			
		
		.marker-dot {
    position: absolute;
    height: 8px;
    width: 4px;
    background-color: green;
    border-radius: 2px;
    cursor: pointer;
}

.marker-dot:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
}