Exercice 3

Intégration d’éléments sonores et vidéo

Ce travail consiste à intégrer successivement des éléments sonores et vidéo à des pages web.

Note : Ces deux pages Web comportent des informations très utiles pour la réalisation de cet exercice :

Téléchargez les extraits sonores de jeux vidéos qui vous sont proposés.
Créez un nouveau document XHTML 1.0 Strict qui contiendra ce qui suit :
- le titre : Extraits sonores de jeux vidéos;
- un élément <object> contenant les attributs data (valeur : source de la vidéo/i.e. l’URL), type (valeur : audio/mpeg), title, standby (valeur : texte à afficher pendant le téléchargement), width (valeur : largeur en pixels) et height (valeur : hauteur en pixels);
- les éléments en ligne <param> à inclure à l’intérieur de l’élément objet, dont name=”autoplay” value=”false”;
- le texte alternatif pour les navigateurs qui ne supportent pas l’élément <object>, à placer entre les balises d’ouverture et de fermeture.
Répétez l’étape 2 en utlisant un autre extrait et en modifiant les valeurs des attributs des éléments <object> et <param>.
Validez votre code.
Ouvrez votre page web avec Firefox et notez le résultat.
Ouvrez votre page web avec Internet Explorer et notez le résultat…

Astuce

Petit truc pour permettre l’écoute du fichier en utilisant un player Quicktime avec Internet Explorer :

Insérez votre élément <object> à l’intérieur d’un élément <object> parent auquel vous appliquerez les attributs et valeurs suivants :
<object classid=”clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B” width=”valeur à sélectionner en px” height=”valeur à sélectionner en px” codebase=”http://www.apple.com/qtactivex/qtplugin.cab”">

cet objet incluera notamment la balise en ligne <param name=”src” value=”source de l’extrait sonore/i.e. l’URL” />.
Validez votre code.
Remarquez que l’enregistrement sonore peut maintenant être écouté avec Internet Explorer (le canevas vide qui s’affiche à la droite pourra être subséquemment “effacé” avec CSS).

Remarque : le deuxième élément <object> que vous venez d’ajouter permet l’activation du contrôle ActiveX de Quicktime dans Internet Explorer.

Téléchargez la vidéo Information R/evolution en format Quicktime (.mov), réalisée par Mike Wesch, assistant professeur en anthropologie culturelle à la Kansas State University. (Pour votre information, cette vidéo a été repérée sur youtube.com.)
Créez un nouveau document XHTML 1.0 Strict qui contiendra ce qui suit :
- le titre de la vidéo;
- une mention de l’auteur et de son titre (la permission d’utilisation est conditionnelle à la mention de son auteur);
- un hyperlien sur le nom de l’auteur ayant pour cible sa page personnelle au département d’anthropologie (http://www.ksu.edu/sasw/anthro/wesch.htm);
- un élément <object> que vous qualifierez par les attributs data (valeur : source de l’extrait/i.e. l’URL), type (valeur : video/quicktime), title, standby (valeur : texte à afficher pendant le téléchargement), width (valeur : 425) et height (valeur : 355);
- les éléments en ligne <param> à inclure à l’intérieur de l’élément <object>, dont name=”controller” value=”true” et name=”autoplay” value=”false”;
- le texte alternatif pour les navigateurs qui ne supportent pas l’élément <object>, à placer entre les balises d’ouverture et de fermeture.
Validez votre code.
Ouvrez votre page web avec Firefox et notez le résultat.
Ouvrez votre page web avec Internet Explorer et notez le résultat…

Astuce

Petit truc pour insérer une vidéo Quicktime pouvant être visualisée avec Internet Explorer :

Insérez votre élément <object> à l’intérieur d’un élément <object> parent auquel vous appliquerez les attributs et valeurs suivants :
<object classid=”clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B” width=”425″ height=”355″ codebase=”http://www.apple.com/qtactivex/qtplugin.cab”>

et à l’intérieur duquel vous incluerez la balise en ligne <param name=”src” value=”source de la vidéo/i.e. l’URL” />.
Validez votre code.
Remarquez que la vidéo est maintenant lisible avec Internet Explorer (le canevas vide qui s’affiche à la droite pourra être subséquemment “effacé” avec CSS).

Remarque : le deuxième élément <object> que vous venez d’ajouter permet l’activation du contrôle ActiveX de Quicktime dans Internet Explorer.

W3 Schools. W3Schools Online Web Tutorials, [En ligne]. http://www.w3schools.com (Page consultée le 26 janvier 2010).
W3C. W3C Markup Validation Service, [En ligne]. http://validator.w3.org (Page consultée le 26 janvier 2010).
Joliclic. 2006. La balise object : incorporer du contenu en HTML valide strict. http://joliclic.free.fr/html/object-tag/index.php (Page consultée le 26 janvier 2010).