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 pos­si­bi­lité d’ex­ter­na­li­ser l’hé­ber­ge­ment de la vidéo à des four­nis­seurs tels que YouTube ou Vimeo. Découvrez ici comment faire !

Intégrer des vidéos avec HTML5

HTML5 trans­forme l’in­té­gra­tion 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 ca­rac­té­ris­tiques op­tion­nelles. Le code suivant vous montre un exemple d’in­té­gra­tion de res­sources 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 op­tion­nels width, height, controls et poster, dé­fi­nis­sant comment la vidéo est re­pré­sen­tée sur le site. Le texte entre la balise d’in­tro­duc­tion et de con­clu­sion de l’élément vidéo est seulement affiché si le na­vi­ga­teur ne peut re­pré­sen­ter la vidéo. Les ad­mi­nis­tra­teurs de sites Web utilisent gé­né­ra­le­ment cette fonction pour proposer à leurs visiteurs une des­crip­tion al­ter­na­tive ainsi qu’un lien pour le té­lé­char­ge­ment de la ressource en question.

Attributs op­tion­nels 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é­ci­fi­ca­tion HTML5 définit l’élément video et l’interface de pro­gram­ma­tion cor­res­pon­dante, mais ne donne aucune in­di­ca­tion 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 in­con­vé­nients. Il n’existe pas à ce jour de norme commune à tous les na­vi­ga­teurs. Le tableau ci-dessous résume la prise en charge des codecs vidéo par les prin­ci­paux na­vi­ga­teurs :

*par­tiel­le­ment

Pour éviter les in­com­pa­ti­bi­li­tés, il est donc re­com­mandé de fournir dif­fé­rents formats lorsque vous intégrez une vidéo dans votre site Web. L’élément video permet à cet effet d’inclure dif­fé­rentes res­sources vidéo via l’élément enfant source et de les marquer avec l’attribut type pour le na­vi­ga­teur 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 al­ter­na­tifs avec un attribut type approprié sont intégrés dans l’élément video, le na­vi­ga­teur sé­lec­tionne au­to­ma­ti­que­ment le format vidéo qu’il préfère lors du char­ge­ment de la page. Il est important de noter que, dans ce type d’in­té­gra­tion, l’élément video ne doit pas contenir d’attribut src avec une ressource di­rec­te­ment ren­seig­née.

Intégrer une vidéo sur un site Web via une pla­te­forme vidéo

Si vous ne souhaitez pas intégrer une vidéo avec HTML, vous pouvez recourir à un hébergeur vidéo externe spé­cia­lisé. Les pla­te­formes telles que YouTube et Vimeo offrent la pos­si­bi­lité de té­lé­char­ger gra­tui­te­ment les documents vidéo et d’intégrer ces vidéos à votre site Web grâce à un code embarqué.

Etant donné que les pla­te­formes vidéo s’assurent que vos contenus soient com­pa­tibles avec les na­vi­ga­teurs Web les plus courants, les formats utilisés par ces four­nis­seurs de service sont aussi com­pa­tibles avec la plupart des appareils mobiles. L’ex­ter­na­li­sa­tion 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 ad­mi­nis­tra­teurs devraient cependant s’informer sur les con­di­tions d’uti­li­sa­tion de l’hé­ber­ge­ment 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 cor­res­pon­dante sur YouTube et copier le code embarqué dans votre menu d’in­té­gra­tion d’éléments. Les réglages généraux peuvent y être effectués pour définir les di­men­sions des vidéos ainsi qu’activer une barre de menu et le titre de la vidéo. Pour empêcher que des contenus étrangers ap­pa­rais­sent sur votre propre page, la fonction de lecture au­to­ma­tique de vidéos re­com­man­dées peut être dé­sac­ti­vée. Cette pla­te­forme vidéo peut en effet afficher sur le lecteur intégré de votre site des contenus d’autres uti­li­sa­teurs aux mots-clés si­mi­laires, voire afficher des vidéos de con­cur­rents directs.