Portail / Les sites Web(Sommaire)

Intégration d'une vidéo.

Avec HTML5, l'époque des extensions (plug-in ou add-on) de lecteur vidéo à intégrer au navigateur pour pouvoir visualiser des vidéos est terminée.

Exemple commenté.

Voici le code de base qui vous permettra d'intégrer des vidéos dans tout navigateur conforma à HTML5.

<video src="{URL de la vidéo}" width={largeur} height={hauteur} 
       controls poster="{URL de l'image de fond de la vidéo avant démarrage}">
  Cette vidéo ne peut pas être affichée par votre navigateur.<br>
  Une version est disponible en <a href="{URL de la vidéo}" target="_blank">téléchargement</a>.
</video>

Voici ce que donne ce code dans la réalité sur le navigateur que vous utilisez en ce moment :

Le problème est que la spécification de la balise <video> ne précise rien quant aux codecs que doit supporter le navigateur. Il n'y a donc aucune garantie que le navigateur puisse lire un format donné de vidéo. Le standard actuellement le plus répandu et donc le mieux supporté est H.264/MPEG4. Si vous voulez assurer un maximum de portabilité, il est recommandé de convertir la vidéo dans différents formats et de placer les URL qui leurs correspondent dans la balise <video>.

<video width={largeur} height={hauteur}
       src="{URL de la vidéo sans extension}.mp4"
       src="{URL de la vidéo sans extension}.ogg"
       src="{URL de la vidéo sans extension}.webm"
       controls poster="{URL de l'image de fond de la vidéo avant démarrage}">
  Cette vidéo ne peut pas être affichée par votre navigateur.<br>
  Une version est disponible en 
  <a href="{URL de la vidéo sans extension}.mp4" target="_blank">téléchargement</a>.
</video>

Attributs.