HTML5视频开始时间和持续时间问题。.移动开始时间后，持续时间将无法设置

Question

几天以来，我一直在努力弄清楚这段代码。自从我编写任何代码以来已经有一段时间了。

所以问题是我创建了一个脚本，该脚本可以拍摄视频并将其显示在画布上，很酷。现在，我希望能够在循环播放时设置视频播放的开始时间和持续时间。如果开始时间为0，则此功能有效。我可以将持续时间设置为我的心脏内容，视频将循环播放。当我移动持续时间滑块时，一切都变得很糟。

我要执行的操作是转到开始时间，并不断循环设置的持续时间，直到更改为止。

这是JSFIDDLE：

  

jsfiddle.net/agpadula/sux57jty/2/embedded /

如果iframe不起作用：

  

jsfiddle.net/agpadula/sux57jty /

let elem = document.getElementById('c');
let c = elem.getContext('2d');
let v = $('#v')[0];
let videoStartTime = $('#videoStartTime').val();
let durationTime = $('#durationTime').val();

document.getElementById("v").currentTime = $('#videoStartTime').val();
document.getElementById("v").durationTime = $('#durationTime').val();
// In order to set the canvas width & height, we need to wait for the video to load.


function init() {
    if (v.readyState == 1) {
        $('#c').attr('width', v.videoWidth);
        $('#c').attr('height', v.videoHeight);
    } else {
        requestAnimationFrame(init);
    }
}

init();

$('#v').on('timeupdate', function () {
    if ($('#v')[0].currentTime >= videoStartTime + $('#durationTime').val()) { //Loop for one second
        $('#v')[0].currentTime = $('#videoStartTime').val();
        $('#v')[0].durationTime = $('#durationTime').val();
        console.log(v.currentTime);
        console.log(v.durationTime);
    } 

document.getElementById("currentTime").innerHTML = $('#v')[0].currentTime;
document.getElementById("duration").innerHTML = $('#v')[0].durationTime;


    let $this = $('#v')[0]; //cache
    (function loop() {
        if (!$this.paused && !$this.ended) {

            drawCanvas();

            setTimeout(loop, 1000 / 25); // drawing at 25fps                   



        }
    })();
});


function drawCanvas() {
    c.drawImage(v, 0, 0, v.videoWidth, v.videoHeight, 0, 0, v.videoWidth, v.videoHeight);

}