CODEWITHSUNDEEP
jqueryhtmlvideo
KevMoe
KevMoe

Reputation: 443

HTML5 Video JQUERY causing compounded uncaught promise exceptions

Outside of the console full of promise exceptions in the chrome developer tools this is working as expected. However, from what little I understand, I would expect this to crash the browser eventually.

Here are the errors in the log:

Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause(). Uncaught (in promise) DOMException: The play() request was interrupted by a call to load().

Here is my jquery:

$(document).ready(function(){
$('.vidarray').get(0).pause();
$('.video').hide();
$('#div1').show();
$('#video1').get(0).load();
$('#video1').get(0).play();
$('#video1').on('ended', addVideo2);
});

var addVideo2 = function() {
$('.vidarray').get(0).pause();
$('.video').hide();
$('#div2').show();
$('#video2').get(0).load();
$('#video2').get(0).play();
$('#video2').on('ended', addVideo3);
};

var addVideo3 = function() {
$('.vidarray').get(0).pause();
$('.video').hide();
$('#div3').show();
$('#video3').get(0).load();
$('#video3').get(0).play();
$('#video3').on('ended', addVideo1);
};

var addVideo1 = function() {
$('.vidarray').get(0).pause();
($('.video').hide());
$('#div1').show();
$('#video1').get(0).load();
$('#video1').get(0).play();
$('#video1').on('ended', addVideo3);
};

And the HTML if needed:

<div id="div1" class="video"><video id="video1" class="vidarray" preload="none" poster="bkg.png"><source src="icx.mp4" type="video/mp4"></video></div>
<div id="div2" class="video"><video id="video2" class="vidarray" preload="none" poster="bkg.png"><source src="icx2.mp4" type="video/mp4"></video></div>
<div id="div3" class="video"><video id="video3" class="vidarray" preload="none" poster="bkg.png"><source src="lastvid.mp4" type="video/mp4"></video></div>

Upvotes: 0

Views: 473

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195992

This happens because each of your addVideoX functions adds a new event handler on its video each time it is run.

Moreover your $('.vidarray').get(0).pause(); always stops the first video only.

Since your code is identical i would create a method that identifies the next video (with a class) and performs the load/start/pause

$(document).ready(function(){
  var videos = $('.video');
  
  //handle ending of video
  videos.find('video').on('ended', function(){
    playNextVideo(videos);
  });
  
  // start with the first one
  playNextVideo(videos);
});
  
function playNextVideo(videoList){
  var activeVideo = videoList.filter('.active').removeClass('active'), // identify active video and remove active class
      activeIndex = videoList.index(activeVideo), // get the active video index in the group
      nextVideo = videoList.eq(activeIndex+1), // get the next video in line
      actualVideo;

  // if there is no next video start from first
  if (nextVideo.length == 0) nextVideo = videoList.first(); 
  
  // pause all videos
  videoList.find('video').each(function(){this.pause();}) 
  
  // get reference to next video element
  actualVideo = nextVideo.find('video').get(0);
  
  // add active class to next video
  nextVideo.addClass('active');
  
  // load and play
  actualVideo.load();
  actualVideo.play();
}
.video{display:none}
.video.active{display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="div1" class="video">1:<video id="video1" class="vidarray" preload="none" poster="http://dummyimage.com/320x240"><source src="http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_1mb.mp4" type="video/mp4"></video></div>
<div id="div2" class="video">2:<video id="video2" class="vidarray" preload="none" poster="http://dummyimage.com/320x240"><source src="http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_1mb.mp4" type="video/mp4"></video></div>
<div id="div3" class="video">3:<video id="video3" class="vidarray" preload="none" poster="http://dummyimage.com/320x240"><source src="http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_1mb.mp4" type="video/mp4"></video></div>

Upvotes: 2

Related Questions