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.

Tant qu’on n’a qu’une ou deux petites vidéos à mettre dans une page web la balise "video" peut suffire mais dès qu’il y a plusieurs vidéos les navigateurs internet bloquent le chargement de la page.

Alors j’ai développé un modèle "cinema" qui apporte quelques paramètres complémentaires et permet d’intégrer autant de vidéos qu’on veut dans une même pâge web.

cinema-html.zip

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, on peut télécharger seulement les informations de durée des vidéos et leur première image, rendant instantané l’affichage de la page web.

Nota : la compatibilité de cette fonctionnalité avec les navigateurs sur les smartphones iOs et Android, s’obtient en insérant dans la balise html5 "video" les paramètres "controls preload="metadata" muted playsinline" et surtout "#t=0.1,0.2" à la fin de l’adresse url de la vidéo à afficher (ce qui réalise le chargement des premières 0,1sec de vidéo - voir les explications techniques sur la page officielle "media fragments" du consortium W3C)

On obtient ainsi un fonctionnement identique sur tous les supports et avec tous les navigateurs : le fichier vidéo n’est téléchargé que sur 3 images (entre 0,1 et 0,2 sec de sa timeline) et affiche la première image en mode pause. Le son est par défaut coupé (muted) pour répondre à un souci de discrétion. L’utilisateur peut ainsi reglér le niveau sonore et éventuellement le mode "plein écran" avant de démarrer la lecture.

Petit inconvénient, le premier "play" ne lit que les 0,2 sec de film délà téléchérgé : il faut rappuyer su "play" pour continuer la lecture du film (qui se télécharge au fur et à mesure ... c’est le "streaming").
Si sur votre page web il y a moins de 6 vidéos, vous pouvez annuller ce préchargement de 0,2 sec en ajoutant le paramètre "|time=-1" à la balise "cinema".

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 automatiquement 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).

Donc, une fois les fichiers vidéo et l’image de poster téléchargés, il suffira d’écrire <cinema01|media=monfilm|poster=1|time=-1> 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 - ne pas ajouter le suffixe px)
— |minwidth=valeur en pixels de la largeur mini de la fenêtre vidéo (par défaut : 150 - ne pas ajouter le suffixe px)
— |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)
— |time=t en sec (par défaut : 0) détermine le téléchargement d’une plage de 0.1sec de vidéo à l’ouverture de la page web (par défaut : de 0,1 à 0,2 sec). Une valeur négative du paramètre "time" empèche le téléchargement préalable de la vidéo (preload) lors de l’ouverture de la page web.

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%|time=4><cinema03|media=video|align=right|width=30%|time=-1>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)