Le canplay/canplaythrough événements pour une vidéo HTML5 ne sont pas appelés sur Firefox. Pourquoi?

Je suis en train de construire un plugin jQuery pour gérer les vidéos HTML5. Je suis en train d'essayer de capturer le canplay et canplaythrough événements. Dans Chrome, l'événement est déclenché sans problème. Dans Firefox, parfois, il est déclenché, parfois il ne l'est pas.

Je vais simplifier mon code un peu ici:

$('#my_video').on('canplay canplaythrough', function(){
    console.log('canplay event fired');
});

J'ai aussi essayé avec du javascript natif .la méthode addEventListener() et ça ne fonctionne pas.

Aucune idée pourquoi l'événement n'est pas appelé sur Firefox et comment le corriger?

NOTE: s'il vous Plaît ne me dites pas d'utiliser l'un de la déjà disponibles plugins comme jplayer et vidéo-js, je sais qu'ils existent et fonctionnent bien, mais je dois construire une solution en interne.

InformationsquelleAutor Gabriel | 2012-04-19
  1. 48

    Le problème, c'est que votre video élément a déclenché la canplaythrough événement avant de vous enregistré le gestionnaire d'événement.

    Comme vous l'avez souligné dans votre réponse, vous pouvez mettre vos scripts dans le <head>, mais cela est mauvais pour votre performance.

    Une meilleure façon de résoudre le problème est de vérifier la readystate attribut et l'exécution de votre fonction manuellement dans ce cas:

    var $video = $('video'),
    videoElement = $video[0];

$video.on('canplaythrough', callback);

//If the video is in the cache of the browser,
//the 'canplaythrough' event might have been triggered
//before we registered the event handler.
if (videoElement.readyState > 3) {
  callback();
}
    • Meilleure réponse! Vérifiez la vidéo readystate, et d'ajouter l'écouteur d'événement si readyState n'est pas 4 ou plus.
    • Incroyable réponse!C'est l'un. Merci!!!!!!! @Gabriel vous devez donner la réponse
    • Mettre des scripts qui ne sont pas dans la tête est mauvais pour la santé: l'écriture de scripts globale et montre un manque de ne pas comprendre les normes: utiliser le defer attribut, garder les scripts dans la tête et j'ai toujours le même niveau de performance.
    • Je suis assez sûr que l'ajout de la <script> tag de la <head> avec un defer résultat sera le même problème que @Gabriel a été décrit.
    • Non, vous toujours garder les scripts dans l'élément de tête et puis résoudre le problème. Le déplacement des scripts à la body élément est une mauvaise pratique et même d'envisager de déplacer les scripts entre les body et head élément est clair depuis des amateurs de compréhension au niveau de JavaScript.
    • Non! Il n'y a pas de règles. Selon quels navigateurs vous avez besoin de soutien, de votre approche pourrait être la bonne ou la mauvaise. Ceci étant dit, peu importe si vous mettez votre script dans la tête avec un reporter ou pas, le problème peut se produire. Et dans ce cas, ma réponse à résoudre ce problème. Voir github.com/h5bp/lazyweb-requests/issues/42

    InformationsquelleAutor Pierre Spring
  2. 11

    La raison la plus probable que vous avez vu ce qui a probablement à voir avec les problèmes de synchronisation. Vous avez dit dans votre réponse que la mise en jQuery dans la tête plutôt que le pied de page permet de résoudre le problème. Cela me dit que le problème est DOM l'analyse et l'exécution de script de commande. Le plus probable est que le "en jeu" et "canplaythrough" les événements ont été déclenchés avant de jquery et de votre page de script ont été analysées et les gestionnaires d'événements ajoutée, mais seulement parfois, en fonction du trafic sur le réseau et les temps de chargement. En mettant le script dans la tête, vous en avez forcé votre événement contraignant à se produire avant que les éléments du DOM ont été créés, de sorte que vous ne manquez pas tous les événements.

    Que d'un côté, les avantages de performance de mettre des éléments de script en bas de la page sont discutables. Si vraiment vous souhaitez modifier les performances de page, utilisez quelque chose comme LABjs à gérer en parallèle script de chargement.

    InformationsquelleAutor Clayton Gulick
  3. 4

    Même si ma question n'est pas d'obtenir toute l'attention que ce soit, je pense que c'est une bonne idée de donner une explication pour les personnes qui pourraient tomber sur ce dans l'avenir...

    Le problème est vraiment bizarre: si la base jQuery est inclus dans le pied de page, certaines vidéos ne fonctionnent pas. Si la base jQuery est inclus dans l'en-tête du document, tous les événements sont appelés correctement.

    Donc la solution est d'inclure jQuery de base dans le code html de la tête, même si les "meilleures pratiques" pour l'optimisation, il est recommandé de placer tous les script à la fin du corps pour accélérer les temps de chargement.

    • Je parie sa en fait une course à condition, et la canplay et canplaythrough événements déclenchés avant jQuery attache les écouteurs d'événement. EDIT: Viens de remarquer que Clayton Gulick discuté de la question ci-dessous.
    InformationsquelleAutor Gabriel
  4. 3

    Je crois aussi que c'est une condition de course. La façon dont je suis autour d'elle est comme suit:

    Dans le code HTML de l'élément vidéo ajouter l'attribut preload="métadonnées" - juste pour charger les métadonnées de la vidéo. Donc:

    <video id="myVideo" width="640" height="480" preload="metadata" />

    Prochain, à l'intérieur de la JS:

    var $vid = $("#myVideo");
