Insertion sans problème de clip RealPlayer dans vos pages HTML5
Même si les spécifications HTML5 intègrent la balise <embed> encore trop capricieuse, l’insertion de fichiers RealPlayer se basera sur la balise <object> bien plus souple.
Sans déclaration Doctype 1 dans les pages de votre site ou en cas d’erreur(s) de validation, les navigateurs 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 HTML5.
>> pour les pages déclarées HTML4.1
Votre page doit être validée HTML5
Une erreur de validation 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.
On abandonnera sans regret cette balise <embed> trop instable.
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 de codages HTML5 validés W3C
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
type="audio/x-pn-realaudio-plugin"
Cet attribut de la balise object indique aux navigateurs concernés le MIME-type 3 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
Cet attribut précise 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 4.
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 5
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 balises object (qu’ils concernent un seul ou plusieurs clips) il convient d’ajouter à chacune de ces balises 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 une première balise <object> spécifique à ImageWindow avec <param name="console" value="_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 balises <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="nom1" />
</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="nom2" />
</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 balises <object> 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 seule balise <object>, 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 HTML5 se fait sous la forme de ce code,
remplaçant la simple balise <html> :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
2 quirks (mode compatibilité des navigateurs) : Que se passe-t-il en mode quirks ?
3 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
4 Lien Download RealProducer en version gratuite en bas de cette page
5 controls : les valeurs valides pour le plug-in RealPlayer
Realplayer en HTML4.1
|
