Как добавить маркеры в видеоплеере html5 на панели индикации прогресса видео?

Question

У меня есть простой пользовательский видеоплеер HTML 5, я хотел бы добавить маркеры к своему видеопроигрывателю, панель индикации прогресса примерно так:

Пока что Вот мое решение только для одного маркера на 0,6 с.

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>

Здесь js для добавления маркеров

$(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);

            }
        });


})

Теперь, когда яЗапустив мое приложение, я получаю следующее.

Что мне нужно сделать, чтобы получить то, что я хочу?

Answer 1

Вы находитесь на правильном пути с вычислением width бара #current-time. За пределами слушателя timeupdate проделайте то же самое для каждого range или marker.

. Выполните цикл по каждому position маркера и рассчитайте смещение свойства left, как вы это делали сwidth свойство. Это даст вам положение каждого маркера на временной шкале.

Затем в цикле создайте каждый маркер, присвойте ему значение свойства left и добавьте их, например, в #seekbar. * 1015. *

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

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

// 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 and add to the #seekbar.
    var left = (position / video.duration) * 100 + '%';

    // Create marker and give it the left value.
    var marker = document.createElement('div');
    marker.classList.add('bubles');
    marker.style.left = left;
    seekBar.appendChild(marker);
  }

});

Это поместит каждый маркер на временной шкале с процентным значением. После окончания цикла продолжите прослушивание события timeupdate.

Если вы хотите включить диапазоны , как в вашем примере, чем это потребует некоторой модификации. Но это поможет вам начать с того, куда вы пытаетесь пойти.

Answer 2

Посмотрите на этот предыдущий ответ на похожий вопрос, я думаю, вы найдете там свое решение. Ответ от vnponce.

https://stackoverflow.com/a/39127919/12212335