How to add markers in html5 video player on video progress indication bar?

user_9964622 0
Viewed 5415

I have a simple custom HTML 5 video player, I would like to add markers to my video player, progress indication bar something like this.

enter image description here

So far Here is my solution just for one marker at 0.6s.

HTML

<div canplay id="video-block">
    <div id="video-container">
        <video id="videoplayer" ref="video"  autoplay webkit-playsinline playsinline>
            <source src="videos/vmerce.mp4" type="video/mp4">
        </video>

    </div>
    <div id="video-controls" style="position: relative; display: block">
        <div id="seek-bar-container">
            <div id="seek-bar">
                <div id="current-time">

                </div>
            </div>
        </div>
        <div id="pause-play-button">
            <img id="play" src="images/play.png"> 
            <img id="pause" src="images/pause.png" style="display:none">
        </div>
    </div>
</div>

Here is js to add markers

$(document).ready(function(){

    //get videoplayer tag element
        var videoplayerID =document.getElementById("videoplayer");
        var ranges = [{
            from: 0,
            to: 6
        },
        {
            from: 6,
            to: 9
        },
        {
            from: 9,
            to: 25
        },
        {
            from: 25,
            to: 38
        }, 
    ];

    console.log(ranges[0].to);

        videoplayerID.addEventListener("timeupdate", function () {
            if ($(this)[0].duration) {
                $(this).parent().parent().find("#current-time").css("width", ($(this)[0].currentTime * 100 / $(this)[0].duration) + "%");
            }

            if (this.currentTime >= ranges[0].to) {

                var bb =$('<div class="bubles"></div>')

                $("#current-time").append(bb);

            }
        });


})

Now when I run my app I get the following.

enter image description here

What do I need to do to get what I want?

css html jquery javascript
2 Answers

You are on the right track with calculating the width of the #current-time bar. Outside of the timeupdate listener do the same for each range or marker.

Loop over each position of the marker and calculate the offset of the left property just like you did with the width property. This will give you the position of each marker on the timeline.

Then in the loop create each marker, give it the left property value and add them, for example, to the #seekbar.

// Video and seekbar
const video = document.getElementById('videoplayer');
const seekBar = document.getElementById('seekbar');

// Positions of markers in seconds.
const positions = [3, 6.5, 7];

// Set the markers when we CAN know the duration of the video.
video.addEventListener('loadedmetadata', () => {

  // Add each marker to the #seekbar element.
  positions.forEach(function(position) {

    // Is position within range of the duration?
    if (position <= video.duration) {

      // Calculate position in percentage..
      const left = (position / video.duration) * 100 + '%';

      // ..create marker and give it the left value..
      const marker = document.createElement('div');
      marker.classList.add('bubles');
      marker.style.left = left;

      // ..and add the marker to the #seekbar.
      seekBar.appendChild(marker);
    }
  });
});

This would place each marker on the timeline with a percentage value. After the loop continue with listening to the timeupdate event.

If you want to incorporate ranges, like in your example, than it would require some modification. But this will help get you started on where you are trying to go.

user_116196470
user_122123350
Related