Intégrer une vidéo dans WordPress

Pourquoi intégrer une vidéo dans WordPress ?

La vidéo permet de dynamiser votre contenu Web, en l’illustrant d’une manière visuelle et dynamique : votre page (ou votre article) contenant une vidéo sera plus attractive.
La vidéo permet de montrer un événement, restituer l’action, son déroulement, son contexte. Dans le cadre d’un événement, il est important de mentionner le contexte, les acteurs de l’événement et l’événement en lui–même.

Quelles vidéos intégrer ?

Vous pouvez intégrer vos propres vidéos ou celles réalisées par d’autres.
Cependant un certain nombre de règles de Droit s’applique à ces supports. Il est nécessaire de les connaître avant de mettre une vidéo en ligne ou reprendre une vidéo existante.

 

Où héberger vos vidéos ?

Plusieurs possibilités s’offrent à vous pour diffuser des vidéos sur votre site Web :

• héberger vos vidéos sur votre propre hébergement/serveur et utiliser un player personnalisé,
• Héberger vos vidéos sur des sites d’hébergement prévus à cet effet :

Les sites d’hébergement vidéos peuvent être une bonne alternative pour les raisons suivantes :

1. Une bande passante et un espace disque importants 
La bande passante à allouer à votre site est fonction de 2 critères : le poids de la vidéo et le nombre de visiteurs qui vont regarder cette vidéo au même moment.
Votre bande passante de 100Mbit/s peut être suffisante pour 10 visiteurs regardant simultanément la vidéo mais « lâcher » dans le cas du visionnage par 1000 visiteurs d’un coup (lors d’un buzz par exemple).
Pour héberger les vidéos sur votre serveur web, vous devrez avoir un espace disque important et fortement sécurisé, ce qui a un coût.

2. Une tolérance aux pannes
Les sites d’hébergement vidéos comme YouTube ont une excellente continuité de services et tombent rarement en pannes.

3. Le référencement de votre vidéo
En mettant votre vidéo en ligne sur YouTube ou Dailymotion, vous la référencez dans leurs catalogues ce qui permettra aux internautes de trouver vos vidéos par d’autres biais que votre site Internet ou Blog. Vous pourrez rajouter un lien vers votre site dans la description de la vidéo et favoriser ainsi le .

4. La possibilité de monétiser vos vidéos
Comme sur Google Adwords, sur vous pouvez mettre en place des campagnes de diffusion de vos vidéos par thématique clef (uniquement si vos vidéos répondent bien aux critères de diffusion liés aux Droits des différents auteurs des images, sons et vidéos).

5. Le respect de l’expérience utilisateur, la rassurance
En effet, l’internaute est habitué aux players des sites d’hébergement vidéos et risquera d’être perturbé si vous utilisez votre propre player au fonctionnement différent.

6. La simplicité de mise en place
Mettre une vidéo en ligne sur YouTube, Dailymotion, Viméo est très simple et rapide et permet de nombreuses fonctionnalités comme la création d’une ou plusieurs « chaînes » dédiées, le partage sur les réseaux sociaux, l’affichage de commentaires, etc.
Concrètement, vous avez juste à insérer le lien de la vidéo et le player se met en place automatiquement (Fonction « exportez », « Embedded » ou « Embedded code »).

Vous pouvez ajouter différents « bout de codes » à vos vidéos hébergées sur YouTube pour faire démarrer la vidéo à l’ouverture de la page ou à un certain momen.
.

Un player personnalisé et auto-hébergé demande un peu plus de travail et de connaissances techniques.

Vous décidez malgré tout d’héberger vos vidéos sur votre serveur ?

1. Les formats vidéo supportés par WordPress : 

• webm
• ogv
• mp4/m4v
• wmv
• mov/qt
• flv
• mp3/m4a/m4b
• ogg/oga
• wma
• wav

2. La rubrique bibliothèque « Médias »
Dans WordPress, tout ce qui n’est pas du contenu textuel de vos articles est regroupé dans la même rubrique « Médias » regroupant les fichiers médias.
Les fichiers enregistrés au sein de WordPress sont physiquement stockés dans le dossier /uploads dont le chemin sur le serveur est : /wp-content/uploads.

Pour ajouter une vidéo dans votre article ou page, cliquez au dessus de votre éditeur de texte sur

3. Les players vidéos (c’est là que ça se complique)
Flash, Html5, CSS3 …

Tout dépend de l’usage de la vidéo. Est-elle vouée à être visionnée sur ordinateur ou sur smartphone et tablette ? (aux quels cas, oubliez Flash…)

 

Quelles contraintes pour le Web mobile ?

Sur mobile, il faut optimiser le temps de téléchargement (images, code) car la connexion sur Internet est beaucoup plus lente.
Il faut penser simple et faciliter le parcours de l’utilisateur pour qu’il accède rapidement à l’information qu’il recherche.

Chaque Smartphone et tablette possède ses propres caractéristiques :

• un système d’exploitation (iOS pour Apple, Android, Blackberry OS) ;
• une taille est une résolution d’écran ;
• un navigateur web.

Il est quasi impossible de rendre un site compatible avec 100% des téléphones mobiles ou tablettes du marché. Leur nombre et leur diversité en termes de caractéristiques rendent l’opération impossible.

Pour palier au fait Adobe a décidé d’abonner l’utilisation de Flash pour les mobiles, la balise <video> en Html5 est généralement utilisée.

Le problème est l’incompatibilité de la balise avec différents navigateurs comme Firefox, Chrome, Safari ou Internet Explorer.
Pour rendre la vidéo compatible, il faut utiliser plusieurs formats de vidéo (OGC, WEbM, MP). Quelques exemples :

• WebM reconnu par Firefox 4+, Opéra 10.6+, Chrome 6+
• OGC reconnu par Firefox 3.5+, Opéra 10.5+, Chrome 4+
• MP4 reconnu par Internet exploreur 9+, Safari 5+

Envie d’en savoir plus ? .

Vous avez des animations Flash qui ne passent pas sur mobile ? Vous pouvez les convertir en Html5 avec  pour les rendre compatibles avec la technologie mobile.

Quelques plugin vidéo WordPress à utiliser :

• (compatible avec iOS)
• (Shortcode [tubepress] à mettre dans la partie texte de l’éditeur WYSIWYG)

Ici la vidéo d’un tutoriel anglophone pour l’utilisation du plugin TubePress.

 

Sophie Kovac, dans le cadre des travaux dirigés des LP Comen.