HTML5 <video> callbacks ?

Question

Je travaille sur un site pour un client qui insiste pour utiliser la balise vidéo de HTML5 comme méthode de diffusion pour une partie de son contenu vidéo. Je l'ai actuellement mis en place et fonctionne avec un peu d'aide de la part de http://videojs.com/ pour gérer la solution de repli Flash d'Internet Explorer.

Une chose qu'ils m'ont demandé de faire est, après la fin de la lecture des vidéos (elles sont toutes d'une longueur différente), de les faire disparaître et de faire passer une image à la place de la vidéo --- pensez-y comme un cadre d'affiche après la vidéo.

Est-ce même possible ? Peut-on obtenir le timecode d'un film en cours de lecture via Javascript ou une autre méthode ? Je connais Flowplayer ( http://flowplayer.org/demos/scripting/grow.html ) a une fonction onFinish, est-ce la voie que je dois suivre au lieu de la méthode vidéo HTML5 ? Le fait que les utilisateurs d'IE obtiennent un lecteur Flash nécessite-t-il deux solutions distinctes ?

Tout commentaire serait grandement apprécié. J'utilise actuellement jQuery sur le site, et j'aimerais donc que la solution reste dans ce domaine si possible. Merci.

Answer 1

Vous pouvez consulter une liste complète des événements dans le cahier des charges ici .

Par exemple :

$("video").bind("ended", function() {
   alert("I'm done!");
});

Vous pouvez vous lier à l'événement de l'élément comme n'importe quoi d'autre dans jQuery... pour ce qui est de votre question, quel que soit l'élément que vous livrez pour IE, oui, il faudrait un gestionnaire distinct adapté à l'événement qu'il fournit.

Pour l'autre question concernant le timecode, le timeupdate se produit lorsqu'il est en cours de lecture, et l'événement durationchange L'événement se produit lorsque la durée globale change. Vous pouvez les lier et les utiliser comme je l'ai montré avec la fonction ended événement ci-dessus. Avec timeupdate vous voudrez sans doute le currentTime la propriété, avec durationchange vous voudrez le duration chacune d'entre elles étant obtenue directement à partir de l'objet DOM, comme ceci :

$("video").bind("durationchange", function() {
   alert("Current duration is: " + this.duration);
});

Answer 2

Un événement OnEnded est associé à la balise vidéo. Cependant, cela ne fonctionne pas pour moi dans la version actuelle de Google Chrome.

http://stackoverflow.com/questions/2925851/html-5-video-onended-event-not-firing

et voir aussi

http://stackoverflow.com/questions/2741493/how-do-you-detect-html5-video-events

Pour une solution générale (prend en charge les balises vidéo avec la fonction fallback see)

http://camendesign.com/code/video_for_everybody ou http://www.kaltura.org/project/HTML5_Video_Media_JavaScript_Library o http://www.mediafront.org/