jquery caught in unintentional loop with video time and select option

  Kiến thức lập trình

I am having issues with Video linking with select options looping.
When the time of the video reaches it’s video.currentTime, it changes the select value #chapters which in turn changes video.currentTime creating a loop.

This is my basic setup

video.addEventListener('timeupdate', function() {
   if ((video.currentTime >= "0") && (video.currentTime <= "0.3")) {
       $("#chapters").val('ch1').change();
       $('div[id^="ch"]').hide(500);
       $("#ch1").show(1000);
       return false;
    }
    if ((video.currentTime >= "93") && (video.currentTime <= "93.3")) {
       $("#chapters").val('ch2').change();
       $('div[id^="ch"]').hide(1000);
       $("#ch2").show(1000);
       return false;
    }



$('#chapters').on('change', function() {
     if ($(this).val() == 'ch1'){
        video.currentTime = 0;
        return false;
     }
     if ($(this).val() == 'ch2'){
        video.currentTime = 93;
        return false;
     }
});

Then my html

<video style="max-width:100%; width: 900px;" controls autoplay id="element">
<source src="melccc.mp4" type="video/mp4">
Your browser does not support the video.
</video>

<select value="chapters" id="chapters">
<option>- - -</option>
<option value="all">ALL</option>
<option>- - -</option>
<option value="ch1">Section 1 - Intro - </option>
<option value="ch2">Section 2 - blah blah </option>

As seen, I have tried to use return false to get out of the loop, but it doesn’t break it… Any ideas?

Theme wordpress giá rẻ Theme wordpress giá rẻ Thiết kế website

LEAVE A COMMENT