以不同的时序和功能循环播放视频

Question

我有2个功能，播放相同的视频，但具有不同的时间。我无法发挥使功能正常工作。

看起来该功能不会重置其他功能

我试图改变变量名称，但仍然改变点击的时间。

var video = document.getElementById('videoElm');

function playShortVideo() {

  var starttime = 0; // start at 0 seconds

  var endtime = 2; // stop at 2 seconds

  video.addEventListener("timeupdate", function() {

    if (this.currentTime >= endtime) {

      this.currentTime = 0; // change time index here

    }

  }, false);

  video.load();

  video.play();

}

function playFullVideo() {

var starttime = 0; // start at 0 seconds

var endtime = 24; // stop at 2 seconds

  video.addEventListener("timeupdate", function() {

    if (this.currentTime >= endtime) {

      this.currentTime = 0; // change time index here

    }

  }, false);

  video.load();

  video.play();

}

//play short video by default

playShortVideo();

//CLICK events 

var btnshort = $('.shortvideo');

var btnfull = $('.fullvideo');

btnshort.click(function() {

  

  playShortVideo();

});

btnfull.click(function() {

  playFullVideo();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>

    <video id="videoElm" autoplay muted controls loop>

    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/webm">

</video>

 

</div>

<button class="shortvideo">play 2 secs only</a><br>

<button class="fullvideo">loop full video</button>