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

Objet de la fiche :

État de la fiche

Plan de la fiche

• | Avant-propos |
• | plugin et type mime |
• | Liens directs |
• | Encapsuler un son avec la balise <bgsound> |
• | Multimédia avec la balise <embed> |
• | Multimédia avec la balise <object> |
• | Conclusions |
• | Prendre les bonnes habitudes |
• | Application au projet de site Web |

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.

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.

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> :

Insertion d'une image (exemple avec png)

Insertion d'un fichier (exemple avec pdf)

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 ⁽¹⁾ noms et valeurs /> Note⁽¹⁾: 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

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.

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.

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.

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.

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