12
votes

Accéder à HTML 5 Video Progress Event avec JQuery

Le ci-dessous est pour un événement de lecteur vidéo HTML5.

Mon partenaire et moi avons été interceptés pour une très grande partie de la journée sur cette question et j'espère que quelqu'un peut donner une idée de la question. Nous avons pu accéder à l'événement de progression avec des JS unis comme on le voit ci-dessous, mais en essayant d'y accéder avec JQuery, nous devons non définir dans la console. Toute aide / recommandations sont grandement appréciées. P>

    //JS - Works like a charm
document.addEventListener("DOMContentLoaded", init, false);
function init() {
    var v = document.getElementById('test-vid');
    console.log(v)
    v.addEventListener('progress', progress, false);
}
function progress(e) {
    console.log(e.lengthComputable + ' ' + e.total + ' ' + e.loaded);
}


    //  jQuery - NO BUENO - Undefined rendered in console
    var vid = $('#test-vid');
    $(vid).bind("progress", function(e){
            console.log(e.total + ' ' + e.loaded + ' ' + e.lengthComputable );

            });

javascript jquery html html5-video

0 commentaires

4 Réponses :

5
votes

Pourquoi pas simplement utiliser:

    $('video#test-vid').bind("progress",function(e){
        console.log(e.total + ' ' + e.loaded + ' ' + e.lengthComputable );
    });

3 commentaires

Merci pour votre réponse. Lorsque vous utilisez le code ci-dessus, je reçois l'erreur "$ (VID) .Addeventlistener n'est pas une fonction" dans la console.

Néanmoins, le lien que vous avez posté que je vérifiais plus tôt aujourd'hui et que les événements "terminés" et "DuréeChange" fonctionnent sans problèmes. "Progrès" malheureusement pas.

Quel navigateur utilisez-vous et êtes-vous sûr que vous utilisez l'utilisation du pour les espaces de noms HTML?

0
votes

Quelques suppositions sauvages ...

Vous avez: p> xxx pré>

sur cette deuxième ligne, vid est déjà un objet JQuery. Avez-vous essayé simplement d'utiliser vid.bind () code>? P>

Alternativement, si vous connaissez addEventListener code> fonctionne, pourquoi ne pas l'utiliser? Peut-être que vous aurez de la chance si, après avoir sélectionné avec jQuery, vous émettez l'objet DOM non décoré: P>

var vid = $('#test-vid');
vid.get().addEventListener(...

0 commentaires

2
votes

Vous obtenez un indéfini car JQuery utilise une liste blanche d'événements-propriétés, pour normaliser les événements, ni chargé ni total ne figure dans cette liste.

Si vous souhaitez obtenir les informations, vous devez utiliser: e.originalEvent.lengthcendable etc ..

Mais honnêtement, vous ne devriez pas faire cela. Ces propriétés d'événement sont uniquement Firefox et ne font plus partie de la spécification HTML5. Vous devez utiliser l'objet tamponnier dans d'autres navigateurs. La progression-chose est vraiment problématique dans les médiasements HTML5. Safari sur iPad fonctionne différent de Safari sur Mac, etc.

Une implémentation de navigateur croisée d'un événement progressiste peut être trouvée dans le JMediaElement-Libary: http://github.com/ Afarkas / JMediaElement / BLOB / 1.1.3 / SRC / MM.BASE-API.JS # L312

Cordialement Alex

0 commentaires

1
votes

Utilisez le ventre original: xxx

0 commentaires