Les Fiches de MonWebFacile





Chapitre

Fiche

 

ATTENTION : Les informations contenues dans cette fiche sont obsolètes mais peuvent être interressantes dans le cadre de l'étude de sites internet anciens. Les développements actuels doivent se faire avec les balises et les API HTML5

Fiche HTML : Balises multimédia bgsound, embed, object

Objet de la fiche :

État de la fiche Terminée validée


Plan de la fiche

Avant propos

Cette fiche présente les différentes balises permettant d'insérer des éléments multimédia dans vos page HTML. Elle ne contient pas la liste exhaustive des attributs et paramètres spécifiques des Plug-in et des lecteurs mais une bonne connaissance des mécanismes de bases pourra vous permettre de trouver facilement des informations complémentaires sur les sites de Real Player, Quicktime, Flash, Window Média Player.

La lecture d'un document multimédia par le navigateur n'est pas si simple. Il doit disposer des Plug-in adaptés: Macromedia Flash, Macromedia Shockwave, QuickTime, RealPlayer, Windows Media Player... À défaut des Plug-in, le visiteur ne verra rien apparaître si ce n'est un texte alternatif s'il a été prévu et peut-être un lien vers le téléchargement du Plug-in adapté.

Il y a plusieurs moyens pour insérer une vidéo dans votre page HTML et donner au visiteur du site la possibilité de la lire dans les meilleures conditions.

  • Faire un lien direct vers le fichier multimédia.
  • Souhaiter que le lecteur multimédia ne s’ouvre pas dans sa propre fenêtre mais dans une fenêtre que vous avez définie dans votre page Internet. En effet la plus part des lecteurs multimédia ne sont pas seulement des applications indépendantes, mais peuvent aussi être activés sous forme de Plug-in ou de composant ActiveX et s’ouvrir dans votre page Web.

Pour réaliser cela HTML mets à notre disposition plusieurs balises.

Les diverses balises audio/vidéo
Balises Commentaires
Les balises de liens <a> La plus simple, mais la moins performante  
La balise <bgsound> Très pratique, facile à mettre en oeuvre Ne concerne que les fichiers sonores.
Windows Internet Explorer uniquement
La balise <embed> Pratique, riche en possibilités, gère tous les types de média. Le lecteur multimédia s'ouvre dans une fenêtre définie par le concepteur de la page. Non reconnue par les anciens navigateurs
Obsolète pour le W3C
La balise <object> Balise officielle du W3C, embarque tous les types de média. Le lecteur multimédia s'ouvre dans une fenêtre définie par le concepteur de la page. 2 codes à prévoir. Un pour Internet explorer et un pour les autres navigateurs

Plugin et type mime

plugin

Petits logiciels additionnels permettant d'étendre les fonctionalités multimédias (lecture du son en temps réel, vidéo, 3D, etc.) des navigateurs (ou autres logiciels) auxquels ils sont associés. Il y en a pour Netscape Navigator et Internet Exploreur, PhotoShop, Illustrator, Graphic-Converter, etc.

Adresse des plugins pour les lecteurs courant
Lecteurs Types
Windows Média Player "http://www.microsoft.com/Windows/MediaPlayer/"
Real Player "http://www.real.com/player/"
Quicktime "http://www.apple.com/fr/quicktime/download/win.html"
Flash "http://www.macromedia.com/go/getflashplayer"

Type mime

Le type MIME est utilisé pour typer les documents attachés à un courrier et pour typer les documents transférés par le protocole HTTP. Lors d'une transaction entre un serveur web et un navigateur internet, le serveur web envoie en premier lieu le type MIME du fichier envoyé au navigateur, ce dernier peut ainsi savoir de quelle manière afficher le document. Il existe beaucoup de type MIME en voici quelques exemples.

Type Mime pour lecteurs courants
Types Mime Navigateurs Lecteurs  
"application/x-oleobject" IE Windows Média Player Audio et vidéo
"audio/x-pn-realaudio-plugin" Autres différents IE avec plug-in Real player Real player Audio et vidéo
"video/quicktime" Autres différents IE avec plug-in Quicktime Quicktime Audio et vidéo
"application/x-shockwave-flash" Autres différents IE avec plug-in Flash Flash  Vidéo flash
"image/jpeg" Autres différents IE   Images jpeg, jpg
"image/gif" Autres différents IE   Images gif
"image/png" Autres différents IE   Images png
audio/mpeg Autres différents IE   Audio mp3
application/pdf Tous   Fichier pdf

Liens directs

