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?