CODEWITHSUNDEEP
javascriptsetinterval
user1472972
user1472972

Reputation: 105

setinterval function using previous/ old value for a variable

I want to play portion of video (html5) and loop through those portions on "onclick" of 2 textareas. I am passing starttime (st) and endtime (et) to the javascript function.

textarea1 : st=6 et=12

textarea2 : st=15 et=20

I am using setinterval to check the endtime and calling method again to loop.

scenario : Click on textarea1. st=6 et=12. While it is playing click on textarea2. The condition video.currentTime > et is true as 15 > 12 which is wrong result. The et value is not changing on "onclick". Please help.

Here is my code:

function playVideo(st,et) {
   var video = document.getElementById('player');
   video.currentTime = st;
   video.play();
   int = setInterval(function() {
      if (video.currentTime > et) { // here the et still has the previous value 
          playVideo(st,et); // loop             
      }
   }, 10);
}

<video width="320" height="240" controls="controls" id="player">
   <source src="abc.mp4" type="video/mp4" />
</video>
<textarea onclick="playVideo(6,12)" >Part1 </textarea>
<textarea onclick="playVideo(15,20)">Part2</textarea>

Upvotes: 1

Views: 2966

Answers (4)

metadings
metadings

Reputation: 3848

Your 'loop' currently creates each interval a new interval, and you get a mess of intervals. setInterval does execute every x ms, where setTimeout does execute once after x ms. You need to clear your interval, when you stop the video.

Try this:

// var declared outside, to clear an old interval,
// but also to not have a global variable.
var stopInterval; 

var playVideo = function (st, et) {
   var video = document.getElementById('player');
   video.currentTime = st;
   video.play();

   if (stopInterval) {
     // clear an old interval, if playVideo is called twice
     window.clearInterval(stopInterval);
     stopInterval = 0;
   }

   stopInterval = window.setInterval(function() {
      if (video.currentTime > et) {
          // here your video is after et, so clear the interval and stop.
          window.clearInterval(stopInterval);
          stopInterval = 0;
          video.pause();
      }
   }, 10);
};

You should also hint if your video isn't buffered, is not playable and is paused (to clear your interval).

See also HTMLVideoElement Interface, HTMLMediaElement Interface, video HTML5 element, and Using HTML5 audio and video on Mozilla's Developer Network.

Upvotes: 0

cloudfeet
cloudfeet

Reputation: 12873

Your problem might be that you're not clearing the interval callback. Try checking for a previous (but still active) interval, and clearing it before assigning a new one.

var videoEndInterval = null;
function playVideo(st, et) {
    ...

    if (videoEndInterval !== null) {
        clearInterval(videoEndInterval);
    }
    videoEndInterval = setInterval(function() {
        ...
    }, 10);
}

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

It's not that et has the previous value, it's that you're never getting rid of the old interval.

Instead of calling playVideo again, you would be better off just calling video.currentTime = st;. However, bear in mind that you will need something that stops the interval. Personally, I'd do something like this:

function playVideo(st,et) {
    var video = document.getElementById('player');
    clearInterval(arguments.callee.interval);
    video.currentTime = st;
    video.play();
    arguments.callee.interval = setInterval(function() {
        if( video.currentTime > et) video.currentTime = st;
    },10);
}

I'm saving the interval as a property of the function, which is essentially JS's equivalent to static variables. This way, when the user clicks on the other textarea it will clear out the existing interval to ensure it doesn't interfere anymore.

Upvotes: 1

Chris Beemster
Chris Beemster

Reputation: 362

Get rid of your old interval by using clearInterval!

Upvotes: 0

Related Questions