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
Vous devez vous connecter pour publier un commentaire.
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...
Javascript:
OriginalL'auteur Travitron
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 laended
é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.Ce, de façon dynamique crée moi un
<video
> élément, puis appelleinitializeVideo()
une fois que le modèle est rendu (pour les DOM) pour lier les événements :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!
Il le fait dans Firefox, Chrome + IE10 qui était un peu surprenant.
Une solution est: est-ce
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