L’intégration de medias vidéo est un outil de conversion très efficace. Elles favorisent l’engagement des visiteurs et captent l’attention plus efficacement qu’un texte court.
Cependant elles sont un véritable casse-tête en raison de la multiplicté des supports : ordinateurs, tablettes, mobiles, etc. et les spécificités de certains navigateurs.
Comment s’en sortir pour que vote vidéo soit lisible sur tout support, quelles sont les différentes options ?
- La solution la plus simple est de très loin d’intégrer une vidéo hébergée sur une plateforme telle que Viméo, Dailymotion ou le leader Youtube,
- Héberger la vidéo et donc ajouter le lecteur adapté.
Dans cet article nous traiterons que du cas de la vidéo hébergée et des problématiques engendrées.
Les questions à se poser sont les suivantes :
- Quel format choisir ?
- Quel lecteur choisir ?
- Où l’héberger ?
- Comment l’intégrer dans mon site ?
Format vidéo
Cette question est fondamentale. Fini la guerre Mac ou PC, le monde est devenu mobile. Donc aujourd’hui, pour avoir une diffusion maximale il est impératif que votre vidéo en ligne soit visible par :
- Mac OS,
- Mac iOS (iPhone et iPad),
- Windows,
- Windows mobile,
- Android,
- Linux.
Cette vidéo allant être lue par un navigateur web il faut donc penser à :
- Chrome,
- Internet Explorer 9+,
- Internet Explorer 8,
- Safari,
- Android,
- Opera,
- Konqueror,
- etc.
Une vidéo se compose d’images et de sons compressés. Donc il y a un codec pour la vidéo et 1 codec pour l’audio. Quelques dizaines pour chaque ….
Lesquels choisir pour avoir un maximum de compatibilité ?
Malheureusement il n’existe aucun codec vidéo ou codec audio universellement utilisé par les navigateurs du marché.
Pour quelle raison ?
Les guerres de brevets et de licences. Les grands acteurs souhaitant imposer leurs modèles sous licence et refusant catégoriquement d’intégrer des codec opensource ou en tout cas pas les mêmes.
Très concrètement, il faut donc compresser la vidéo sous plusieurs formats pour parcourir le plus grand nombre de navigateur et ensuite écrire le code HTML adapté pour que le navigateur récupère le bon format.
Sinon, vous sacrifiez certains de vos visiteurs …
Comment font les plateformes spécialisées ? elles aussi ont les même contraintes que vous mais leurs serveurs peuvent compresser automatiquement la vidéo que vous envoyez en plusieurs formats.
Les formats compatibles (et recommandés)
- Ogg Theora (libre)
- WebM (libre) VP8 ou VP9
- MP4 (propriétaire) H.264
Le lecteur vidéo
Le HTML5 dispose de la balise <video> mais tous les navigateurs ne supportent pas le HTML5.Un lecteur flash n’est pas pris en charge par certains navigateurs et notamment sous iOS.Il est donc nécessaire d’intégrer les 2 possibilités, sans que celà se voit pour le visiteur.Les lecteurs vidéo (ou audio) en flash peuvent être gratuits ou soumis à licence d’utilisation. En voici quelques uns :
- FlowPlayer
- f4player
- DewTube ou DewPlayer
Notre préférence se porte sur DewTube / DewPlayer. Cependant ce lecteur nécessaite d’ajouter la compression vidéo en format flv.
Pour garantir la compatibilité maximale, il est donc nécessaire d’intégrer le lecteur Flash et les balises HTML5.
Hébergement
Le choix de la solution d’hébergement de vos fichiers vidéos dépend tout simplement du nombre de vues que vous allez avoir ou que vous souhaiteriez avoir.
La vidéo est un mélange de sons et d’images, le plus souvent à 24 images par secondes ce qui en fait donc des fichiers très volumineux. Leur visualisation en streaming (temps réel) consomme de la bande passante (la débit d’informations pouvant circuler) qui n’est pas illimitée sur votre hébergeur.
Peu de visites
La majorité des hébergeurs tolèrent une utilisation raisonnable de la bande passante dédiée à la diffusion de vidéos. Sinon votre hébergeur pourra vous couper les accès.
Nombre important
Pour que la vidéo puisse être vue par de nombreux visiteurs simultanément, vous disposez de plusieurs possibilités de flux en cloud.
La solution la plus courante est le service S3 d’Amazon AWS. La tarification est à la bande passante consommée.
Intégrer une vidéo sur le site en « brut »
En prenant compte de l’ensemble des recommandations citées ci-dessus, il faut donc intégrer la vidéo dans les différents formats et embarquer le lecteur vidéo.
Par exemple :
<video poster="/chemin-vers-image-de-garde.jpg" controls="controls" width="640" height="360">
<source src="/ma-video.mp4" type="video/mp4" />
<source src="/ma-video.webm" type="video/webm" />
<source src="/ma-video.ogv" type="video/ogg" />
<object type="application/x-shockwave-flash" data="dewtube.swf" width="640" height="360"> <paramname="movie" value="dewtube.swf" /> <paramname="allowFullScreen" value="true" /> <paramname="wmode" value="transparent" /> </object>
</video>