Initiation à la création de site Web

Médias

Voir aussi :

La balise object

Les types de médias

HTML autorise les auteurs à concevoir des documents qui exploitent les caractéristiques du média sur lequel le document doit être restitué.
exemples de média : écran graphique, écran de télévision, appareil de poche, navigateur à synthèse vocale, appareil tactile Braille
l'attribut media permet aux agents utilisateurs de charger et appliquer les feuilles de style de manière sélective

Exemples des descripteurs de médias :

screen : destiné aux écrans d'ordinateur non-paginés
projection : destiné aux projecteurs
print : destiné aux supports paginés et aux documents visionnés à l'écran en mode aperçu avant impression
braille : destiné aux appareils Braille
aural : destiné aux synthétiseurs de parole
all : convient pour tous les supports

Exemples :

<link rel="alternate stylesheet" type="text/css" media="screen"
      title="Textes Grande Taille" href="/styles/bigfonts.css" />

<head>
  <style type="text/css" media="projection">
    h1 { color: blue}
  </style>

  <style type="text/css" media="print">
    h1 { text-align: center }
  </style>
</head>

@media screen {
  body { background-color: black; }
}
@media print {
  body { background-color: none; }
}

Le son et la vidéo

facteurs importants : le temps de téléchargement et la capacité en mémoire
les formats reconnus dans une page web :
- audio :
  - formats audio sans compression : RAW, WAV (ou WAVE), AIFF
  - formats audio compressés sans perte : ATRAC, FLAC
  - formats audio compressés avec perte : MP3 (le plus utilisé), WMA, AAC
- vidéo : MPEG-1/2/4, WMV, RealVideo, Flash
ils peuvent rendre votre document HTML plus vivant, mais au risque de le rendre plus lent au chargement
pour placer des sons dans un document HTML, ils doivent être traités avec un logiciel de traitement sonore et sauvegardés dans un des formats mentionnés plus haut

les outils permettant de lire des fichiers audios ou video à partir d'une page Web (voir cette comparaison) :

outil	par qui	plateforme	coût
Windows Media Player	Microsoft	MS Windows	gratuit (licence de Windows nécessaire)
QuickTime Player	Apple	MS Windows, Mac OS X	version de base gratuite
iTunes	Apple	Mac OS X, Microsoft Windows, Linux	gratuit
Real Player	Real Networks	MS Windows	version de base gratuite
VLC	VideoLAN	Mac OS X, Microsoft Windows, Linux	gratuit

statistiques
exemples :

Comment inclure un fichier de son ?

Code HTML :

<a href="media/battementsdecoeur.wav">son</a>

Dans le navigateur :

son

Code HTML :

<a href="media/foudre.wav"><img src="media/orage.jpg" alt="orage"></a>

Dans le navigateur :

L'élément bgsound permet de créer des pages avec un fond sonore et de paramétrer la durée de diffusion, le volume et la balance.
L'élément bgsound admet les types de fichiers sons suivants: fichiers .WAV, fichiers .AU, séquences MIDI: .MID
Attributs :

`src`	définit l'URL du fichier sonore
`loop`	définit le nombre de fois que la séquence sonore sera exécutée (si loop=-1, ou si loop=infinite, la séquence sonore boucle indéfiniment)
`volume`	réglage du volume sonore; valeurs possibles de -10,000 à 0, avec 0 correspondant au volume maxi
`balance`	réglage de la balance entre les hauts-parleurs de droite et de gauche. Valeurs possibles de -10,000 à +10,000 . La valeur -10,000 indique que le son est entièrement dirigé vers le haut-parleur de gauche. La valeur +10,000 indique que le son est entièrement dirigé vers le haut-parleur de droite. La valeur 0 indique que le son est équilibré entre les deux hauts-parleurs.

La balise <bgsound> n'est pas conforme aux normes W3C et n'est pas supportée par Firefox.

La balise <object> permet d'insérer dans un document HTML, des objets multimédias de différents types tels que les contrôles ActiveX, des modules Flash, des programmes écrits en Java.
Attributs :

`codebase`	identifie l'adresse URL à partir de laquelle le code de l'objet sera chargé
`codetype`	définit le type de contenu associé au code
`data`	identifie une adresse où l'objet pourra importer les données nécessaires à son initialisation
`type`	spécifie le type des données de l'objet

Exemples :

Code HTML :

<object data="media/ace_ventura_pet_detective.mid" width="145" height="60">
  <param name="loop" value="true"/>
  <param name="autoplay" value="false"/>
</object>

Dans le navigateur :

Code HTML :

<object type="audio/midi" width="0" height="0" data="media/battementsdecoeur.wav">
  <param name="filename" value="media/battementsdecoeur.wav"/>
  <param name="autostart" value="true"/>
  <param name="loop" value="3"/>
</object>

Dans le navigateur :

Code HTML :

<object data="media/lebzzzdelamouche.wav" width="0" height="0">
  <param name="loop" value="1"/>
</object>

Dans le navigateur :

Comment inclure une vidéo ?

Voir cet article.

