Insertion sans problème de clip RealPlayer dans vos pages HTML4.1
Avec l’apparition des spécifications HTML4.1 l’insertion de fichiers RealPlayer est devenue bien plus exigeante dans son codage. Sans déclaration Doctype 1 dans les pages de votre site ou en cas d’erreur(s) de validation, les navigateurs de vos visiteurs passent en mode quirks 2 :
le plug-in ne se lance pas ou est instable (plantages réguliers).
Pour éviter cela, vos pages doivent être validées HTML4.1-transitional ou -strict,
elles ne doient donc pas contenir de balise <embed>.
>> pour les pages déclarées HTML5
Votre page doit être validée HTML4.1 -transitional ou strict
Une erreur de validation (ex. : la balise <table> avec l’attribut height= qui lui est interdit) rendra les navigateurs de vos visiteurs instables, et ils risquent de se venger sur leur plug-in RealPlayer par des plantages à répétition.
Pour vérifier vos pages, procédez à une validation W3C.
Non-conforme aux spécifications HTML4.1, on doit donc abandonner sans regret cette balise <embed>.
Bizarrement, Internet Explorer a toujours besoin d’un codage particulier pour son ActiveX. On peut donc lui dédier une première balise <object> qui imbrique une seconde balise <object> destinée au plug-in des principaux navigateurs actuels.
En gris, la balise à ajouter pour assurer la compatibilité avec IE.
En orange, la balise compatible avec les deux principaux navigateurs actuels, Firefox et Chrome, mais aussi Safari et Opéra.
Vous noterez bien que :
- les paramètres sont en minuscules ;
- il y a des " " autour de chaque valeur d’attribut ;
- l’adresse du fichier doit être absolue ;
- chaque paramètre est indiqué sous la forme :
<param name="nom_du_paramètre" value="valeur_possible"> ;
- plutôt que d’indiquer un paramètre avec la valeur "false" par défaut,
autant ne pas mentionner le paramètre concerné.
Exemples 3 de codages HTML4.1 -transitional ou strict validés W3C
La première balise <object> concerne Internet Explorer, et imbrique une seconde balise <object> qui est lue sans problème par Firefox, Chrome, Safari et Opéra.
Fichier RealPlayer unique dans la page, panneau de contrôle seul, en démarrage auto :
<object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="165" height="36">
<param name="src" value="adresse de votre fichier.rpm">
<param name="controls" value="ControlPanel">
<param name="autostart" value="true">
<object type="audio/x-pn-realaudio-plugin"
data="adresse de votre fichier.rpm" width="165" height="36">
<param name="controls" value="ControlPanel">
<param name="autostart" value="true">
</object>
</object>
Fichier RealPlayer en musique de fond, sans visualisation, en démarrage auto :
<object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="0" height="0">
<param name="src" value="adresse de votre fichier.rpm">
<param name="controls" value="ImageWindow">
<param name="autostart" value="true">
<object type="audio/x-pn-realaudio-plugin"
data="adresse de votre fichier.rpm" width="0" height="0">
<param name="controls" value="ImageWindow">
<param name="autostart" value="true">
</object>
</object>
Paramètres obligatoires
classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"
Cet attribut de la balise object indique aux navigateurs concernés le module à lancer.
type="audio/x-pn-realaudio-plugin"
Cet attribut de la balise object indique aux navigateurs concernés le MIME-type 4 du plug-in à lancer.
width height
Indiquée dans la balise object en nombre seul (traduits en pixels) ou en pourcentage (possible uniquement avec le paramètre ImageWindow), la taille de l’objet RealPlayer a des répercussions dans l’affichage des panneaux et boutons de contrôles, qui sont détaillés sur cette page.
Dans le cas d’une musique de fond sans la moindre visualisation, indiquez la valeur "0" pour width et height
(et non pas la valeur "1").
data et src
Ces attributs précisent aux navigateurs l’adresse absolue du fichier .rpm.
Le fichier .rpm est un simple fichier texte qui indique sur une seule ligne l’adresse absolue du fichier .rm, le contenu du clip obtenu par RealProducer 5.
Ce fichier .rm est lu par le plug-in realplayer (et non par l’application complète) intégré dans les navigateurs (Firefox, Chrome, IE, etc.) pour y être diffusé en streaming dans la page de votre site.
Ne pas confondre avec le fichier .ram (il suffit de modifier manuellement l’extension du fichier .rm pour obtenir un fichier .ram) : celui-ci lance le programme Realplayer (et non pas son plug-in) pour sa diffusion en streaming dans une application extérieure au navigateur. Le code est alors réduit à la syntaxe d’un simple lien externe :
<a href="adresse de votre fichier.ram" target="_blank">texte ou image</a>
controls 6
Ce paramètre permet de préciser les valeurs d’affichage suivantes : ImageWindow (fenêtre de visualisation seule), ControlPanel (panneau de contrôle seul), All , ... ,
mais aussi chaque bouton séparé, notamment PlayButton, PauseButton, StopButton : la liste exhaustive des valeurs possibles et de tous les affichages possibles est consultable ici.
Il est possible de personnaliser l’affichage en spécifiant autant de valeurs souhaitées (séparées par une virgule sans espace) les éléments choisis seront placés l’un en dessous de l’autre.
Paramètres optionnels
console
Si votre page web contient plusieurs groupes de balises object imbriquées (qu’ils concernent un seul ou plusieurs clips) il convient d’ajouter à chacun de ces groupes le paramètre console afin de gérer leur interactivité. Vous pouvez lui attribuer la valeur de votre choix (lettres et chiffres seulement) ou bien la valeur _master (pour appliquer les attributs controls mentionnés à toutes les autres consoles) ou encore _unique (pour couper tout lien vers d’autre console).
Les applications sont variées : mise en commun d’une seule fenêtre ImageWindow dans laquelle les différents clips insérés dans la page seront diffusés, et/ou mise en commun de plusieurs contrôles paramétrés séparément en taille et/ou placés précisément dans la page pour le même clip.
Dans le cas où l’on désire mettre en commun une seule fenêtre ImageWindow dans laquelle seront diffusés plusieurs clips, chacun représenté par un panneau de contrôle spécifique, il faut ajouter un premier couple de balises imbriquées pour ImageWindow avec le paramètre console ayant la valeur _master pour un seul des clips concernés, sachant que ce paramètre s’appliquera à tous les clips, exceptés ceux disposant d’un paramètre console ayant pour valeur _unique :
<object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="largeur_vidéo" height="hauteur_vidéo">
<param name="src" value="fichier1.rpm">
<param name="controls" value="ImageWindow">
<param name="console" value="_master">
<object type="audio/x-pn-realaudio-plugin"
data="fichier1.rpm" width="largeur_vidéo" height="hauteur_vidéo">
<param name="controls" value="ImageWindow">
<param name="console" value="_master">
</object>
</object>
... suivi d’autant de couples de balises imbriquées <object> que de clips concernés, en ne précisant que l’attribut controls qui leur sont spécifiques (ControlPanel dans cet exemple) :
<object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="165" height="36">
<param name="src" value="fichier1.rpm">
<param name="controls" value="ControlPanel">
<param name="console" value="nom_commun">
<object type="audio/x-pn-realaudio-plugin"
data="fichier1.rpm" width="165" height="36">
<param name="controls" value="ControlPanel">
<param name="console" value="nom_commun">
</object>
</object>
... suite éventuelle du code avant d’insérer le clip suivant :
<object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="165" height="36">
<param name="src" value="fichier2.rpm">
<param name="controls" value="ControlPanel">
<param name="console" value="nom_commun">
<object type="audio/x-pn-realaudio-plugin"
data="fichier2.rpm" width="165" height="36">
<param name="controls" value="ControlPanel">
<param name="console" value="nom_commun">
</object>
</object>
... ainsi de suite, selon le nombre de clips concernés.
Dans le cas où l’on veut préciser une taille et un placement spécifiques pour chaque élément d’affichage dédié à la diffusion d’un même clip, on créera autant de doubles balises <object> imbriquées que d’éléments d’affichage désirés, avec dans chacune d’elle un paramètre console ayant la même valeur de votre choix (lettres et chiffres seulement).
Si votre page ne contient qu’un seul clip sous la forme d’un seul groupe de balises <object> imbriquées, vous pouvez ignorer le paramètre console.
autostart
Avec la valeur "true", le plug-in RealPlayer devra démarrer automatiquement la lecture du fichier. Si ce n’est pas votre volonté, ignorez ce paramètre.
loop ou numloop
Indiquez un seul de ces paramètres pour répéter la diffusion du fichier RealPlayer, soit indéfiniment avec le paramètre loop et la valeur "true" (plutôt que d’opter pour la valeur "false", ignorez ce paramètre), soit en précisant le nombre d’écoutes par la valeur numérique du paramètre numloop (qui se suffit à lui-même).
nologo
Ce paramètre n’intervient qu’en présence du paramètre ImageWindow, pour remplacer le logo RealPlayer par une couleur de fond (noir par défaut), paramétrable par backgroundcolor. Plutôt que d’opter pour la valeur "false", ignorez ce paramètre.
backgroundcolor
Ce paramètre n’intervient qu’en présence du paramètre ImageWindow et du paramètre nologo pour paramétrer la couleur du fond visible en indiquant une valeur au format héxadécimal RVB :
<param name="backgroundcolor" value="#RRVVBB"> en 6 ou 3 valeurs, conformément aux préconisations W3C). Plutôt que d’opter pour la valeur "false", ignorez ce paramètre.
center
Ce paramètre n’intervient qu’en présence du paramètre ImageWindow, pour centrer la vidéo dans une fenêtre plus grande en width et height. Plutôt que d’opter pour la valeur "false", ignorez ce paramètre.
maintainaspect
Ce paramètre n’intervient qu’en présence du paramètre ImageWindow, pour adapter la taille de la vidéo homothétiquement (sans déformation) à la fenêtre plus grande en width ou height. Plutôt que d’opter pour la valeur "false", ignorez ce paramètre.
nojava
Ce paramètre, censé empêcher le lancement de Java Virtual Machine (JVM), est lié à la balise <embed> et interdit tout script java lié au nom de la console. Si vos insertions RealPlayer ne sont pas liées à des commandes javascript,
RealNetworks recommande de spécifier ce paramètre dans la balise <embed> avec la valeur "true". Comme il ne concerne pas la balise <object>, ignorez ce paramètre.
id
Cet attribut de la balise object permet de lui donner un nom, ce qui me semble inutile en dehors de commandes sur le serveur ou de commandes javascript.
Index et liens
1 Doctype : La déclaration d’une page conforme à la DTD HTML4.1 se fait sous la forme de ce code placé avant la balise <html> :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
2 quirks (mode compatibilité des navigateurs) : Que se passe-t-il en mode quirks ?
3 Exemples : source des exemples, parmi cet excellent dossier sur la balise <object>
4 MIME-type selon le type de fichier RealPlayer
.rm : application/x-pn-realmedia
.rpm : audio/x-pn-realaudio-plugin
.ram ou .ra : audio/x-pn-realaudio
5 Lien Download RealProducer en version gratuite en bas de cette page
6 controls : les valeurs valides pour le plug-in RealPlayer
Realplayer en HTML5
| 
