Intégrer des vidéos sur votre site Web
Les contenus audiovisuels attirent l’attention et ne font pas seulement plaisir aux visiteurs de votre site. Les moteurs de recherche eux aussi attribuent de la valeur ajoutée aux sites proposant des contenus multimédias. Les vidéos vous permettent tout particulièrement de concevoir des offres d’information plus variées. Les produits et services peuvent ainsi être présentés de manière plus détaillée qu’avec des textes ou illustrations. La mise à disposition de contenus vidéo sur des sites Web était une tâche laborieuse durant de nombreuses années. Pour pouvoir visionner ces contenus multimédias vous deviez installer manuellement les plugins nécessaires (comme Adobe Flash Player par exemple) sur les navigateurs Web correspondants et les mettre à jour régulièrement, ce qui menait souvent à des problèmes de compatibilité ainsi que des failles de sécurité. Les fournisseurs étaient de plus confrontés à des codes embarqués compliqués et avaient de temps en temps des difficultés pour convertir les vidéos au format adéquat (SWF par exemple). Pourtant ces technologies devraient bientôt être une histoire ancienne. Dans sa cinquième version, le protocole Hypertext Markup Language (HTML) propose un élément natif à l’aide duquel des contenus vidéo complets peuvent être intégrés dans le code d’une page Web. De manière alternative, vous avez la possibilité de laisser l’exploitation de l’hébergement vidéo à des fournisseurs tels que YouTube ou Vimeo par exemple. Nous vous montrons comment cela fonctionne.
- Domaine .eu ou .fr + éditeur de site gratuit pendant 6 mois
- 1 certificat SSL Wildcard par contrat
- Boîte email de 2 Go
HTML5 : l’intégration de vidéos
HTML5 transforme l’intégration de vidéos en un jeu d’enfants. Tout ce dont vous avez besoin est un élément vidéo natif, pouvant être élargi avec des caractéristiques optionnelles. Le code suivant vous montre un exemple d’intégration de ressources vidéo dans le code source de votre site Web :
<video src="exemple.mp4" width=320 height=240 controls poster="vignette.jpg">
Cette vidéo ne peut être affichée sur votre navigateur Internet.<br>
Une version est disponible en téléchargement sous <a href="URL">adresse du lien </a> .
</video>L’élément vidéo en exemple contient l’URL de la ressource vidéo (src=“exemple.mp4“) ainsi que les attributs optionnels width, height, controls et poster, définissant comment la vidéo est représentée sur le site. Le texte entre la balise d’introduction et de conclusion de l’élément vidéo est seulement affiché si le navigateur ne peut représenter la vidéo. Les exploitants de sites Web utilisent généralement cette fonction pour proposer à leurs visiteurs une description alternative ainsi qu’un lien pour le téléchargement de la ressource en question.
Attributs optionnels des éléments vidéo HTML5
SI un attribut est intégré à un élément vidéo, ce dernier doit contenir un lien vers la ressource en tant que src-attribut ou Kindelement source. Un élément vidéo peut être élargi via les attributs présentés ci-dessous :
| Attribut | Fonction |
|---|---|
| width/height | Les attributs width et height vous permettent d’indiquer les dimensions de vos vidéos explicitement. S’il manque cette indication, l’élément vidéo accède aux informations sur la taille du fichier de la vidéo. Si vous utilisez uniquement un des deux attributs, le navigateur adapte automatiquement le rapport hauteur/largeur. |
| controls | Avec l’attribut controls, vous activez la barre de menu native du navigateur. Des éléments de cette barre de menu peuvent être définis alternativement avec JavaScript. |
| poster | L’attribut poster permet de définir un fichier image servant de vignette d’aperçu pour votre vidéo. Si cet attribut n’est pas présent, le premier plan de la vidéo est utilisé. |
| autoplay | L’attribut autoplay indique au navigateur Web de lancer la vidéo automatiquement lors du chargement de la page où se trouve la vidéo. |
| loop | Utilisez l’attribut loop pour que la vidéo se lance en boucle. |
| muted | L’attribut muted permet de couper le son de la vidéo. |
| preload | L’attribut preload indique que la vidéo doit être chargée dès l’ouverture de sa page Web, sans lancer la vidéo. Trois différentes valeurs sont possibles pour cela : la valeur standard auto charge l’ensemble du fichier normalement, un élément vidéo avec la valeur preload metadata charge uniquement les métadonnées en avance et la valeur none empêche le chargement automatique de fichiers vidéo. |
Navigateur Web sans assistance HTML5
Les versions actuelles des navigateurs courants sont compatibles avec HTML5. Pour rendre vos contenus vidéo accessibles aux utilisateurs qui ne possèdent pas les bonnes versions, vous pouvez utiliser des liens textuels au sein de l’élément vidéo ou proposer un fichier vidéo téléchargeable.
Le chaos du codec HTML5
La spécification HTML5 définit l’élément vidéo et l’interface de programmation correspondante (application programming interface, API) mais n’exige aucune spécification ou encodage de vidéo. Le choix du format de la vidéo confronte donc les exploitants de sites Web à ces problèmes. Chacun des formats vidéo courants WebM, OggTheora et H.264/MPEG4 présente des avantages et des inconvénients. Les navigateurs les plus populaires n’arrivaient pas à s’accorder pour trouver un standard commun jusqu‘à aujourd’hui. Tandis que Safari et Internet Explorer ont été les premiers à s’accorder sur l’utilisation du format H.264/MPEG4, un format disponible partout depuis 2013, Firefox, Chrome et Opera ont opté pour des formats libres tels qu’Ogg Theora et WebM.
| Navigateur | MP4 (Fichiers MPEG4 avec codec vidéo H.264 + Codec Audio AAC) | WebM (Fichiers WebM avec codec video VP8/VP9 + codec Audio Vorbis) | Ogg (Fichiers Ogg avec codec Video Theora + Codec Audio Vorbis) |
|---|---|---|---|
| IE 9+ | oui | non | non |
| Firefox | oui | oui | oui |
| Chrome | oui | oui | oui |
| Safari | oui | non | non |
| Opera | oui | oui | oui |
Pour prévenir des problèmes d’incompatibilité, il est recommandé de fournir des vidéos dans des formats différents. L’élément video permet dans ce but d’intégrer différentes ressources vidéo grâce au Kindelement source ainsi que l’attribut typ permettant de déterminer le navigateur Web :
<video width=320 height=240 controls poster="vignette.jpg">
<source src="exemple.webm" type="video/webm">
<source src="exemple.ogg" type="video/ogg">
<source src="exemple.mp4" type="video/mp4">
</video>Si des éléments source, avec les attributs typ correspondants, sont intégrés dans l’élément video, le navigateur Web choisit automatiquement le format vidéo favori. On doit pour cela tenir compte du fait que l’élément video ne peut pas contenir d’attribut src avec ce type d’intégration de vidéo.
Intégrer des contenus audiovisuels sur les plateformes vidéo
Si vous ne souhaitez pas héberger vos vidéos sur votre propre serveur, vous pouvez recourir à un hébergeur vidéo externe spécialisé. Les plateformes telles que YouTube et Vimeo offrent la possibilité de télécharger gratuitement les documents vidéo et d’intégrer ces vidéos à votre site Web grâce à un code embarqué.
Etant donné que les plateformes vidéo s’assurent que vos contenus soient compatibles avec les navigateurs Web les plus courants, les formats utilisés par ces fournisseurs de service sont aussi compatibles avec la plupart des appareils mobiles. L’externalisation de clips vidéo présente l’avantage que votre serveur ne verra pas sa charge de données augmenter à cause du streaming vidéo. Les exploitants de pages Web devraient cependant s’informer sur les conditions d’utilisation de l’hébergement vidéo utilisé au préalable et adapter le code embarqué selon leurs propres exigences.
Si vous souhaitez par exemple intégrer une vidéo YouTube, vous pouvez charger la page correspondante sur YouTube et copier le code embarqué dans votre menu d’intégration d’éléments. Les réglages généraux peuvent y être effectués pour définir les dimensions des vidéos ainsi qu’activer une barre de menu et le titre de la vidéo. Pour empêcher que les contenus étrangers apparaissent sur votre propre page, la fonction de visionnage d’autres vidéos recommandées peut être désactivée. Cette plateforme vidéo peut en effet présenter sur le lecteur de votre site Internet des contenus d’autres utilisateurs aux mots-clés similaires, et dans le pire des cas, afficher des vidéos de concurrents directs.