Play Video In Loop With Different Timing And Function

I have 2 function which play the same video but with different timing. I can't play make the function to work properly. Looks like the function doesn't reset the other function I t

Solution 1:

That's because the listener is still there, you need to remove it.

Remember, in order to remove it, you can't use anonymous function as callback so I turned it into defined function.

var video = document.getElementById('videoElm');
const playShort = function() {
  if (this.currentTime >= 2) {
    this.currentTime = 0; // change time index here
  }
};
const playFull = function() {
  if (this.currentTime >= 24) {
    this.currentTime = 0; // change time index here
  }
};

functionplayShortVideo() {
  video.removeEventListener("timeupdate", playFull, false)
  video.addEventListener("timeupdate", playShort, false);

  video.load();
  video.play();
}

functionplayFullVideo() {
  video.removeEventListener("timeupdate", playShort, false)
  video.addEventListener("timeupdate", playFull, false);
  
  video.load();
  video.play();
}

//play short video by defaultplayShortVideo();


//CLICK events var btnshort = $('.shortvideo');
var btnfull = $('.fullvideo');
btnshort.click(function() {

  playShortVideo();
});

btnfull.click(function() {
  playFullVideo();
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div><videoid="videoElm"autoplaymutedcontrolsloop><sourcesrc="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"type="video/webm"></video></div><buttonclass="shortvideo">play 2 secs only</a><br><buttonclass="fullvideo">loop full video</button>

And here is the approach for starting the video at 49 sec (60 > 49 + 10)

const shortStartTime = 49;
const shortDuration = 10;

var video = document.getElementById('videoElm');
const playShort = function() {
  if (this.currentTime > (shortStartTime + shortDuration)) {
    this.currentTime = shortStartTime; // change time index here
  }
};
const playFull = function() {
  if (this.currentTime >= 24) {
    this.currentTime = 0; // change time index here
  }
};

functionplayShortVideo() {
  video.removeEventListener("timeupdate", playFull, false)
  video.addEventListener("timeupdate", playShort, false);

  video.load();
  video.currentTime = shortStartTime;
  video.play();
}

functionplayFullVideo() {
  video.removeEventListener("timeupdate", playShort, false)
  video.addEventListener("timeupdate", playFull, false);
  
  video.load();
  video.play();
}

//play short video by defaultplayShortVideo();


//CLICK events var btnshort = $('.shortvideo');
var btnfull = $('.fullvideo');
btnshort.click(function() {
  playShortVideo();
});

btnfull.click(function() {
  playFullVideo();
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div><videoid="videoElm"autoplaymutedcontrolsloop><sourcesrc="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"type="video/webm"></video></div><buttonclass="shortvideo">play 2 secs only</a><br><buttonclass="fullvideo">loop full video</button>

Solution 2:

That happens because you're attaching a timeUpdate event listener multiple times. You either need to use one-only or delete it before attaching a new one.

var video = document.getElementById('videoElm');
var listener;
var starttime = 0;
var endtime = 2;

functionupdateVideo(e) {
  if (e.target.currentTime >= endtime) {
    e.target.currentTime = 0; // change time index here
  }
}

functionplayShortVideo() {
  starttime = 0; // start at 0 seconds
  endtime = 2; // stop at 2 secondsif (!listener) {
    listener = video.addEventListener("timeupdate", updateVideo, false);
  }
  video.load();
  video.play();
}

functionplayFullVideo() {
  starttime = 0; // start at 0 seconds
  endtime = 24; // stop at 2 secondsif (!listener) {
    listener = video.addEventListener("timeupdate", updateVideo, false);
  }
  video.load();
  video.play();
}

//play short video by defaultplayShortVideo();


//CLICK events var btnshort = $('.shortvideo');
var btnfull = $('.fullvideo');
btnshort.click(function() {

  playShortVideo();
});

btnfull.click(function() {
  playFullVideo();
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div><videoid="videoElm"autoplaymutedcontrolsloop><sourcesrc="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"type="video/webm"></video></div><buttonclass="shortvideo">play 2 secs only</a><br><buttonclass="fullvideo">loop full video</button>