HTML5-Video JQUERY verursacht compoundierte nicht abgefangene Versprechen Ausnahmen

Question

Außerhalb der Konsole voller Versprechen Ausnahmen in den Chrome-Entwickler-Tools funktioniert dies wie erwartet. Aber von dem, was ich verstehe, würde ich erwarten, dass dies den Browser zum Absturz bringen könnte.

Hier sind die Fehler im Protokoll:

Uncaught (in Versprechen) DOMException: Das Spiel() Anforderung durch einen Anruf unterbrochen wurde (zu pausieren). Uncaught (in Aussicht) DOMException: Die play() Anfrage wurde durch einen Aufruf von load() unterbrochen.

Hier ist meine 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); 
}; 

Und das HTML, wenn nötig:

<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> 

Answer 1

Dies, weil jede Ihrer addVideoX Funktionen geschieht jedes Mal einen neuen Event-Handler auf dem Video fügt es ausgeführt wird .

Darüber hinaus stoppt Ihr $('.vidarray').get(0).pause(); immer nur das erste Video.

Da Ihr Code ist identisch i ein Verfahren schaffen würde, die das nächste Video (mit einer Klasse) und führt die Lade/Start/Pause

leider

$(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>