Элементы управления воспроизведением видео для перехода к частям видео и воспроизведения в течение указанного времени

Question

Я нахожусь в процессе создания способа для пользователей нажимать на динамически создаваемые кнопки, которые имеют атрибуты данных для запуска и остановки, чтобы манипулировать встроенным видео в DOM.

Проблема в том, что если вы щелкните первую серую кнопку в левом нижнем углу под видео в приведенном ниже примере фрагмента, он воспроизводится, но любой другой дополнительный щелчок кнопки не воспроизводится, он только перемещает currentTime для видео.

Нажатие любой из кнопок Я должен остановить текущее воспроизведение, переместить currentTime на новое значение и продолжить воспроизведение, но я могу заставить его работать только для первой кнопки. Я не могу понять, почему нажатие другой кнопки не будет просто перемещать player.currentTime, а затем player.play ()?

Я думаю, что обработчик событий timeupdate необходимо уничтожить, чтобы новая последовательность Начните. Я не добился успеха с этой попыткой и не знаю, с чего начать, и я попытался очистить currentTime = 0, затем играть снова, но это не работает.

var JSONDATA = [{
    "videoFile" : "http://media.w3.org/2010/05/sintel/trailer.mp4",
    "videoNavigation" : [{  
        "videoStart": "12",
        "videoStop" : "14",
        "description" : "Test description here",
        
    },
    {
        "videoStart": "14",
        "videoStop" : "17",
        "description" : "New test description here",
         
    },
    {
        "videoStart": "17",
        "videoStop" : "20",
        "description" : "New test description here",
        
    }]
}]

buildPresentation(JSONDATA)

function buildPresentation(data) {
    buildNavigation(data, buildVideo)
}

function buildNavigation(data, cb) {
    let navigation = `<div class="ui segment jiggle">`
    for (let i = 0; i < data[0].videoNavigation.length; i++) {
        navigation += ` <button class="ui button" data-starttime="${data[0].videoNavigation[i].videoStart}" data-stoptime="${data[0].videoNavigation[i].videoStop}"></button>`
    }
    let navigationElement = document.getElementById("navigationElement")
    navigationElement.innerHTML = navigation
    cb(data)
}

function buildVideo(data) {
    let video = `<video id="vid" width="640" height="360" controls="none">
                            <source src="${data[0].videoFile}" type="video/mp4" /> 
                        </video>`;
    let videoElement = document.getElementById("videoElement")
    videoElement.innerHTML = video

    let player = document.getElementById("vid");
    player.currentTime = data[0].videoNavigation[1].videoStart

    $("button").on("click", function(e) {
        e.preventDefault;
        player.currentTime = this.dataset.starttime;
        jumptoTime(player, this.dataset.starttime, this.dataset.stoptime)
    })
}

function textElement(data) {
    let textElement = document.getElementById("textElement")
}

function jumptoTime(player, starttime, stoptime) {
    console.log("startime: " + starttime + " === stoptime: " + stoptime)
    player.currentTime = starttime;

    player.play();
    updateTime(player, stoptime)

}


function updateTime(player, stoptime) {
    player.addEventListener("timeupdate", function() {
        console.log(Math.round(this.currentTime))
        if (Math.floor(this.currentTime) == stoptime) {
            this.pause()
        }
    }, false);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
<div class="ui one column centered grid">
            <div class="column">
                <div id="videoElement"></div>
            </div>
        
            <div class="one column centered row">
              <div class="column center aligned">
                <div class="ui segment">
                    <div id="textElement"></div>
                </div> 
              </div>
               <div class="column center aligned">
                   <div id="navigationElement"></div>
              </div>
            </div>
          </div>