> > > Exemple complet de balise HTML5 <video>

Exemple complet de balise HTML5 <video>

Les document numéro 42 [1] est un document original au format avi qui a été encodé par SPIPmotion en 3 formats, mp4, ogv et webm.

La version mp4 est doit être lisible nativement sur Safari, Google Chrome et Internet Explorer > 9. Elle est également utilisée pour le lecteur de repli en flash pour les versions de navigateurs ne supportant pas la balise HTML5.

La version ogv n’est nécessaire que pour les anciennes versions de Firefox.

La version webm est très certainement la version du futur, permettant une meilleure intéropérabilité. Elle est visible dans Firefox, Google Chrome et Opéra pour le moment.

Avoir le lecteur vidéo sur l’ensemble de la largeur de la page

Il suffit d’utiliser le code <emb42|center|largeur=100%|preload=auto>.

Elephants dream
Elephants Dream is the world’s first open movie, made entirely with open source graphics software such as Blender, and with all production files freely available to use however you please, under a Creative Commons license.

Le problème est que le modèle ne sachant pas calculer la hauteur de la vidéo (car la largeur est fixée en pourcentage du bloc parent), on est obligé d’attendre la récupération des métadonnées de la vidéo pour fixer en javascript sa hauteur en respectant le ratio.

Si la vidéo est très grande (comme notre exemple) et que la largeur est très réduite par rapport à la largeur du document original, il y aura un effet de disproportion visuelle au chargement de la page.

NB : il est également possible d’utiliser directement le modèle <video> avec les mêmes arguments, cependant cet usage est contraire à la logique car c’est le modèle <emb> qui doit inclure les modèles typés <video>, <audio> ou autres en fonction des types de fichiers à afficher.

Le code <video42|center|largeur=100%>donne donc la même chose :

Elephants dream
Elephants Dream is the world’s first open movie, made entirely with open source graphics software such as Blender, and with all production files freely available to use however you please, under a Creative Commons license.

Notes

[1Ce document est le film Elephants Dream, le premier film ouvert créé, réalisé entièrement à l’aide de logiciels de graphisme open-source comme Blender, et dont l’ensemble des fichiers de production utilisés librement consultables sous une licence Creative Commons. cf : http://www.elephantsdream.org/

  • Auteur :
  • Publié le :

Aucun commentaire


Qui êtes-vous ?
Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.