L'insertion d'une séquence vidéo est un peu plus compliquée à cause des différences entre les navigateurs, ces dernières souvent étant réglées avec un code javascript ou un code serveur et à cause des plugins qui doivent être installés.
On utilise la balise object (la balise embed n'est plus valide W3C à partir du HTML 4.0) :

Code HTML :

<a href="media/voyager.avi">Star Trek Voyager</a>

Dans le navigateur :

Star Trek Voyager

Code HTML :

<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" type="video/quicktime">
  <param name="filename" value="http://www.ananova.com/about/vap_windows_check.wmv"/>
  alt : <a href="http://www.ananova.com/about/vap_windows_check.wmv">http://www.ananova.com/about/vap_windows_check.wmv</a>
</object>

Dans le navigateur :

Code HTML :

<object data="media/voyager.avi" type="video/avi" width="350" height="200">
  <param name="filename" value="media/voyager.avi"/>
  <param name="autostart" value="false"/>
  <param name="loop" value="true"/>
  alt : <a href="media/voyager.avi">voyager.avi</a>
</object>

Dans le navigateur :

test du format mpg

Code HTML :

<object data="media/test.mpg" type="video/mpeg" width="320" height="255">
  <param name="src" value="media/test.mpg"/>
  <param name="autoplay" value="false"/>
  <param name="autoStart" value="true"/>
  alt : <a href="media/test.mpg">test.mpg</a>
</object>

Dans le navigateur :

test du format avi

Code HTML :

<object data="data/test.avi" type="video/x-msvideo" width="320" height="255">
  <param name="src" value="media/test.avi"/>
  <param name="autoStart" value="0"/>
  alt : <a href="media/test.avi">test.avi</a>
</object>

Dans le navigateur :

test du format mov

Code HTML :

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
                  codebase="http://www.apple.com/qtactivex/qtplugin.cab"
                  width="320" height="255">
  <param name="src" value="media/test.mov"/>
  <param name="controller" value="true"/>
  <param name="autoplay" value="false"/>

  <object type="video/quicktime" data="media/test.mov" width="320" height="255">
    <param name="controller" value="true"/>
    <param name="autoplay" value="false"/>
    alt : <a href="media/test.mov">test.mov</a>
  </object>
</object>

Dans le navigateur :

Lecture automatique

Pour que la vidéo soit lue automatiquement, il faut ajouter l'attribut qui convient.

Windows Media autostart="1"

RealPlayer autostart="true"

Quicktime autoplay="true"

L'intégration d'un lecteur vidéo de YouTube : Google Video Viewer

Code HTML (basé sur cet article) :

<object width="425" height="355">
  <param name="movie" value="http://www.youtube.com/v/u1zgFlCw8Aw?rel=1&color1=0x2b405b&
    color2=0x6b8ab6&border=1&fs=1"></param>
  <param name="allowFullScreen" value="true"></param>
  <param name="allowScriptAccess" value="always"></param>
  <embed src="http://www.youtube.com/v/u1zgFlCw8Aw?rel=1&color1=0x2b405b&color2=0x6b8ab6&border=1&fs=1"
    type="application/x-shockwave-flash"
    allowscriptaccess="always"
    width="425" height="355"
    allowfullscreen="true"></embed>
</object>

Média "aural"

Les feuilles de styles auditives

on peut utiliser les propriétés des feuilles de style pour une présentation auditive
Exemple :

La propriété de feuille de style css voice-family permet de spécifier le type de voix à utiliser pour la lecture d'un bloc texte.

<style media="aural">
  h1 { voice-family: announcer, male }
  span.romeo  { voice-family: romeo, male }
  span.juliet { voice-family: juliet, female }
  .enfant{voice-family:child; }
</style>
...
<span class="romeo">Je suis Juliet</span>
<span class="homme">Je suis Romeo</span>
<span class="enfant">Je suis un enfant</span>

des avantages évidents pour l'accessibilité des documents (une utilisation dans les voitures, les divertissements à la maison, une aide aux utilisateurs qui ont des difficultés à lire, ...)
on peut spécifier des sons avant, pendant et après d'autres sons
Exemple :
```
h1, h2, h3, h4, h5, h6 {
  voice-family: paul;
  stress: 20;
  richness: 90;
  cue-before: url("ping.au")
}
p.anne { azimuth: center-left }
p.pierre { azimuth: right }
p.chevre  { volume: x-soft }
```
Ceci va conduire le synthétiseur de parole à dire les en-têtes avec une voix (un peu comme une "police auditive") appelée "paul", d'un ton neutre mais avec des intonations fortes. Avant la lecture de celles-ci, un échantillon sonore, désigné par l'adresse URL, sera joué. Les paragraphes avec la classe "anne" sembleront venir de l'avant gauche et ceux avec la classe "pierre" venir de la droite. Les paragraphes avec la classe "chevre" seront dits très doucement.
le descripteur de media aural avec les propriétés associées restent largement théoriques;
il n'existe aucun navigateur qui reconnaisse une feuille de style aural, à l'exception d'Emacspeak, une interface auditive destinée aux systèmes linux, qui reconnaît quelques propriétés auditives;
la raison est la complexité des propriétés auditives; elles pourront être modifiées dans CSS 3.0.

Média "print"

CSS 2.0 permet de contrôler la mise en page à l'impression.
Exemple :
```
div.chapitre, div.appendice {
  page-break-after: always;
}
table {
  page-break-inside:avoid;
}
```
Malheureusement, les propriétés correspondantes sont supportées partiellement par les navigateurs.
la propriété display:none peut être utilisée pour faire disparaître certaines sections pendant l'impression

Windows Media	autostart="1"
RealPlayer	autostart="true"
Quicktime	autoplay="true"

Médias

Les types de médias

Exemples des descripteurs de médias :

Le son et la vidéo

Comment inclure un fichier de son ?

Comment inclure une vidéo ?

Lecture automatique

L'intégration d'un lecteur vidéo de YouTube : Google Video Viewer

Média "aural"

Les feuilles de styles auditives

Média "print"