Vidéo HTML5 - Pourcentage Chargé?

Personne ne sait de quel événement ou bien j'ai besoin de requête afin d'obtenir un pourcentage de la quantité, une vidéo HTML5 a chargé? Je veux dessiner un CSS style "chargé" bar de la largeur représente cette figure. Tout comme you Tube ou tout autre lecteur vidéo.

Ainsi, tout comme you tube une vidéo joue, même si l'ensemble de la vidéo n'a pas chargé et donner de la rétroaction des utilisateurs sur la façon dont beaucoup de la vidéo a été chargé et est laissé à la charge.

Tout comme la Barre Rouge sur YouTube:

Je suis sûr que le lecteur YouTube est de Flash, pas de HTML5. Demandez-vous une solution similaire à l'aide d'une vidéo HTML5?
Oui, vous tube flash. Je demande le rappel des données à partir d'une vidéo html5 qui me permettra de représenter cette information à mon utilisateur.
pagewil: youtube html5 mise en œuvre est en test...je l'utilise....youtube.com/html5
Je pense que vous m'avez mal compris

InformationsquelleAutor wilsonpage | 2011-02-17

83

La progress événement est déclenché lorsque des données ont été téléchargées, jusqu'à trois fois par seconde. Le navigateur fournit une liste de plages de supports disponibles par le biais de la buffered propriété; un bon guide est disponible sur Les médias de mise en mémoire tampon, la recherche, et des plages de temps sur MDN.

Charge unique de commencer

Si l'utilisateur ne veut pas passer à travers la vidéo, le fichier sera chargé dans un TimeRange et la buffered propriété aura une gamme:
```
------------------------------------------------------
|=============|                                      |
------------------------------------------------------
0             5                                      21
|             \_ this.buffered.end(0)
|
\_ this.buffered.start(0)
```
De savoir comment grand que la gamme est, de lire 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
});
```
Multiple de la charge commence

Si l'utilisateur change la position de tête de lecture alors que c'est le chargement, une nouvelle demande peut être déclenchée. Cela provoque la buffered bien être fragmenté:
```
------------------------------------------------------
  |===========|                    |===========|     |
------------------------------------------------------
  1           5                    15          19    21
  |           |                    |            \_ this.buffered.end(1)
  |           |                     \_ this.buffered.start(1)
  |            \_ this.buffered.end(0)
   \_ this.buffered.start(0)
```
Remarquez comment le numéro de la mémoire tampon de changements.

Depuis ce n'est plus une zone contiguë de chargé, le "pourcentage chargé" ne fait pas beaucoup de sens plus. Vous voulez savoir ce que le courant TimeRange est et comment beaucoup de qui est chargé. Dans cet exemple, vous obtenez lorsque la barre de chargement doit commencer (puisqu'il n'est pas 0) et où il 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;
    ...
});
```
- J'ai eu à faire video.buffered.end(0) (note: pas d'enveloppe en jQuery).
- Vous pouvez également utiliser this dans l'événement au lieu de sélectionner l'élément vidéo. Je pense que c'est plus confortable et un peu plus rapide.
- sympa mais le $('video').get(0) partie est faux. 1. Il ne sélectionne le premier élément à partir de toutes les vidéos, alors que la liaison est sur une collection. 2. vous devez utiliser eq(0) au lieu de get(0) pour obtenir l'élément lui-même. 3. vous devez utiliser this à l'intérieur de l'événement au lieu de get() ou eq()
- Je fixe les exemples maintenant
- J'ai étendu la réponse afin d'être plus complet.
- Quelqu'un a eu des problèmes où que vous passez à un nouveau currentTime et puis quand le tampon crée un nouvel intervalle de temps c'est juste un peu hors de la nouvelle currentTime? Un exemple serait de sauter à l'20s point dans une vidéo et puis le tampon commence à charger à partir de 20.02 s. C'est un peu de temps, mais suffisamment pour faire la boucle while dans cet exemple correspond pas au nouveau buffer.
- comment puis-je faire video player télécharger des données, même lorsqu'il est en pause?
- votre boucle while renvoie une erreur
InformationsquelleAutor Yann L.

L'autre awnsers n'a pas fonctionné pour moi, donc j'ai commencé à creuser ce problème et c'est ce que je suis venu avec. Les solutions utilise jquery pour faire une progressbar.

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 les autres ainsi

InformationsquelleAutor Koen

Pourcentage de correction pour les chargés de chaîne.. Sortie de quelque chose comme 99% chargé à l'intérieur de #élément chargé...

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     
    });    
}

InformationsquelleAutor Bruno Sousa

Vous devez vous connecter pour publier un commentaire.

Charge unique de commencer

Multiple de la charge commence