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.

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 :

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.

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 Kindelementsource. Un élément vidéo peut être élargi via les attributs présentés ci-dessous :

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.

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.

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 Kindelementsource ainsi que l’attribut typ permettant de déterminer le navigateur Web :

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.

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.