Insérer une video webm dans WordPress

By 5 avril 2014novembre 16th, 2015Aide et astuces, Wordpress 3.6, Wordpress 3.7
video webm dans Wordpress

Insérer une video webm dans WordPress nécessite de posséder les bases en HTML et éventuellement en CSS. En effet, pour utiliser ce type de fichiers, il faudra utiliser la balise <video> disponible depuis l’avènement de l’HTML5.

Qu’es ce que le webm ?

Le webm est un format multimédia ouvert destiner à l’usage du web. La vidéo est encodé en VP8 ou VP9 et l’audio en Vorbis ou Opus.

Pour plus d’information : http://fr.wikipedia.org/wiki/WebM

Les avantages :

Le webm est optimisé pour le web, donc très léger pour un format vidéo. La balise <video> propose des propriétés et même une API qui permet de gérer en JavaScript beaucoup de paramètres pour gérer le flux.

Les inconvenants :

A l’heure ou est écrit cet article, le webm est supporter par Chrome 20+, Firefox 14+ et Opera 12+.

Internet Explorer et Safari utilise sont concurrent direct le H264 plus connu sous le nom de MPEG-4. Du coté des OS mobiles, seul Android 4.0+ supporte ce format. Espérons que iOS et Windows phone suivront rapidement le mouvement.

En pratique

La première étape consiste à convertir votre vidéo aux bons formats. Un grand nombre d’applications sont disponibles, pour Windows Mac OS X et Linux, en version libre et propriétaire. Pour rappel, il faudra au moins deux fichiers : l’un au format webm, l’autre au format mp4.

Une fois convertis, transférer vos fichiers webm et mp4 sur votre serveur Web à l’aide de votre client FTP favoris. Oubliez le tableau de bord de WordPress et son menu Bibliothèque. Ce type d’imploration passe par Apache. Pour des raisons de sécurité, Apache bride les uploads à 20Mo par fichiers. Toujours pour des raisons de sécurités, préférer le dossier /wp-content, car il faudra attribuer les droit 777 au fichier webm. Sans quoi, Firefox ne parvient pas à déterminer le type MIME et donc à lire la vidéo. Ici, c’est le dossier /wp-content/upload qui est retenu.

Créez une nouvelle page ou un nouvel article, puis saisissez le code source suivant :


<video controls="controls">
<source src="/wp-content/uploads/video.webm" type="video/webm" />
<source src="/wp-content/uploads/video.mp4" type="video/mp4" />
Votre navigateur ne supporte pas le tag <video>.
</video>

Si les fichiers webm et mp4 ne se trouvent pas dans /wp-content/upload, comme dans cet exemple, changez le chemin dans la propriété src.

Pour aller plus loin

Liste de propriétés de la balise <video>

video webm dans WordPress

Liste des propriétés disponible avec l’API Javascript

video webm dans WordPress

Leave a Reply