vidéo html5 “terminé” événement ne fonctionne pas sur chrome et IE

J'ai deux boutons sur une page qui déclenchent des deux fonctions, qui font deux html5 lecture de la vidéo, de masquer et d'afficher certains éléments (y compris eux-mêmes), et en appeler une autre fonction simple sur terminé (qui provoque la vidéo pour aller à la première image et de la mettre en pause, pour que l'effet fonctionne correctement).

$('#rotate').click(function rotate(){

$('#rotate').hide();
$('#front_view').css('z-index','2');
$('#back_view').css('z-index','3');

//this is the video:
    $('#body_animation').trigger("play").show().bind('ended', function () {
    $('#back_view').show();
    $('#front_view').fadeOut(500);
    $(this).hide();

    this.currentTime = 0;           
    this.pause();

    });

    $('#rotate_reverse').delay(2000).fadeIn(0);
});

Cela fonctionne très bien sous firefox et safari, mais en chrome et IE quelque chose d'étrange se passe. La première fois que le chargement de la page, le "fini" de l'événement ne semble pas fonctionner. Il fonctionne très bien si vous actualisez le site (ou si vous l'exécutez en mode hors connexion).

Vous pouvez vérifier le code ici, j'ai rétréci tout le site à ce problème, de sorte que vous pouvez mieux voir:

http://www.hidden-workshop.com/test/

Le réel les vidéos et les images sont différentes, mais le problème est le même. Je suis busting ma tête à essayer de résoudre cette chose, mais je ne trouve la réponse nulle part.

Merci d'avance!!

OriginalL'auteur CCrawler | 2011-11-16

  1. 24

    Votre page de test n'est pas plus de vie, donc je ne peux pas le vérifier, mais j'ai trouvé que si la boucle est activée pour le tag (par exemple, <video loop="loop">), le "fini" de l'événement n'était pas de tir dans Chrome ou IE (je n'ai pas testé dans Firefox). Une fois que j'ai enlevé la boucle de l'attribut, le "clos" événement déclenché dans les deux navigateurs.

    HTML (avec boucle d'attribut, ce qui permettra d'éviter le "terminé" manifestation de tir):

    Supprimer la boucle de l'attribut si vous voulez que le "terminé" cas d'incendie...

    <video id="video" loop="loop">
    <source src="whatever.mp4" width="320" height="240" type="video/mp4" />
    Your browser does not support this HTML5 video tag.
</video>

    Javascript:

    //NOTE: This only fires if looping is disabled for the video!
$("#video").bind("ended", function() {
    alert('Video ended!');
});
    ^ Remarque que c'est jQuery, et non Javascript

    OriginalL'auteur Travitron

  2. 0

    Si vous êtes l'ajout dynamique d'un <video> vers votre page, qui n'était pas présent dans le code HTML servie par le serveur que vous pourriez rencontrer à une condition de concurrence qui peut entraîner la ended événement n'est pas reconnue, même si elle a été correctement ajouté.

    Je suis en utilisant knockoutjs pour ajouter un autre modèle de téléphone vs bureau. 

    <div data-bind="template: { name: videoTemplate, afterRender: initializeVideo }">

    Ce, de façon dynamique crée moi un <video> élément, puis appelle initializeVideo() une fois que le modèle est rendu (pour les DOM) pour lier les événements :

     $('video#flexVideo').off('ended').on('ended', (evt) =>
 {
       alert('ended fired');

 }).css('border', '2px solid yellow');   //add yellow border so we know element existed

    Sur mon écran la vidéo devient une bordure jaune (prouvant la vidéo a été présent dans les DOM et il n'y avait pas de fautes de frappe). Cependant, pour une raison quelconque, le navigateur n'est pas encore en mesure de fixer le ended événement - je suppose que peut-être il n'a pas encore été initialisé.

    Chrome outils de débogage montre qu'il est ajouté, mais il ne fait pas travailler!

    vidéo html5 “terminé” événement ne fonctionne pas sur chrome et IE

    Il le fait dans Firefox, Chrome + IE10 qui était un peu surprenant.

    Une solution est: est-ce

        $('video#flexVideo').off('loadstart').on('loadstart', (evt) =>
    {
        $('video#flexVideo').off('ended').on('ended', (evt) =>
        {
            alert('ended fired');

        }).css('border', '2px solid yellow');

    }).css('border', '2px solid orange');

    La loadstart événement semble être peut être liée immédiatement.

    Un autre est peut-être juste un setTimeout - ou simplement lier l'événement sur le jeu.

    OriginalL'auteur Simon_Weaver