HTML : comment intégrer une vidéo sur son site Web ?

Depuis la mise à jour HTML5, un élément natif permet d’intégrer des vidéos en tant que contenu Web à part entière. Vous avez également la possibilité d’externaliser l’hébergement de la vidéo à des fournisseurs tels que YouTube ou Vimeo. Découvrez ici comment faire !

Intégrer des vidéos avec HTML5

HTML5 transforme l’intégration de vidéos en un jeu d’enfant. 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">
    <p>Cette vidéo ne peut être affichée sur votre navigateur.<br>
    Une version est disponible en téléchargement sous <a href="URL">adresse du lien</a>.</p>
</video>

L’élément video 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 administrateurs 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 video, ce dernier doit contenir un lien vers la ressource en tant qu’attribut src ou élément enfant source. L’élément video peut être élargi via les attributs présentés ci-dessous :

Prise en charge du codec HTML5

La spécification HTML5 définit l’élément video et l’interface de programmation correspondante, mais ne donne aucune indication sur l’encodage vidéo. Le choix du format vidéo peut donc poser problème. Chaque format vidéo courant, qu’il s’agisse de WebM, Ogg Theora ou H.264, présente des avantages et des inconvénients. Il n’existe pas à ce jour de norme commune à tous les navigateurs. Le tableau ci-dessous résume la prise en charge des codecs vidéo par les principaux navigateurs :

*partiellement

Pour éviter les incompatibilités, il est donc recommandé de fournir différents formats lorsque vous intégrez une vidéo dans votre site Web. L’élément video permet à cet effet d’inclure différentes ressources vidéo via l’élément enfant source et de les marquer avec l’attribut type pour le navigateur Web :

<video width="320" height="240" controls poster="vignette.jpg">
    <source src="exemple-av1.webm" type="video/webm; codecs=av01.0.05M.08">
    <source src="exemple-vp9.webm" type="video/webm; codecs=vp9">
    <source src="exemple.mp4" type="video/mp4; codecs=avc1.42E01E">
    Votre navigateur ne prend pas en charge la balise vidéo.
</video>

Lorsque des éléments source alternatifs avec un attribut type approprié sont intégrés dans l’élément video, le navigateur sélectionne automatiquement le format vidéo qu’il préfère lors du chargement de la page. Il est important de noter que, dans ce type d’intégration, l’élément video ne doit pas contenir d’attribut src avec une ressource directement renseignée.

Intégrer une vidéo sur un site Web via une plateforme vidéo

Si vous ne souhaitez pas intégrer une vidéo avec HTML, 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 administrateurs 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 des contenus étrangers apparaissent sur votre propre page, la fonction de lecture automatique de vidéos recommandées peut être désactivée. Cette plateforme vidéo peut en effet afficher sur le lecteur intégré de votre site des contenus d’autres utilisateurs aux mots-clés similaires, voire afficher des vidéos de concurrents directs.