web-dev-qa-db-fra.com

Rappels HTML5 <video>?

Je travaille sur un site pour un client et ils insistent pour utiliser le tag vidéo HTML5 comme méthode de livraison pour une partie de leur contenu vidéo. Je l'ai actuellement opérationnel avec un peu d'aide de http://videojs.com/ pour gérer le 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 estomper puis de fondre une image à la place de la vidéo --- pensez-y comme un cadre d'affiche après la vidéo.

Est-ce seulement possible? Pouvez-vous obtenir le code temporel d'un film en cours de lecture via Javascript ou une autre méthode? Je sais que Flowplayer ( http://flowplayer.org/demos/scripting/grow.html ) a une fonction onFinish, est-ce l'itinéraire que je devrais prendre à la place de la méthode vidéo HTML5? Le fait que les utilisateurs de IE obtiennent un lecteur Flash nécessitent-ils deux solutions distinctes?

Toute contribution serait vivement appréciée. J'utilise actuellement jQuery sur le site, donc je voudrais garder la solution dans ce domaine si possible. Merci!

javascriptjqueryvideohtml5html5-video
32
Andrew

Vous pouvez voir une liste complète des événements dans la spécification ici .

Par exemple:

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

Vous pouvez vous lier à l'événement sur l'élément comme n'importe quoi d'autre dans jQuery ... quant à votre question de commentaire, quel que soit l'élément que vous fournissez pour IE, oui, il aurait besoin d'un gestionnaire distinct configuré pour tout événement qu'il fournit.

Pour l'autre question sur le code temporel, l'événement timeupdate se produit lors de sa lecture et l'événement durationchange se produit lorsque la durée globale change. Vous pouvez les lier et les utiliser comme je l'ai montré avec l'événement ended ci-dessus. Avec timeupdate vous voudrez probablement la propriété currentTime, avec durationchange vous voudrez la propriété duration, chacune desquelles vous sortez directement du DOM objet, comme ceci:

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

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

L'événement HTML 5 Video OnEnded ne se déclenche pas

et voir aussi

Détecter quand une vidéo HTML5 se termine

Pour une solution polyvalente (prend en charge les balises vidéo avec repli, voir)

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

3
Eric J.

J'ai utilisé ce code. Il recharge essentiellement la vidéo qui fera réafficher l'affiche. En supposant que vous vouliez que l'image à la fin soit la même que l'affiche. Je n'ai qu'une seule vidéo sur la page, donc l'utilisation du tag vidéo fonctionne. J'ai mis ma vidéo en lecture automatique au chargement de la page, j'ai donc ajouté la pause après le rechargement.

<script type="text/javascript">
    var video= $('video')[0]; 
    var videoJ= $('video');        
    videoJ.on('ended',function(){
        video.load();     
        video.pause();
    });
</script>
1
Novice Guy