Lecteur vidéo: <vidéo>

L'insertion d'une vidéo se fait à l'aide d'un élément <vidéo>. Celui-ci est un élément d'information dans une page qu'il faut placer au même niveau que les titres et les paragraphes.

				
<titre3>La CODEPO en action</titre3>
<vidéo>
   <you-tube id="02qF8F9lBX8"/>
</vidéo>

Ce qui donne :

Actuellement, la façon la plus efficace pour intégrer une vidéo sur votre page web est de stocker celle-ci sur un site extérieur à l'Université. Le plus connu est le site YouTube.

YouTube possède en effet des serveurs ultra-performants répartis un peu partout sur le globe et totalement dédiés à la diffusion de vidéos. Ces moyens techniques sont hors de portée de l'université.

Comme on peut le voir dans l'exemple ci-dessus, il suffit d'insérer un élément <you-tube> avec un attribut id qui mentionne l'identificateur de votre vidéo sur YouTube (cet identificateur a été généré par le site YouTube lorsque vous avez chargez la vidéo).

Pour l'instant, seules les vidéos postées sur YouTube sont supportées.

Des attributs peuvent être placés tant sur l'élémént <vidéo> que sur l'élément <you-tube> pour modifier la manière dont la vidéo doit être affichée.

Position de la vidéo

Par défaut, comme on peut le voir ci-dessus, la vidéo est centrée dans la zone où elle se trouve (dans la page, le bloc, la colonne, etc.).

Pour contrôler cette position, on utilise comme pour les images, un attribut position qui peut valoir gauche, droite, centre, gauche-texte et droite-texte.

On peut ainsi placer l'image à gauche (c'est la valeur par défaut), à droite, la centrer au milieu de la page, ou faire en sorte que l'image vienne se placer à gauche ou à droite au sein même du texte contenu dans la page.

							
<p>Texte qui précède la vidéo.</p>
<vidéo position="gauche">
   <you-tube id="02qF8F9lBX8" largeur="200" hauteur="120"/>
</vidéo>
<p>Texte placé après la vidéo.</p>

						

							
<vidéo position="droite">
   <you-tube id="02qF8F9lBX8" largeur="200" hauteur="120"/>
</vidéo>

						

							
<vidéo position="centre">
   <you-tube id="02qF8F9lBX8" largeur="200" hauteur="120"/>
</vidéo>

						

							
<vidéo position="gauche-texte">
   <you-tube id="02qF8F9lBX8" largeur="200" hauteur="120"/>
</vidéo>
<p>Ce texte vient se placer...</p>

						

							
<vidéo position="droite-texte">
   <you-tube id="02qF8F9lBX8" largeur="200" hauteur="120"/>
</vidéo>
<p>Ce texte vient se placer...</p>

						

Vidéos placées sur YouTube

Actuellement, la façon la plus efficace de placer une vidéo sur vos pages web, est de stocker cette vidéo sur un site extérieur à l'Université. Le plus connu est le site YouTube. YouTube possède en effet des serveurs ultra-performants répartis un peu partout sur le globe et totalement dédiés à la diffusion de vidéos. Ces moyens techniques sont hors de portée de l'université.

Une fois votre vidéo en place sur YouTube, il suffit d'utiliser l'élément <you-tube id="..."> dans la balise <vidéo>, ou id est l'identificateur que YouTube à associer à votre vidéo.

Dimension de la vidéo YouTube

Par défaut, la vidéo s'affiche dans sa taille native (celle qui a été choisie lors de son enregistrement). On peut changer cette taille par défaut en utilisant les attributs largeur et hauteur.

Ces deux attributs acceptent une valeur numérique en nombre de pixels ou en pourcentage par rapport à la taille de la zone où la vidéo est placée (surtout utile pour la largeur).

La largeur et la hauteur se règlent indépendamment, ce qui peut amener à déformer la vidéo. Vous avez tout intérêt à rester dans un rapport largeur/hauteur proche de celui d'origine.

											
<vidéo>
   <you-tube id="02qF8F9lBX8" largeur="100%"/>
</vidéo>
						
						

											
<vidéo>
   <you-tube id="02qF8F9lBX8" largeur="200" hauteur="150"/>
</vidéo>