FAT78 - Artisan numérique :-)
 

> Lab > Vidéo (html5)

vendredi 29 janvier 2016

Vidéo (html5)

Pour satisfaire au standard html5 du web (bien respecté et reconnu par tous les navigateurs web sur ordinateurs, tablettes et smartphones), il faut placer les fichiers vidéo (mp4, m4v, webm) dans une balise "video" html5 ... simple, mais fastidieux à la longue de répéter l’écriture de ce code html pour chaque vidéo à insérer.

Alors j’ai développé une balise "cinema" qui fait ce travail et apporte quelques paramètres complémentaires.

Au préalable, le fichier vidéo "monfilm" qu’on veut utiliser doit être encodé en "h264" et converti dans les formats .mp4 .m4v et .webm (le logiciel libre "MIRO VIDEO CONVERTER" fait cela vite et bien). Pourquoi ? Parce que ces formats autorisent le "streaming" vidéo (procédé qui affiche la vidéo pendant qu’elle est encore en cours de téléchargement, sans attendre que tout le fichier vidéo soit téléchargé). De ce fait, lorsqu’on ouvre la page web contenant la ou les vidéos, sont téléchargées seulement les informations de durée des vidéos et leur première image, rendant instantané l’affichage de la page web.

Un petit détail : à l’ouverture de la page web, les vidéos affichent leur première image ... mais parfois elle ne convient pas et on aimerait en afficher une autre ... Pas de problème, j’ai ajouté le paramètre "poster" qui permet de choisir une image jpg du même nom que la vidéo qui sera affichée comme image vidéo à l’ouverture de la page web : il faut donc la créer et la charger dans un article spip pour qu’elle soit placée dans le répertoire ./IMG/jpg de spip.

Si les fichiers vidéo font moins de 10Mo de taille, ils peuvent être téléchargés dans un article de SPIP, qui les place automatiquement dans les répertoires correspondants ./IMG/mp4 ./IMG/m4v ./IMG/ogg : au-delà des 10Mo il faudra les télécharger manuellement à l’aide d’un logiciel de ftp (FILEZILLA, par exemple).

"Fuchsia"
(magnifiques buissons qui poussent librement chez moi)

Donc, une fois les fichiers vidéo téléchargés il suffira d’écrire <cinema01|media=monfilm> pour afficher un contrôleur vidéo qui permet d’afficher "monfilm", comme dans l’exemple ci-contre.

Paramètres de la balise "cinema"
— identifiant numérique (01 à 99) obligatoire : permet d’insérer plusieurs vidéos dans un même article
— |media=nom du fichier, sans suffixe mp4 ni m4v ni webm ni autre
— |titre=texte de l’intitulé, qui s’affichera en gras et centré au-dessus du contrôleur audio
— |legende=texte du commentaire, qui s’affichera en italique et centré au-dessous du contrôleur audio
— |align=left ou center ou right, alignement de la fenêtre vidéo (par défaut : center)
— |margin=valeur en pixels des marges droites et gauche autour de la fenêtre vidéo (par défaut : 10)
— |maxwidth=valeur en pixels de la largeur maxi de la fenêtre vidéo (par défaut : 800)
— |minwidth=valeur en pixels de la largeur mini de la fenêtre vidéo (par défaut : 150)
— |width=valeur de la largeur de la fenêtre vidéo en % de la largeur de la fenêtre du navigateur (par défaut : 50%)
— |poster=0 ou 1 (par défaut : 0) à l’ouverture, affichage de la première image de la vidéo (poster=0) ou de l’image "media.jpg" préalablement chargée (poster=1)

Mine de rien ... ça permet de gérer facilement la mise en page des vidéos ... juste l’écriture <cinema02|media=video|align=left|width=30%><cinema03|media=video|align=right|width=30%>texte texte texte donne le résultat ci-dessous ... merci qui ?

/ !\ Utiliser une valeur en % pour conserver la responsivité de la fenêtre vidéo - avec une valeur en px, la largeur sera fixe
/ !\ Utiliser uniquement des suffixes en minuscule (mp4, m4v, webm)


SPIP | | Plan du site | Suivre la vie du site RSS 2.0