HTML - Vidéo

» HTML » Tutoriel HTML - Insérer des vidéos dans des pages html

Un fichier vidéo peut être inséré dans une page html de deux facons. La première façon serait d'utiliser la balise <embed/>. Cette balise n'a pas besoin de balise de fin. Cela marche, majoritairement, comme la balise pour une photo.

html<embed src="example.mpeg" autostart="false" height="30" width="144" />

Aussi, vous pouvez insérer un fichier vidéo en utilisant un lien.

html<a href="example.mpeg" title="Télécharger film">nom du film</a>

Extensions supportées par la balise embed

Elles sont:

.swf - créée par Macromedia Flash
.wmv - Microsoft Windows Media Video
.mov - Quick Time Movie, appartient a Apple
.mpeg - créée par Moving Pictures Expert Group.

Les plus utilisées sont .mpeg and .swf, à cause de leur format compact.

Les attributs de la balise embed

autostart - définit si le fichier démarrera automatiquement après que la page soit chargée. Peut avoir la valeur true ou false
hidden - définit si les boutons sont cachés ou non. Peut avoit la valeur true ou false.
volume - peut avoir n'importe quelle valeur de 0 a 100
loop- définit si le fichier sera rejoué après qu'il soit fini. Peut avoir la valeur true ou false.
playcount - cela défini combien de fois le fichier sera rejoué. Par exemple playcount="2" signifie qu'il sera rejoué deux fois et après il s'arrêtera.

Insérer une video YouTube en utilisant une balise embed

Vous pouvez faire cela très facilement, parce que YouTube dispose du code HTML requis sur chaque page.

html<object width="425" height="344" data="https://www.youtube.com/embed/FiCiRkkfxhM"></object>

html<embed src="https://www.youtube.com/embed/FiCiRkkfxhM" allowfullscreen="true" width="425" height="344">

html<iframe  width="425" height="344" src="https://www.youtube.com/embed/FiCiRkkfxhM" frameborder="0" allowfullscreen></iframe>

Demo

Même si tout ce que vous voyez est assez chaotique, la bonne chose est que vous avez simplement à le copier de YouTube, et le coller sur votre site, et vous aurez votre vidéo. Même si par la suite YouTube fourni un simple iFrame pour pouvoir partager.

Je mentionnerai que les scripts embed sur youtube ne sont pas valides avec du XHML. Pour générer des codes valides pour les vidéos sur youtube XHML je recommande cet outil qui génère un embed code pour YouTube valide en XHTML pour les vidéos. Entrez simplement l'URL où vous avez trouvé la vidéo et vous recevrez un code XHTML valide.

HTML5 balise vidéo

Avec l'introduction du HTML5, la balise vidéo s'est répandu tres rapidement avec une bonne compatibilité avec les navigateurs modernes. La balise vidéo est utilisée pour ajouter une vidéo a la page html. Pour le moment la balise video HTML5, supporte 3 types de fichiers vidéo:

mp4 - MIME-type video/mp4
webm - MIME-type video/webm
ogg - MIME-type video/ogg

html<video width="320" height="240" controls>
  <source src="/assets_tutorials/media/Shaun-the-Sheep-The-Movie-Official-Trailer.mp4" type="video/mp4">
  <source src="/assets_tutorials/media/Shaun-the-Sheep-The-Movie-Official-Trailer.ogg" type="video/ogg">
Votre navigateur ne supporte pas la balise vidéo.
</video>