Les fichiers sont directement accessibles à partir de liens hypertexte. Le navigateur active automatiquement le lecteur multimédia disponible sur le poste de travail de l'internaute qui dispose de toutes les commandes (lecture, retour, stop, pause ...) mises à sa disposition par le lecteur multimédia.

Il n'est pas certain que votre navigateur puisse jouer tous ces fichiers, probablement il ne reconnaîtra pas certaine extensions ou ne disposera pas du Plug-in nécessaire, mais vous pouvez tout de même essayer.

Pour pouvoir revenir sur la page de monwebfacile vous devrez soit fermer le lecteur, soit utiliser la flèche page précédente du navigateur.

Jouer un fichier audio de type wav <a href="AudioVideo/Son02.wav">Jouer un fichier audio de type wav</a>
Jouer un fichier audio de type mp3 <a href="AudioVideo/Son03.mp3">Jouer un fichier audio de type mp3</a>
Jouer un fichier vidéo de type mpg <a href="AudioVideo/Video01.mpg">Jouer un fichier vidéo de type mpg</a>
Jouer un fichier vidéo de type wmv <a href="AudioVideo/Video02.wmv">Jouer un fichier vidéo de type wmv</a>
Jouer un fichier vidéo de type swf <a href="AudioVideo/Video03.swf">Jouer un fichier vidéo de type swf</a>

Il est bon de connaître cette possibilité, et il aussi bon de ne pas en faire usage pour les raisons suivantes

  • On ne peut pas spécifier quelle application doit être utilisée. Si plusieurs Plug-in sont installés pour le fichier spécifié, on ne peut pas savoir lequel va être utilisé.
  • Si le Plug_in n'est pas installée, on ne propose pas un téléchargement à l'Internaute. Le navigateur indique seulement qu'il ne peut pas afficher le fichier.
  • La balise <A> n'autorise pas de passage de paramètres au Plug-in, donc ne permets pas des contrôles personnalisés en javascript ne peuvent donc pas être utilisés.

Encapsuler un son  avec la balise <bgsound>(Internet Explorer uniquement)

Généralités

<bgsound > est une balise très simple avec seulement trois paramètres exploitables : src pour définir le fichier à jouer, loop pour définir le nombre de fois que le fichier sera joué et volume pour définir le niveau sonore. Il n'y a pas de possibilité d'arrêter le morceau audio en cours. La rapidité de lancement du fichier son dépendra de sa taille, il se peut donc que la musique ne se lance pas au démarrage de la page si elle n'est pas totalement chargée.

Cette balise n'est active que pour le navigateur Internet Explorer.

Syntaxe

<bgsound src= "Mon fichier audio" loop="3" volume="0">

Attributs standards de la balise <bgsound> :

  • src adresse (relative ou absolue) du fichier audio.
  • loop (0-x) défini le nombre de lecture (-1 pour lecture en boucle).
  • volume peut varier de 0 (max) à -10000 (min).

Exemple


Encapsuler du multimédia (audio et vidéo) avec la balise <embed>

Généralités

Cette balise n'est pas une balise spécifique à l'intégration d'éléments sonores mais à l'intégration d'éléments multimédias (sons, images, vidéos, fichiers texte etc...). Elle permet d'intégrer n'importe quel fichier sonore ou vidéo et devra faire appel dans certains cas à un Plug-in. 
Toutefois, elle n'est pas reconnue par tous les navigateurs, et particulièrement les anciens navigateurs. Il faut utiliser la balise <noembed> pour afficher un texte d'avertissement au cas ou le navigateur ne reconnaîtrait pas la balise embed.

Bien que propriétaire Netscape à l'origine et non reprise dans les spécifications officielles  du HTML 4.0  W3C (ou elle est remplacée par la balise <OBJECT>), elle est cependant reconnue par Internet Explorer depuis sa version 3.0, Opéra, Safari, Firefox et constitue une façon simple de mettre de l'audio ou de la vidéo dans vos pages Internet.

Syntaxe

<embed src="ton_fichier.mp3" autostart="true" loop="false" hidden="true" etc......></embed>
<noembed>Texte HTML pour indiquer que votre navigateur ne supporte pas la balise embed </noembed>

