Ajouter des vidéo à vos billets

Ajouter des vidéo à vos billets

À en croire la littérature, rien n’est plus simple et pourtant… Vous trouverez ici un état de l’art et quelques informations que j’ai moi-même eu du mal à trouver pour résoudre certains dysfonctionnements.

De façon plus précise, cet article répondra peut-être à vos questions si :

  • vous souhaitez mettre en oeuvre uniquement les fonctionnalités d’HTML5 (par exemple pas de flash)
  • vous voulez une compatibilité maximale en terme de navigateur et plate-forme (iPad compris)
  • votre site utilise potentiellement SSL

Utiliser HTML5 pour ajouter des vidéos à une page web

C’est surement le sujet le mieux documenté alors n’hésitez pas à utiliser votre moteur d’indexation favori. Globalement, ce que j’en ai retenu c’est qu’il existe 3 formats actuellement supportés : mp4, theora et webm. Le premier est fermé alors que les autres sont ouverts. Aussi, chaque navigateur a son favori, tant et si bien qu’il faut prévoir a minima 2 formats pour satisfaire une majorité de plates-formes.

D’un point de vue technique, tout tourne autour du code suivant:

<video poster="movie.jpg" controls>
        <source src='movie.webm' type='video/webm'/>
        <source src='movie.ogv' type='video/ogg'/>
        <source src='movie.mp4' type='video/mp4'/>
        <p style="vertical-align:middle">
           Ici, le texte à afficher si votre navigateur ne sait pas gérer ces formats.
        </p>
</video>

Personnellement, je n’utilise pas l’attribut poster. Aussi, le navigateur récupère la première frame de la vidéo et la présente.

Enfin, il ne faut pas oublier de vérifier la configuration MIME de votre serveur qui doit envoyer des entêtes adaptés à vos fichiers vidéos. On peut pour cela utiliser l’outil : Mozilla Web-sniffer comme proposé par le W3C ici. Étant chez OVH, c’est dans mon .htaccess que cela se trouve :

AddType video/mp4 .mov .m4v .mp4
AddType video/ogg .ogg

Quelle procédure ? Et comment faire pour que cela fonctionne avec un iPad ?

Dans mon cas, mon appareil photo me donne des .mov codé en H.264. L’iPad est assez restrictif en terme de format H.264 supporté pour la vidéo sous Safari (format Baseline uniquement). L’outil le plus simple que j’ai trouvé est d’utiliser Handbrake disponible sous de nombreuses plates-formes. Il traite les fichiers vidéos de mon APN et si l’on choisit « iPhone et iPod » dans les réglages prédéfinis, il génère un fichier dans un format H.264 lisible par l’iPad. Par contre, il faut penser à modifier les dimensions de la vidéo cible si vous souhaitez qu’elles diffèrent de celles d’un iPhone.

Afin de ne pas générer des vidéos trop grosses, j’utilise parfois la fonction Target size (Taille cible) de Handbrake que je valide avec la fenêtre de prévisualisation afin de générer un contenu acceptable. Ensuite j’utilise ffmpeg2theora pour générer le même fichier au format theora. Là encore, l’option -v permet d’optimiser la taille du fichier. On peut lire ici où là qu’Handbrake sait également gérer le format theora, mais il semble que c’était trop bogué et que cette fonctionnalité ait été retirée. Noter que ffmpeg2theora est vraiment simple !

Pourquoi, sous Safari, tout cela ne fonctionne pas ?

Utilisez-vous une connexion SSL pour accéder à vos fichiers ? S’agit-il d’un certificat auto-signé ? En effet, il semble que le module QuickTime appelé par Safari 5.1.2 peine à lire les vidéos hébergés sur des serveurs web utilisant ce type de certificat. D’ailleurs, si vous lisez cette vidéo avec un autre navigateur et que vous revenez sous Safari, parfois cela fonctionne, car le fichier est mis en cache localement. Il n’y a pas trop de parades sauf à utiliser un certificat valide pour votre serveur SSL. Maintenant, sachez que même avec un certificat valide Safari sous iPad 2 ne parviendra pas non plus à lire le fichier.

La solution que j’ai mise en œuvre n’a rien d’exceptionnel, les vidéos sont hébergés sur une partie non sécurisée de mon site web. Pour ceux qui ont suivi mon article Partager des instances wordpress sans activer le multisite, j’ai créée un nouveau site video.e-gaulue.com contenant un répertoire wp-content qui lui-même contient un lien symbolique vers le répertoire uploads de mon installation principale.

|
+-wwwbase-+   <- Contient l'installation WordPress initiale (www.e-gaulue.com)
|      |
|      +-.htaccess                       <- Spécifique à cet instance
|      +-.httppassword                   <- Si besoin d'une authentification
|      +-wp-content                      <- Répertoire des données spécifiques
|      +...                              <- Tout le reste des fichiers WordPress
|
+-vidéo-+     <- Correspond au DocumentRoot du site video.e-gaulue.com
        |
        +-.htaccess                       <- Spécifique à cet instance
        +-wp-content-+
                     |
                     +-uploads -> ../../wwwbase/wp-content/uploads  <- Lien symbolique

Ceci me permet de continuer à utiliser les outils de WordPress et de ne modifier qu’à la marge l’URL proposée. En contrepartie, l’accès à mes vidéos ne se fait plus en SSL (ce que je ne trouve pas insupportable en terme de sécurité).

En tout cas, tout ceci m’a permis de comprendre pourquoi nombre de sites (pourtant dignes de confiance) hébergent leur vidéo sur un site secondaire (on peut s’en rendre compte dès qu’on utilise le plug-in NoScript de Firefox).

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *