TONER KEBAB WIKI

====== HTML: audio & vidéo ======

===== audio =====
Il est désormais aisé d'intégrer un fichier audio dans une page web.

<code>
<audio src="musique.mp3">
</audio>
</code>

Lancement automatique du son

<code>
<audio src="musique.mp3" autoplay>
</audio>
</code>

En boucle

<code>
<audio src="musique.mp3" autoplay loop>
</audio>
</code>

Barre de contrôle

<code>
<audio src="musique.mp3" controls>
</audio>
</code>


===== vidéo =====

Intégrer de la vidéo est aussi relativement facile.

<code> 
<video src="film.mp4" controls width="360" height="240">
</video>
</code>

Ajouter une image d'affichage

<code> 
<video src="film.mp4" controls width="360" height="240" poster="aperçu.jpg">
</video>
</code>

===== C'est pas si simple! =====

Pour garantir une lecture audio quel que soit le navigateur.

==== Audio ====
<code>
<audio controls>
<source src="musique.ogg" type="audio/ogg">
<source src="musique.mp3" type="audio/mpeg">
<object type="application/x-shockwave-flash" data="player.swf?soundFile=musique.mp3">
<param name="movie" value="player.swf?soundFile=musique.mp3">
<a href="musique.mp3">Télécharger la chanson</a>
</object>
</audio>
</code>

==== Vidéo ====
<code>
<video controls width="360" height="240" poster="aperçu.jpg">
<source src="film.ogv" type="video/ogg">
<source src="film.mp4" type="video/mp4">
<object type="application/x-shockwave-flash" width="360" height="240" data="player.swf?file=film.mp4">
<param name="movie" value="player.swf?file=film.mp4">
<a href="film.mp4">Télécharger le film</a>
</object>
</video>
</code>

==== Vidéo hébergée sur le web ====

Pour intégrer une vidéo hébergée par une plateforme sur une page html, il suffit de copier l' “iframe” que l'on trouve chez l'hébergeur de la vidéo.

Par exemple, si je veux inclure une vidéo de youtube, je vais dans l'onglet “partager” puis dans celui d' “intégrer”. Et je copie colle l'iframe dans la page html. 
<code>
<iframe width=“560” height=“315” src=“https://www.youtube.com/embed/kfoJUeyMsOE” frameborder=“0” allowfullscreen></iframe>
</code>
TONER KEBAB WIKI

Outils pour utilisateurs

Outils du site

Outils de la page