$vid.bind("canplaythrough", console.log("can play through full video"));
$vid.get(0).load();

    Cette ouvert le message pour moi en Chrome n'ai pas testé ailleurs.

    InformationsquelleAutor George Huber
  5. 2

    Si vous pensez que le Firefox pour charger l'audio après avoir déclencher load alors il ne serait pas le faire. Il fera feu de l' loadstart mais ne permettra pas de télécharger quoi que ce soit. Pas de progress événements seront tirées. Et il sera effectivement ne pas faire de demande pour ce fichier. Vous pouvez voir ce comportement dans Firebug.

    Firefox ne démarre le chargement du fichier après le déclenchement d' "jouer".

    La preuve. Voir la sortie de la console.

    • en fait, ce comportement est normal et peut être contrôlé avec la précharge de l'attribut sur la vidéo
    • précharge attribut indique si et comment l'auteur pense que le fichier audio doit être chargé lorsque l' **chargement de la page**. pour autant Que je puisse obtenir le preload n'a rien à voir avec audio.load(). Au lieu de cela, il modifie le comportement du navigateur lorsque aucune action n'est effectuée avec l'audio. Si je me trompe merci de me pointer à la documentation. Est-il possible de forcer l'audio de ne PAS charger lors du chargement de la page et au lieu de charger complètement quand load() est déclenchée?
    • Je ne peux pas imposer une amende à un lien dès maintenant. Mais d'après ce que je sais, le navigateur n'est pas censé pour charger l'audio à moins joué, sauf s'il a la preload attr. Certains navigateurs précontrainte audio/vidéo en tout cas à paraître rapide.
    InformationsquelleAutor Kolyunya
  6. 2

    Dans mon cas, cela a été déterminé par la preload de l'attribut spécifié pour l'élément. Je ne l'avais pas spécifié, alors les différents navigateurs ont choisi de faire des choses différentes.

    Une fois que j'ai précisé preload="auto", le on("canplay") gestionnaire d'événement a bien fonctionné/comme prévu.

    InformationsquelleAutor RCNeil
  7. 1

    Ajoutant:

    var video = $('video');
video.trigger('load');

    Après l'ajout de la canplaythrough écouteur d'événement, il fixe pour moi sur Firefox et Safari.

    InformationsquelleAutor Troy Valle
  8. 1

    Après 1,5 jours de tenter des approches différentes à partir d'ici (à la vanille). Les événements "en jeu" et "canplaythrough" avec addEventListner ne travaillent en Bord. Qu'ils fonctionnent très bien dans tous les autres Navigateur. Je me suis donc retrouvé avec un chèque de "bon état" avec setTimout :-(. Pas très élégant, mais ça fonctionne pour moi.

    Controller.prototype.backGroundControl = function () {
var vid = document.querySelector('#bgvid');
var bgImg = document.querySelector('#bgimg');
_this = this;

if (vid.readyState === 4){
    bgImg.style.opacity = "0"
} else{
    setTimeout(function(){
        _this.backGroundControl();
    },500)
}

    }

    InformationsquelleAutor Friedrich Siever