<!-- Slide number: 1 -->
Audio & Video
Ouali mohamed
<!-- Slide number: 2 -->
Les formats audio
| Navigateurs | MP3 | Wav | Ogg |
| --- | --- | --- | --- |
| Internet Explorer | OUI | NON | NON |
| Chrome | OUI | OUI | OUI |
| Firefox | NON (Les nouvelles mise à jour OUI) | OUI | OUI |
| Safari | OUI | OUI | NON |
| Opera | NON | OUI | OUI |
Types MIME types pour les formats audio
| Format | MIME-Type |
| --- | --- |
| MP3 | audio/mpeg |
Publicité
| Ogg | audio/ogg |
| Wav | audio/wav |
<!-- Slide number: 3 -->
Insérer de l’audio
Elément HTML5 audio
Attribut controls obligatoire (sans valeur)
Attributs facultatifs :
Autoplay : lecture automatique
Loop : lecture en boucle
Width : modifie la largeur de la barre de lecture
Preload : sauvegarde de la bande passante. (valeurs : metadata, auto et none)
<!-- Slide number: 4 -->
Exemples
<audio src="Audio/mixdown.ogg" controls>
Document audio.
</audio>
<audio controls loop preload>
<source src="Audio/mixdown.ogg" />
Publicité
<source src="Audio/04 - Zenigata Rock.mp3" />
</audio>
<object data="dewplayer-bubble.swf" width="250" height="65" name="dewplayer" id="dewplayer" type="application/x-shockwave-flash">
<param name="movie" value="dewplayer-bubble.swf" />
<param name="flashvars" value="mp3=Audio/04 - Zenigata Rock.mp3" />
<param name="wmode" value="transparent" />
</object>
<!-- Slide number: 5 -->
Les formats vidéo
| Navigateurs | MP4 | WebM | Ogv |
| --- | --- | --- | --- |
| Internet Explorer | OUI | NON | NON |
| Chrome | OUI | OUI | OUI |
| Firefox | NON (Les nouvelles mise à jour OUI) | OUI | OUI |
| Safari | OUI | NON | NON |
| Opera | NON | OUI | OUI |
Types MIME types pour les formats audio
| Format | MIME-Type |
Publicité
| --- | --- |
| MP4 | video/mp4 |
| Ogv | video/ogv |
| WebM | video/webm |
<!-- Slide number: 6 -->
Insérer des vidéos
Elément HTML5 video
Cet élément prend exactement les mêmes attributs que l’élément audio
En plus d’autres attributs :
Poster : permet d’ajouter une image au chargement de la vidéos
…
<!-- Slide number: 7 -->
Exemples
<video src="Video/small.mp4" controls poster="poster.jpg">
Document video.
</video>
<video controls preload>
<source src="Video/Sample.webm" />
Publicité
<source src="Video/small.mp4" />
<source src="Video/small.3gp" />
<source src="Video/small.flv" />
<source src="Video/small.ogv" />
</video>
<!-- Slide number: 8 -->
Exemples
<object data="Video/small.mp4" type="video/mpeg" width="520" height="255">
<param name="src" value="Video/small.mp4">
<param name="autoplay" value="false">
<param name="autoStart" value="0">
alt : <a href="Video/small.mp4">Video/small.mp4</a>
</object>