web-dev-qa-db-fra.com

Vidéo HTML5 - Pourcentage chargé?

Quelqu'un sait-il quel événement ou quelle propriété je dois interroger pour obtenir un pourcentage du montant qu'une vidéo HTML5 a chargé? Je veux dessiner une barre "chargée" de style CSS dont la largeur représente cette figure. Tout comme You Tube ou tout autre lecteur vidéo.

Donc, tout comme votre tube, une vidéo sera lue même si la vidéo entière n'a pas été chargée et donne à l'utilisateur des commentaires sur la quantité de vidéo chargée et restant à charger.

Tout comme la barre rouge sur YouTube:

enter image description here

javascriptcssvideohtml5-video
36
wilsonpage

L'événement progress est déclenché lorsque certaines données ont été téléchargées, jusqu'à trois fois par seconde. Le navigateur fournit une liste des plages de supports disponibles via la propriété buffered ; un guide complet à ce sujet est disponible sur Mise en mémoire tampon, recherche et plages de temps sur MDN.

Démarrage à charge unique

Si l'utilisateur ne saute pas la vidéo, le fichier sera chargé dans une TimeRange et la propriété buffered aura une plage:

------------------------------------------------------
|=============|                                      |
------------------------------------------------------
0             5                                      21
|             \_ this.buffered.end(0)
|
\_ this.buffered.start(0)

Pour connaître la taille de cette plage, lisez-la de cette façon:

video.addEventListener('progress', function() {
    var loadedPercentage = this.buffered.end(0) / this.duration;
    ...
    // suggestion: don't use this, use what's below
});

Plusieurs démarrages de charge

Si l'utilisateur change la position de la tête de lecture pendant le chargement, une nouvelle demande peut être déclenchée. Cela provoque la fragmentation de la propriété buffered:

------------------------------------------------------
  |===========|                    |===========|     |
------------------------------------------------------
  1           5                    15          19    21
  |           |                    |            \_ this.buffered.end(1)
  |           |                     \_ this.buffered.start(1)
  |            \_ this.buffered.end(0)
   \_ this.buffered.start(0)

Remarquez comment le nombre de tampons change.

Comme ce n'est plus un - chargé contigu, le "pourcentage chargé" n'a plus beaucoup de sens. Vous voulez savoir quel est le TimeRange actuel et quelle quantité est chargée. Dans cet exemple, vous obtenez où la barre de charge doit commencer (car ce n'est pas 0) et où elle doit se terminer.

video.addEventListener('progress', function() {
    var range = 0;
    var bf = this.buffered;
    var time = this.currentTime;

    while(!(bf.start(range) <= time && time <= bf.end(range))) {
        range += 1;
    }
    var loadStartPercentage = bf.start(range) / this.duration;
    var loadEndPercentage = bf.end(range) / this.duration;
    var loadPercentage = loadEndPercentage - loadStartPercentage;
    ...
});
85
Yann L.

Les autres barrières n'ont pas fonctionné pour moi, alors j'ai commencé à creuser ce problème et c'est ce que j'ai trouvé. Les solutions utilisent jquery pour créer une barre de progression.

function loaded()
{
    var v = document.getElementById('videoID');
    var r = v.buffered;
    var total = v.duration;

    var start = r.start(0);
    var end = r.end(0);

    $("#progressB").progressbar({value: (end/total)*100});      
}   

$('#videoID').bind('progress', function() 
{
    loaded();
}
);

J'espère que cela aide aussi les autres

6
Koen

Correction du pourcentage pour la chaîne chargée .. Afficher quelque chose comme 99% chargé à l'intérieur de l'élément #loaded ...

function loaded() {
    var v = document.getElementById('videoID');
    var r = v.buffered;
    var total = v.duration;

    var start = r.start(0);
    var end = r.end(0);
    var newValue = (end/total)*100;
    var loader = newValue.toString().split(".");

    $('#loaded').html(loader[0]+' loaded...');

    $("#progress").progressbar({
        value: newValue     
    });    
}
3
Bruno Sousa