Cette balise supporte les attributs courants de style comme les attributs de dimensionnement (height, width), de positionnement (top, left, ...), de couleur de fond, de bordure etc ainsi que  les attributs class (comme référence à une feuille de style) et id (comme référence unique de l'objet)

Attributs multimédia de la balise <embed> :


Attributs <embed>
Paramètres (attributs) Description valeurs
src adresse (relative ou absolue) du fichier multimédia
autostart ou
autoplay (Quicktime)
Spécifie si la vidéo est jouée automatiquement true = oui ou false = non (défaut : true).
autoload Spécifie si le chargement de la vidéo s'effectue automatiquement true = oui ou false = non (défaut : true).
loop Spécifie le nombre de fois où la vidéo est jouée si la valeur est –1 le fichier sera joué indéfiniment
controls ou
showcontrols (Microsoft player)
ou
controller (Quicktime)
Indique si le panneau de contrôle s'affiche Affiche oui (true). Affiche non (false).(défaut : true)
type Indique le type MIME ex: type="audio/mod".  
pluginpage fournit l'URL à partir duquel le plugin pourra être téléchargé.  

Insertion d'une image (exemple avec png)


Attention : Pas d'affichage pour certains navigateurs !
<embed src="http://monwebfacile.free.fr/Tutoriaux/HTML/AudioVideo/Bouquet2.png"
type="image/png">
</embed>
<noembed>Un beau bouquet</noembed>

Insertion d'un fichier (exemple avec pdf)


Le fichier pdf est inclus avec son lecteur. Si l'affichage apparaît brouillé cliquez sur l'objet
<embed
src="http://monwebfacile.free.fr/ Tutoriaux/HTML/AudioVideo/ TestPdf.pdf"
type="application/pdf" width="300" height="200"></embed>
<noembed>Un fichier pdf</noembed>

Insertion Audio et Vidéo

Attention pour les démos audio et vidéo au temps de chargement (fichiers vidéo de l'ordre de 1Mo).

En utilisant la technologie Windows Media Player :

Formats reconnus  .wmv / .wma / .avi / .mpg / .mp3 / .mp4

En utilisant la technologie Real Player :

Formats reconnus  .ram / .rm / .smi / .mp4 / .mp3 / .mpg / .rm

En utilisant la technologie Quicktime :

Formats reconnus .qtl / .mov / .mpg / .mp4 / .mp3

En utilisant la technologie Flash :

Formats reconnus  .swf .mp3 .flv)


Encapsuler du multimédia (audio et vidéo) avec la balise <object>

Généralités

C'est la balise officielle W3C pour encapsuler des objets multimédia dans une page Internet..

La spécification HTML 4.01 présente l'élément <object> ainsi :

...HTML 4 introduit l'élément OBJECT, qui offre une solution générale aux inclusions d'objets génériques. L'élément OBJECT permet aux auteurs HTML de spécifier tout ce que l'objet requiert pour sa présentation par un agent utilisateur : le code source, les valeurs initiales et les données d'exécution. Dans cette spécification, on emploie le terme « objet » pour désigner les choses que les personnes mettent dans les documents HTML ; les termes usuels courants pour ces choses sont : les applets, les modules d'extension [plug-ins], les gestionnaires de média , etc.

Cet élément est conçu pour insérer toute sorte de document. On spécifie de quelle sorte avec l'attribut type en indiquant le type mime, et la source du document avec l'attribut data en indiquant son URI.
Si le navigateur, ou un de ses plugins, sait interpréter ce document, il le fait sinon le contenu imbriqué est affiché.
Tout code HTML peut être insérer comme contenu alternatif, par exemple un lien vers le document, ou une image à la place d'une animation. Ce peut également être un autre <object>, on parle "d'objets imbriqués". 

Syntaxe générale

<object Attributs >
<paramètres (1) noms et valeurs /> Note(1): Les paramètres et leurs valeurs peuvent être différents en fonction des lecteurs.
alt : Info HTML si l'objet n'est pas décodé par le navigateur (alternative)
</object>

Exemple

<object data="Mon Fichier" width=200  height=200 type="video/quicktime" standby="Chargement en cours ...">
<param name="nom du paramètre" value="valeur du paramètre" />
<...>
<...>
alt : "Objet non chargé"
</object>

Attributs normalisés de la balise <object>

Attributs balises <object>
Attributs Description Commentaires
data nom de l'animation chargée par le plugin. adresse (relative ou absolue) du fichier multimédia
codebase URL où se trouve le fichier CAB contenant le plugin.  Aide à l'internaute dont le navigateur ne possède pas le plug-in nécessaire pour jouer le média. codebase Semble bloquer certains navigateurs . Mettre systématiquement des URL absolues pour les animations.
archive Liste d'adresses de fichiers, séparées par des espaces, prenant en charge le chargement et l'exécution de l'object.
declare La déclaration de l'objet n'a qu'une valeur informative, il ne sera pas chargé dans l'immédiat.
classid classidentifier : C'est une URI composé d'un identifiant unique d'un contrôle ActiveX. Identifiant unique permettant d'identifier le Plug-in et invoquer le contrôle activeX approprié. L'attribut classid invoque un contrôle active X (ne fonctionne pas avec autre chose que Internet Explorer!)
codetype Type MIME du contenu des informations pointées par l'attribut classid.
name Définit le nom donné à un élément.
id Identificateur de l'objet. Utile en association avec javascript
class Classe feuille de style de l'objet
standby Texte affiché durant le chargement de l'objet Par exemple "Chargement en cours..."
tabindex Position dans la table d'index. Définit l'index qui représente la position de l'élément dans l'ordre d'exploration par la touche tabulation.
type Type de contenu (content type) des données de l'attribut data (type Mime). Cette information va servir au navigateur à sélectionner le type de lecteur multimédia ou son Plug-in nécessaire pour lire le média précisé par l'attribut data.
usemap URL d'une image map Permet d'associer une map à l'élément. S'il s'agit d'un élément input, il devra être de type image, s'il s'agit de l'élément object, son attribut data devra indiquer l'adresse d'une image.
width, height, border etc : attributs de style commun aux balises HTML doivent être reportés dans une feuille de style CSS (que nous verrons dans le chapitre suivant).

La balise <object> vu par les différents navigateurs


Utilisation des commentaires conditionnels

Pour une balise qui devait fédérer l'ensemble des balises multimédia existante on voit bien les difficultés que va avoir le concepteur de pages Internet pour diffuser du multimédia visible  par les différents navigateurs utilisés par les internautes.

Il va falloir distinguer systématiquement le type de navigateur et pour cela nous utiliseront  les commentaires conditionnels que nous avons déjà vus dans la fiche balises.

<!--[if IE]>
Code pour IE
<![endif]-->
<!--[if !IE]> <-->
Code pour autres navigateurs
<!--> <![endif]-->

Insertion Image, fichier


Défaut de chargement

  <!--[if IE]>
<object <object style="z-index:0" id="MonMedia" width="65" height="90" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
type="application/x-oleobject" >
<param name="URL" value="http://monwebfacile.free.fr/Tutoriaux/HTML/AudioVideo/Bouquet4.png" />
<param name="stretchToFit" value="false" />
<param name="uiMode" value="none" />

<![endif]-->
<!--[if !IE]> <--><object data="http://monwebfacile.free.fr/Tutoriaux/HTML/AudioVideo/Bouquet4.png"
type="image/png">
<param name="src" value="http://monwebfacile.free.fr/Tutoriaux/HTML/AudioVideo/Bouquet4.png" />
<!--> <![endif]-->
alt : "Défaut de chargement"
</object>
Un beau bouquet de fleurs est affiché dans le cas ou l'image ne peut pas être affichée ou si on désactive les images dans le navigateur : à première vue cela ressemble à  l'attribut alt de la balise <img>  sauf qu'ici on n'est pas limité par la taille et on peut y mettre le contenu que l'on veut (paragraphe, titre, etc) puisque c'est de l'html classique.

Insertion Audio et Vidéos

En utilisant la technologie Real Player

   Fonctionne correctement avec IE, mais aléatoire en fonction des navigateurs

Attribut classid de l'objet  real player - classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"

Formats reconnus : .ram / .rm / .smi / .mp4 / .mp3 / .mpg

Quelques paramètres spécifiques de la technologie Real Player.

Paramètres Real Player
Paramètres Commentaires Valeurs
controls Mode affichage de la fenêtre de contrôle all : La fenêtre de contrôle est complète.
ImageWindow : Animation uniquement
PlayButton
autostart Démarrage automatique true : auto.
false : non auto
loop Nombre de répétitions Valeur numérique

En utilisant la technologie Quicktime

Attribut classid de l'objet  quicktime - classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"

Formats reconnus .qtl / .mov / .mpg / .mp4 / .mp3

Quelques paramètres spécifiques de la technologie Quicktime.

Paramètres Quicktime
Paramètres Commentaires Valeurs
autoplay Démarrage automatique ou manuel du média true :automatique
false : manuel
controller Active le bandeau avec boutons stop, pause, fast forward, ou mute. true :avec bandeau
false : sans bandeau
loop Nombre de répétitions Valeur numérique

Retrouvez les attributs et paramètres ci-dessus dans l'exemple ci-dessous compatible tous navigateurs

En utilisant la technologie Flash

Formats reconnus : .swf .mp3 .flv

L'insertion standard fonctionne bien à condition de préciser la source dans un paramètre "movie" en plus de l'attribut "data" pour les navigateurs autre qu'IE.

Attribut classid de l'objet  flash - clsid:D27CDB6E-AE6D-11cf-96B8-444553540000

Quelques paramètres spécifiques de la technologie flash.

Paramètres flash
Paramètres Commentaires Valeurs
play Spécifie si l'animation est jouée automatiquement. true ou false.
menu Spécifie si le menu flash est affiché avec le clique droit. true ou false.
wmode Spécifie si le fond de l'animation est transparent. transparent
opaque
window.
bgcolor Spécifie la couleur du fond de l'animation. Couleur en valeur en hexadécimale.
quality Spécifier la qualité d'affichage de l'animation. low : basse qualité.
autolow : qualité moyenne avec ajustement automatique.
high : qualité haute.
autohigh : qualité moyenne avec ajustement automatique (conseillée).
scale Détermine la taille de l'animation (si width et height sont en %), noscale : Ne redimensionne pas l'animation.
exactfit : rend visible toute l'animation (possibilité de distortion).
noborder : rend visible toute l'animation ( certaines parties peuvent être rognées ).
showall : valeur par défaut.
flashvars Permettre de faire passer des valeurs au swf.
Valable avec un player 6 ou plus.
Attention à l'encodage (utf-8) pour les problèmes d'accents.
 
allowsscriptaccess Permet de spécifier que le swf peut communiquer avec la page HTML qui l'héberge.
- always autorise les opérations de script à tout moment
- never empêche toute opération de script.
- samedomain valeur par défaut, n'autorise les opérations de script que si l'application Flash appartient au même domaine que la page HTML.
swLiveConnect    

En utilisant la technologie activeX de  Windows Media Player

Formats reconnus : .wmv / .wma / .avi / .mpg / .mp3 / .mp4

Quelques paramètres spécifiques de la technologie Windows Media Player.


Paramètres Media Player
 Paramètres Défaut Description
autoStart true Démarrage automatique
balance 0 Valeurs  –100 à 100.
baseURL   URL où se trouve le fichier CAB contenant le plugin.
captioningID 0 Cet attribut associé aux attributs SAMIFileName,
SAMILang, SAMIStyle et à un fichier externe .sami de description,  permet de customiser l'apparence de Windows Média Player
currentMarker 0 Spécifie le numéro du 'marker' courant
currentPosition 0 Position dans le média en secondes
enableContextMenu true Valide ou dé valide le menu disponible après un click droit
fullScreen false Jouer la vidéo en plein écran
Mute false Valide ou de valide le son
PlayCount 1 Nombre de fois ou le fichier sera joué (une fois est la valeur minimum).
Rate 1.0 Spécifie le taux de lecture. 0.5 correspond à la moitié de la vitesse de lecture normale, 2 à deux fois.
stretchToFit false Ajustement automatique de la vidéo à la dimension de la fenêtre
uiMode full Affichage des contrôles :Valeurs possibles: invisible, none (aucun), mini(réduit), full(complet).
URL   Nom du fichier à jouer. Cela peut être un fichier local ou une URL.
Volume   Niveau de volume de 0 à 100.
windowlessVideo false  
SendPlayStateChangeEvents true Active (true) ou désactive (false) l'envoie d'évènements lors du changement d'état du lecteur.

Embarquer une balise embed dans une balise object

Nous avons vu que cet élément est conçu pour insérer toute sorte de document, mais aussi d'autre balises. Ainsi cette possibilité nous permet d'insérer une balise embed de manière à être compris à la fois par les navigateur qui reconnaissent la balise embed et pas la balise object , ceux qui reconnaissent la balise object et pas la balise embed, et enfin ceux qui reconnaissent ces deux balises. Ceci est donné pour information, sachant que les navigateurs modernes reconnaissent très bien la balise object.


Conclusions

Il aurait été naturel de penser que la balise <object> normalisée par le W3C, allait nous permettre de simplifier les codes nécessaires à l'affichage du multimédia, et bien il n'en est rien. Soit on utilise les Plug-in par défaut du navigateur de l'internaute et on risque de ne pas afficher le média si le navigateur ne possède pas le Plug-in requis, soit on utilise les activeX auquel cas on va fonctionner correctement sous IE mais aléatoirement avec les autres navigateurs. Finalement la balise qui fonctionnait le mieux était la balise <embed> déclassée par le W3C au profit de la balise <object> : pourquoi faire simple quand on peut faire compliqué!!

Prendre les bonnes habitudes

  • Je ne me disperse pas dans les types de fichiers multimédia que je veux proposer aux internautes. Un  seul type pour la vidéo et un seul type pour l'audio simplifieront grandement la mise en oeuvre, la maintenance et la lisibilité.
  • J'utilise la balise <object> par souci de compatibilité.

Application au projet de site web

Pas d'adaptation au projet web


Respectons la propriété intellectuelle