Problème de préchargement de vidéo html5

Question

J'essaye d'implémenter un preloader de barre de progression pour des vidéos muliple dans html5.

Ce script imprime dans la console javascript le nombre de vidéos individuelles chargées.

$('.videos video').on('progress', function(){ 

     video_id=$(this).attr('id'); 

     track_loaded=$(this).get(0).buffered.end(0)/$(this).get(0).duration; 

     console.log('id: '+video_id+' - loaded: '+track_loaded); 
}); 

il semble javascript commence avant que des requêtes HTTP sont définies, de sorte que je reçois au hasard un certain type d'erreur: Index ou la taille est négatif ou supérieur au montant autorisé

dans le temps, les demandes sont effectuées et erreur ne plus se connecter mais je reçois toujours une erreur js dans la console.

c'est le journal à l'aide de 7 vidéos:

track_loaded=$(this).get(0).buffered.end(0)/$(this).get(0).duration; 

index.html?id=48 (riga 658) 
Index or size is negative or greater than the allowed amount 


track_loaded=$(this).get(0).buffered.end(0)/$(this).get(0).duration; 

index.html?id=48 (riga 658) 
Index or size is negative or greater than the allowed amount 


track_loaded=$(this).get(0).buffered.end(0)/$(this).get(0).duration; 

index.html?id=48 (riga 658) 
id: 2 - loaded: 0.013786587924260673 
index.html?id=48 (riga 659) 
Index or size is negative or greater than the allowed amount 


track_loaded=$(this).get(0).buffered.end(0)/$(this).get(0).duration; 

index.html?id=48 (riga 658) 
id: 3 - loaded: 0.16078649017264499 
index.html?id=48 (riga 659) 
Index or size is negative or greater than the allowed amount 


track_loaded=$(this).get(0).buffered.end(0)/$(this).get(0).duration; 

index.html?id=48 (riga 658) 
id: 2 - loaded: 0.07255091868406688 
index.html?id=48 (riga 659) 
id: 3 - loaded: 0.26668247728354455 
index.html?id=48 (riga 659) 
id: 4 - loaded: 0.034023975757908255 
index.html?id=48 (riga 659) 
id: 2 - loaded: 0.1380029751260965 
index.html?id=48 (riga 659) 
id: 3 - loaded: 0.35015135988644913 
index.html?id=48 (riga 659) 
Index or size is negative or greater than the allowed amount 


track_loaded=$(this).get(0).buffered.end(0)/$(this).get(0).duration; 

index.html?id=48 (riga 658) 
id: 4 - loaded: 0.12001769993327845 
index.html?id=48 (riga 659) 
id: 2 - loaded: 0.22576573877362435 
index.html?id=48 (riga 659) 
id: 3 - loaded: 0.4388296947315865 
index.html?id=48 (riga 659) 
id: 4 - loaded: 0.22714545076155443 
index.html?id=48 (riga 659) 
id: 2 - loaded: 0.3168997882162283 
index.html?id=48 (riga 659) 
id: 3 - loaded: 0.5364553258101487 
index.html?id=48 (riga 659) 
Index or size is negative or greater than the allowed amount 


track_loaded=$(this).get(0).buffered.end(0)/$(this).get(0).duration; 

index.html?id=48 (riga 658) 
id: 4 - loaded: 0.3736262708488382 
index.html?id=48 (riga 659) 
id: 2 - loaded: 0.3912871004993093 
index.html?id=48 (riga 659) 
id: 3 - loaded: 0.6229262584189355 
index.html?id=48 (riga 659) 
id: 5 - loaded: 0.09206320825645414 
index.html?id=48 (riga 659) 
id: 4 - loaded: 0.5244796611615865 
index.html?id=48 (riga 659) 
id: 2 - loaded: 0.4545190497364752 
index.html?id=48 (riga 659) 
id: 3 - loaded: 0.7033342169513136 
index.html?id=48 (riga 659) 
id: 5 - loaded: 0.2423348637305345 
index.html?id=48 (riga 659) 
id: 4 - loaded: 0.6571140088682328 
index.html?id=48 (riga 659) 
id: 2 - loaded: 0.5290708241980147 
index.html?id=48 (riga 659) 
id: 3 - loaded: 0.7850666087133332 
index.html?id=48 (riga 659) 
id: 5 - loaded: 0.36814371781995037 
index.html?id=48 (riga 659) 
id: 4 - loaded: 0.8086961608852251 
index.html?id=48 (riga 659) 
id: 4 - loaded: 1 
index.html?id=48 (riga 659) 
id: 3 - loaded: 0.8720378998901186 
index.html?id=48 (riga 659) 
id: 2 - loaded: 0.5983052841086022 
index.html?id=48 (riga 659) 
id: 5 - loaded: 0.7350861148492476 
index.html?id=48 (riga 659) 
id: 5 - loaded: 1 
index.html?id=48 (riga 659) 
id: 2 - loaded: 0.6853554286796958 
index.html?id=48 (riga 659) 
id: 3 - loaded: 0.9603336040161238 
index.html?id=48 (riga 659) 
id: 3 - loaded: 1 
index.html?id=48 (riga 659) 
Index or size is negative or greater than the allowed amount 


track_loaded=$(this).get(0).buffered.end(0)/$(this).get(0).duration; 

index.html?id=48 (riga 658) 
id: 2 - loaded: 0.7597701450304093 
index.html?id=48 (riga 659) 
id: 7 - loaded: 0.16078649017264499 
index.html?id=48 (riga 659) 
id: 2 - loaded: 0.8834383564479372 
index.html?id=48 (riga 659) 
id: 7 - loaded: 0.2774545653146095 
index.html?id=48 (riga 659) 
id: 7 - loaded: 0.40604253952334807 
index.html?id=48 (riga 659) 
id: 2 - loaded: 0.9788207540541778 
index.html?id=48 (riga 659) 
id: 2 - loaded: 1 
index.html?id=48 (riga 659) 
id: 7 - loaded: 0.5112616067135821 
index.html?id=48 (riga 659) 
id: 7 - loaded: 0.6072096210159036 
index.html?id=48 (riga 659) 
id: 7 - loaded: 0.7684081485193699 
index.html?id=48 (riga 659) 
id: 7 - loaded: 0.9098284582545465 
index.html?id=48 (riga 659) 
id: 7 - loaded: 1 
index.html?id=48 (riga 659) 
id: 7 - loaded: 1 

Answer 1

Vous pouvez essayer de vérifier l'état des médias et d'attendre jusqu'à ce qu'il soit prêt. Voir Media Ready States.