Exercices sur les balises multimédia

page HTML reproduisant un fichier audio

Écrire une page HTML 5.0 émettant le contenu sonore du fichier ici présent

Pour cela nous auron recours à la balise audio

Faire en sorte que :

Les contrôles d'acvancement soien présents,
La musique démarre automatiquement,
Les contrôles d'acvancement soient présents,
La musique tourne en boucle,
En cas de non support de la part du navigateur, présenter un lien permettant le chargement du fichier,

Fichier à produire :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
  <title>Utilisation el la balise audio.</title>
</head>
<body>
  <h1>Test de la balise <samp>audio</samp></h1>
  <audio autoplay="autoplay" loop="loop" controls="controls"> 
    <source src="song.ogg" type="audio/ogg"/> 
    <p><a href="song.ogg">Télécharger le fichier au format Vorbis</a></p>
  </audio>
 
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML validé !</a></p>
</body>
</html>

voir le résultat

page HTML affichant une video

Écrire une page xHTML 5 affichant la vidéo contenu dans le fichier ici présent

Pour cela nous aurons recours à la balise audio

Faire en sorte que :

Les contrôles d'avancement soient présents,
La video soit automatiquement chargée dès l'ouverture de la page,
La vidéo tourne en boucle,
En cas de non support de la part du navigateur, présenter une applet chargeant le fichier flash ici présent
En cas de non support du flahs et de la balise video présenter un lien permettant le chargement du fichier vidéo.

Fichier à produire :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
  <title>Utilisation de la balise video.</title>
</head>
<body>
  <h1>Utilisation de la balise video.</h1>
  <video width="640" height="480" preload="auto" loop="loop" controls="controls" poster="image.png"> 
    <source src="Big_buck_bunny_mcu.ogv" type="video/ogg"/>
    <source src="video.h264" type="video/mp4"/>
    <object type="application/x-shockwave-flash" data="test.swf" width="320" height="240">
      <param name="movie" value="test.swf"/>
      <param name="loop" value="false"/>
      <p>Mode échec :</p>
      <ul>
	<li>pour visualiser en <em>Theora/vorbis</em> cliquez sur le lien suivant :
	  <a href="Big_buck_bunny_mcu.ogv">Big_buck_bunny_mcu.ogvg</a>,</li>
	<li>pour visualiser en <em>h264</em> cliquez sur le lien suivant :
	  <a href="video.h264">video.h264</a>.</li>
      </ul>
      Mode échec cliquez sur le lien suivant : <a href="Big_buck_bunny_mcu.ogv">Big_buck_bunny_mcu.ogvg</a>
    </object>
  </video> 
 
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML validé !</a></p>
</body>
</html>