Tutoriel HTML5

HTML5

Découvez les bases et les nouveautés du HTML5 dans ce tutoriel.

HTML CSS Dreamweaver Bootstrap PHP

Balise video en HTML5

Dans ce tutoriel, nous allons aborder l'intégration de vidéo en HTML5..

La balise video

La balise <video> permet de lire une vidéo, elle supporte ces 3 formats : MP3, Wav, and Ogg

Les formats vidéos supportés

Format Type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

Exemple

<video title="Wildlife" preload="auto" autoplay controls>
<source src="medias/wildlife.ogv" type="video/ogg">
<p>Wildlife</p>
</video>

<figure> et <figcaption> avec la balise video

La balise <figure> est en fait une unité de contenu, un encart pour isoler un bloc avec un contenu principalement constitué de un ou plusieurs éléments : multimédias, diagrammes, tableaux, illustrations, exemples, codes, images, vidéos, ou carrément du texte.

la balise <figcaption> permet d'afficher une légende ou une description du contenu de la figure.

Exemple

Lire une vidéo
<figure>
<video title="Wildlife" preload="auto" controls>
<source src="medias/wildlife.ogv" type="video/ogg">
<p>Wildlife</p>
</video>
<figcaption>Lire une vidéo</figcaption>
</figure>

Maximiser la compatibilité

Si tous les navigateurs ne sont pas compatibles avec un même codec, il peut parfois être judicieux de le remplacer par un autre. Dans l'exemple ci-dessous, si on ne peut pas lire le format mp4, on passera au format ogg.

<video title="Wildlife" preload="auto" autoplay controls>
<source src="medias/wildlife.mp4" type="video/mp4">
<source src="medias/wildlife.ogv" type="video/ogg">
<p>Wildlife</p>
</video>

Attributs de la balise video

Attribut Valeur Description
autoplay autoplay Précise si la lecture se lance automatiquement
controls controls Indique si les boutons de contrôles (lecture, arret …) doivent être visibles.
loop loop Indique si le fichier doit tourner en boucle.
preload
  • none = pas de préchargement (économise donc de la bande passante si le contenu audio n’est pas lu)
  •   auto = préchargement
  •   metadata = préchargement mais uniquement des métadonnées du fichier audio.
Permet d’indiquer au navigateur de précharger en arrière plan le fichier media. L’attribut preload peut prendre 3 valeurs :
src url Chemin ver le fichier audio

Autobuffer

autobuffer

L’attribut autobuffer est utilisé lorsque autoplay ne l’est pas et lorsque l’auteur de la page pense que la vidéo sera regardée après le téléchargement. Avec cet attribut activé, le téléchargement du film se fera en arrière-plan. Lorsque l’utilisateur la regardera, celui-ci sera en partie téléchargé, et une bonne partie du vidéo pourra être visionné sans attente. Si les attributs autoplay et autobuffer sont tous les deux spécifiés, autobuffer sera ignoré.

Il est important de noter que présentement les navigateurs téléchargent automatiquement les vidéos, avec ou sans autobuffer et qu’on ne peut pas changer ce comportement. Ceci a un impact sur la bande passante utilisée par votre site Web, particulièrement si vous avez plusieurs vidéos sur une même page.

Poster poster="photo.jpg" L’attribut poster sert à afficher une image du vidéo (en format jpg, png ou autre) si le vidéo ne se charge pas pour une raison ou une autre. Cette image peut être locale au serveur accédé ou peut provenir d’ailleurs sur le Web.
width width="400" Définit la largeur
height height="250" Définit la hauteur
muted muted="muted" Permet de couper le son

Contrôle avec Javascript




<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<button onclick="makeNosound()">Muted</button>
<br><br>
<video title="Wildlife" preload="auto" controls width="420" class="center-block" id="video1">
<source src="medias/wildlife.ogv" type="video/ogg">
<p>Wildlife</p>
</video>
</div>

<script>
var myVideo = document.getElementById("video1");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig() {
myVideo.width = 560;
}
function makeSmall() {
myVideo.width = 320;
}
function makeNormal() {
myVideo.width = 420;
}
function makeNosound() {
myVideo.muted="muted";
}
</script>

Ce site est liste dans la categorie Enseignement et formation : Formations professionnelles de l'annuaire Référencement et Dictionnaire

Frédéric création Jardin | Au petit grandeur | Jerico | Solumetal | Comonmarket | Chez Beau J'ai | Beukenne Traiteur | PDP Recouvrement | Agroé - Achat groupé d'énérgie | Achat goupé Sorea | CE LM énergie | placedesenergies.com | Gazon de la Folie | Dépannage pôele à  pellet | Création site web Nord | Rénovation habitat Pas de calais | Cuisine Bois | Créperie à  Valenciennes | Repar Coudre | DNS service | Archis 2 | 3MI | Tests d'orientation professionnels - Solutests | Ircl | Leblan promotion | Formation webmaster, PAO, CAO / DAO | Formateur Web, référencement et PAO | Formateur bureautique |