PROGRAMMATION WEB ( partie 1)



La vidéo



Cliquez_ici pour voir comment insérer une vidéo de youtube




Question 7:


- Ajouter une vidéo de youtube dans votre  page web.





Infos sur les vidéos


Pour  stocker une vidéo on a besoin de trois éléments :

  • Un format conteneur : c'est un peu comme une boîte qui va servir à contenir deux autres éléments. On reconnaît en général le type de conteneur à l'extension du fichier : AVI, MP4, MKV… Le conteneur contient:


    • Un codec audio: c'est le format du son de la vidéo. Nous venons de les voir, on utilise les mêmes : MP3, AAC, OGG…

    • Un codec vidéo: c'est le format qui va compresser les images, ces formats ne sont pas libres et on ne peut pas toujours les utiliser gratuitement.


Les principaux codecs vidéos pour le Web sont :


H.264 : l'un des plus puissants et des plus utilisés aujourd'hui, il n'est pas 100% gratuit. En fait, on peut l'utiliser gratuitement pour la diffusion de vidéos sur un site web personnel.

Ogg Theora : un codec gratuit et libre de droits, mais moins puissant que H.264. Il est bien reconnu sous Linux , sous Windows  il faut installer des programmes pour pouvoir le lire.


WebM : un autre codec gratuit et libre de droits, plus récent. Proposé par Google, c'est le concurrent le plus sérieux de H.264 à l'heure actuelle.


Voici la compatibilité des codecs vidéos avec les principaux navigateurs au moment où ont été écrites ces lignes:




  • La paire de balises <video> ...</video>


<video src="votre_fichier_vidéo.mp4"  controls> </video>


Il est possible de proposer chaque vidéo dans plusieurs formats pour qu'elle soit lisible avec un maximum de navigateurs, vous utilisez alors la paire de balises <source>... </source> à l'intérieur de la paire de balises <video> ...</video> . Le navigateur  lit le premier qu'il reconnaît,


Exemple:  

<video controls>
<source src="votre_fichier_vidéo.mp4" />

<source src="votre_fichier_vidéo.webm" />

<source src="votre_fichier_vidéo.ogv" />
</video>

Les attributs  de la balise  <video>:


controls: pour ajouter les boutons « Lecture », « Pause » et la barre de défilement.


width : pour modifier la largeur de la vidéo.


height : pour modifier la hauteur de la vidéo.



















Créé avec HelpNDoc Personal Edition: Créer des livres électroniques EPub facilement