Nouveau standard du développement Web, le HTML 5 intègre quelques balises très utiles censées nous faciliter la vie lors de la création d'une page internet.Parmi ces balises, la fameuse ‹video› permet d'intégrer facilement du contenu multimédia sans se préoccuper de la présence du plugin flash, mediaplayer ou autre.
<video preload="auto" controls="controls" tabindex="0">
<source src="MaVideo.mp4" type="video/mp4">
<source src="MaVideo.webm" type="video/webm">
<source src="MaVideo.ogv" type="video/ogg">
Votre navigateur ne prend pas en compte la balise vidéo.
<video>
Les attributs "preload", "controls" et "tabindex" étant facultatifs.
On remarque que cette balise contient trois sources, soit trois vidéos différentes. Pourquoi? Et bien tout simplement pour maximiser les chances d'être compatible avec le navigateur de l'utilisateur. En effet, Firefox privilégie par exemple l'ogv alors qu'internet explorer cherchera un mp4 (.h264).
Enfin, ici on peut voir un simple texte de remplacement s'affichant à la place de la vidéo si celle ci n'est pas prise en compte par le navigateur de l'utilisateur. Il est possible de la remplacer par l'utilisation d'un lecteur flash, ou l'intégration d'une vidéo youtube, afin d'améliorer encore un peu plus la compatibilité.
Si vous avez déjà utilisé la balise ‹video›, vous avez sans doute remarqué qu'elle suit le placement logique d'un élément HTML "display: block;" : sous l'élément précédent, à gauche. Il existe plusieurs solution pour la centrer dans l'élément parent :
_ Contraindre la largeur de la vidéo et la placer par rapport à la largeur de l'élément parent,
_ Connaitre la largeur de la vidéo et la placer par rapport à la largeur de l'élément parent.
Ces deux méthodes posent problème.
La première joue sur la qualité de la vidéo, en effet une vidéo de 300 px de large, redimensionnée par le navigateur en 500 px va forcement afficher une qualité moindre. Dans l'autre sens, il est dommage de priver l'utilisateur d'une vidéo de 800 px pour l'obliger à la regarder en 500 px.
La seconde oblige de connaitre à l'avance la taille de notre vidéo, et de jouer sur le style. Pour une ou deux vidéos ce n'est pas bien embêtant, mais qu'advient il lorsque le nombre de vidéos se chiffre en dizaines?
Voici une petite astuce permettant de centrer automatiquement une vidéo, sans connaitre sa taille au préalable grâce à JavaScript.
Nous allons utiliser le gestionnaire d’événements "addEventListener" avec l'attribut "loadedmetadata" qui nous permettra d’appeler une fonction de callback lorsque notre vidéo sera chargée. Une fois la vidéo chargée par le navigateur, il est en effet possible de connaitre (entre autres choses) ses dimensions.
Voici comment cela va se traduire dans notre code JavaScript :
MaVideo.addEventListener('loadedmetadata', loadedVideoMetadataFunction, false);
Ici nous attachons donc le gestionnaire d’événements à notre vidéo. Lorsque la vidéo sera chargée, la fonction loadedVideoMetadataFunction (que nous détaillerons plus loin) sera appelée. A ce stade, la vidéo est déjà intégrée dans le DOM, à une place qui ne nous convient pas. Nous allons donc nous même replacer cette vidéo (par l'intermédiaire de JavaScript) lorsque nous serons en possession de ses dimensions, grâce à la fonction loadedVideoMetadataFunction :
function loadedVideoMetadataFunction(e) {
var VideoW = this.videoWidth;
if(VideoW<500) {
var tmp = (500-VideoW) / 2;
this.style.marginLeft = tmp+"px";
}
}
Le paramètre "e" passé à la fonction représente l'évènement appelant. Il n'est peut être pas utile ici, mais c'est une bonne habitude a prendre lorsque l'on utilise les évènements pour Internet Explorer.
Première chose que cette fonction va faire : récupérer la largeur de notre vidéo.Elle va ensuite comparer la taille récupérée à la taille maximum que peut prendre une vidéo dans la page (ici 500px, définis dans mon CSS). Si cette taille est inférieur, notre vidéo sera obligatoirement décentrée sur la gauche.
Il faut donc la décaler sur la droite de "(500-VideoW) / 2". Pour cela, la fonction va appliquer une marge à gauche à notre vidéo, de la taille correspondante.
Notre vidéo est maintenant centrée.
Attention, l'exemple proposé ne centre la vidéo que lorsqu'elle est inférieur à 500px, il s'agit du code que j'utilise pour mon site. J'ai défini une propriété max-width de 500px pour mes vidéos, que je centre grâce aux CSS. Si la vidéo que je tente d'afficher est égale ou supérieur à 500px de large, elle est automatiquement centrée par CSS. N'hésitez pas à adapter le code selon vos besoins.