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 Javascript : Le multimédia dynamique

Objet de la fiche :

État de la fiche

Avant propos et rappel

Cette fiche reprend les balises multimédia vues dans la section HTML (Les balises Audio et vidéo bgsound, embed, object), et donne des exemples de méthodes de contrôle javascript pour rendre ces composants interactifs.

Rappelons qu'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.

Balises	Commentaires
Les balises de liens <a>	La plus simple, mais la moins performante	javascript non applicable dans cette fiche.
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

L'interactivité javascript consiste à changer dynamiquement la valeur des attributs standards.

<bgsound> et javascript (Internet Explorer uniquement)

Rappel syntaxe et attributs standards

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

Balise <bgsound> couplé avec un petit script javascript pour changer d'extrait musical, modifier le volume, régler le nombre de répétition.

Voir le code

<embed> et javascript

Des commandes javascript

Quelques commandes javascript pour la balise <embed>
Actions	windows media player	real player	flash	quicktime
Pause	.controls.pause()	.DoPause()	.StopPlay()	.Pause()
Jouer	.controls.play()	.DoPlay()	.Play()	.play()
Stop	.controls.stop()	.DoStop()	.StopPlay()	.stop();

Insertion Audio et Vidéo

Nous avons vu dans la section HTML (Les balises Audio et vidéo bgsound, embed, object) que plusieurs technologies doivent être utilisées en fonction du type de lecteur multimédia disponible sur le navigateur de l'internaute.

Voici un script 'JavaScript' permettant d'adapter le contenu de la balise <embed> en fonction des types de fichiers à diffuser et du plug-in (, , , ) à utiliser, ainsi que d'utiliser des commandes javascript pour lire et arrêter la vidéo.

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

Voir le code

<object> et javascript

Rappel syntaxe et attributs standards

<object Attributs >
<paramètres ⁽¹⁾ et valeurs />
Info HTML si l'objet n'est pas décodé par le navigateur
</object>

Exemple

Note⁽¹⁾: Les paramètres et leurs valeurs peuvent être différents en fonction des lecteurs.

Attributs normalisés de la balise <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.

Le fait de mettre l'attribut codebase semble bloquer certains navigateurs . La parade est de mettre systématiquement des URL absolues pour les animations.

Insertion Image, fichier

<object data="http://monwebfacile.free.fr/Tutoriaux/AudioVideo/Images/Bouquet4.png"
type="image/png">
<param name="src" value="http://monwebfacile.free.fr/Tutoriaux/AudioVideo/Images/Bouquet4.png" />

<p>Défaut de chargement</p>
</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

Quelques commandes javascript pour piloter la technologie Real Player.

"MonMedia" est le nom d'identification de l'objet : id="MonMedia"

Fonctions	Commentaires
document.MonMedia.DoPlay() ou Play()⁽¹⁾	Active la lecture du média
document.MonMedia.DoPause()	Pause
document.MonMedia.DoStop() ou Stop()⁽¹⁾	Arrêt du média
document.MonMedia.GetBufferingTimeElapsed()	Durée de lecture en cours en millisecondes
document.MonMedia.GetLength()	Durée du clip
Respectez bien la syntaxe , y compris les majuscules - minuscules des fonctions DoPlay(), DoPause() ... Note ⁽¹⁾

document.getElementById("Info").innerHTML = 'Etat du lecteur : ' + _Etat +"<br />Durée chargement : "+_TempsCourant+"<br />Durée clip : " + _Duree;

function _init(){
	document.getElementById("TitreFilm").innerHTML = 'Fichier : Video01.mpg';
	_Infos();	
}
//-->
</script>
</head>
<body onload="_init()">
<p><span id="Info"></span></p>
<p><input style="cursor:pointer" id ="bouton1" type="button" value ="Lecture" onclick="CdeJava('DoPlay');" />
<input style="cursor:pointer" id ="bouton2" type="button" value ="Stop" onclick="CdeJava('DoStop');" />

<object id="MonMedia" 
 type="audio/x-pn-realaudio-plugin" 
 data= "http://monwebfacile.free.fr/Tutoriaux/AudioVideo/Films/Video01.mpg"
 height="260" width="320"
 standby="Chargement en cours...">
<param name="controller" value="true" />
<param name="autostart" value="true" />
<param name="controls" value="ImageWindow" />
<param name="src" value="http://monwebfacile.free.fr/Tutoriaux/AudioVideo/Films/Video01.mpg" />

alt : Chargement du Média impossible</object>
</div>

</body>
</html>

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

Quelques commandes javascript pour piloter la technologie Quicktime.

"x" est la référence de l'objet : x=document.getElementById('MonMedia') avec 'MonMedia' comme nom d'identification de l'objet (id)

Fonctions	Commentaires
x.MonMedia.Play()	Active la lecture du média
x.Rewind()	Rembobinage rapide
x.Stop()	Arrêt du média
x.SetVolume(valeur)	Réglage du volume
x.SetMute(état)	Mode silencieux (true) ou mode normal (false)
x.GetPluginStatus()	Renvoi une Information sur l'état du lecteur
x.SetURL('http://.....')	Charger une nouvelle vidéo

Retrouvez un recueil plus complet de possibilités javascript dans le fichier :

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

//-->
</script>
</head>
<body onload="_Infos()">
<p><span id="Info"></span><br />
<span id="InfoSup"></span><br />
<span id="InfoStatus"></span></p>
<p><input style="cursor:pointer" id="bouton1" type="button" value ="Lecture" onclick="CdeJava('Play')" />
<input style="cursor:pointer" id="bouton2" type="button" value ="Réembobiner" onclick="CdeJava('Rewind')" />
<input style="cursor:pointer" id="bouton3" type="button" value ="Stop" onclick="CdeJava('Stop')" /><br />
<input style="cursor:pointer" id="bouton4" type="button" value ="Autre vidéo" onclick="CdeJava('SetURL')" /></p>

<div>


<object id="MonMedia" type="video/quicktime" 
 data= "http://monwebfacile.free.fr/Tutoriaux/AudioVideo/Films/Video04.mov"
 height="260" width="320"
 standby="Chargement en cours..."
 codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="http://monwebfacile.free.fr/Tutoriaux/AudioVideo/Films/Video04.mov" />
<param name="controller" value="true" />

alt : Chargement du Média impossible
</object>
</div>
	
<div><a href="http://validator.w3.org/check?uri=http://monwebfacile.free.fr/Tutoriaux/AudioVideo/Demos/AudioVideo_Demo_object_QT.htm">w3c</a></div>

</body>
</html>

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	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) cpour 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

Quelques commandes javascript pour piloter la technologie flash.

"MonMedia" est le nom d'identification de l'objet : id="MonMedia"

Fonctions	Commentaires
document.MonMedia.Play()	Active la lecture du média
document.MonMedia.Rewind()	Rembobinage
document.MonMedia.StopPlay()	Arrêt du média
document.MonMedia.Zoom()	Zoomer (Informations complémentaires dans le fichier compressé ci dessous)
document.MonMedia.IsPlaying()	Renvoi une Information sur l'état du lecteur : true => lecture en cours
document.MonMedia.PercentLoaded()	Renvoi le pourcentage de données téléchargées
Respectez bien la syntaxe , y compris les majuscules - minuscules des fonctions Play(), Rewind() ...

Retrouvez un recueil plus complet de possibilités javascript dans les fichiers :

<p>Etat du lecteur : <span id="Info">Veuillez patienter ...</span></p>
<p><input style="cursor:pointer" type="button" value ="Start" onclick="document.getElementById('MonMedia').Play();" />
<input style="cursor:pointer" type="button" value ="Rembobiner" onclick="document.getElementById('MonMedia').Rewind();" />
<input style="cursor:pointer" type="button" value ="Stop" onclick="document.getElementById('MonMedia').StopPlay();" /></p>
<p><input style="cursor:pointer" type="button" value ="Zoom x 2" onclick="document.getElementById('MonMedia').Zoom(50);" />
<input style="cursor:pointer" type="button" value ="Zoom x 1" onclick="document.getElementById('MonMedia').Zoom(200);" /></p>
<p><input style="cursor:pointer" type="button" value ="Autre vidéo" onclick="javascript:
var x=document.getElementById('MonMedia');
if(!BasculeVideo) {BasculeVideo=true; x.LoadMovie(0,'http://monwebfacile.free.fr/Tutoriaux/AudioVideo/Films/Video05.swf');}
else {BasculeVideo=false; x.LoadMovie(0,'http://monwebfacile.free.fr/Tutoriaux/AudioVideo/Films/Video03.swf');}
" /></p>

alt : Chargement du Média impossible
</object>
</div>
	
<div><a href="http://validator.w3.org/check?uri=http://monwebfacile.free.fr/Tutoriaux/AudioVideo/Demos/AudioVideo_Demo_object_Flash.htm">w3c</a></div>

</body>
</html>

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 :

Attributs	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.

Quelques commandes javascript pour piloter la technologie Windows Média Player.

"x" est la référence de l'objet : x=document.getElementById('MonMedia') avec 'MonMedia' comme nom d'identification de l'objet (id)

Fonctions	Commentaires
x.controls.play()	Active la lecture du média
x.controls.pause()	Pause
x.controls.stop()	Arrêt du média
x.controls.fastforward()	Avance rapide
x.controls.fastreverse()	Rembobinage rapide
x.controls.next()	Vidéo suivante dans la playliste
x.controls.previous()	Vidéo précédente dans la playliste
x.PlayState	Renvoi l'état du lecteur et en particulier 1 pour "Lecteur arrêté" 2 pour "Lecteur en pause" 3 pour "Lecture en cours"
x.controls.isAvailable('le controle')	Exemple x.controls.isAvailable('play') renvoie true si la commande du contrôle play est disponible. On peut contrôler de la même manière la disponibilité des contrôles pause, stop, fastforward etc.
x.fullScreen=true	Affiche le média en plein écran
x.settings.volume = valeur	Règle le niveau du volume
x.settings.mute	Mode silence

Retrouvez les attributs et paramètres ci-dessus dans l'exemple ci-dessous compatible uniquement avec Internet Explorer sur plateforme windows.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Balise object</title>
<meta http-equiv="Content-Language" content="fr" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
	
</script>
</head>
<body onload="MonitVideo();">
<div>
<input style="cursor:pointer" type="button" value="Start" onclick="CdeMedia('play')" />
<input style="cursor:pointer" type="button" value="Pause" onclick="CdeMedia('pause')" />
<input style="cursor:pointer" type="button" value="Retour" onclick="CdeMedia('stop')" />   
<input style="cursor:pointer" type="button" value="Autre vidéo" onclick="CdeMedia('URL')" /><br /><br />
<input style="cursor:pointer" type="button" value="Avance Rapide" onclick="CdeMedia('fastforward')" />
<input style="cursor:pointer" type="button" value="Réembobinage" onclick="CdeMedia('fastreverse')" />
</div>
<div><span id="_Inf_VideoState"></span>    <span id="_Inf_CurrentPosition"></span></div>
<div>
<object id="MonMedia" width="320" height="300" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
 type="application/x-oleobject" >
 <param name="URL" value="http://monwebfacile.free.fr/Tutoriaux/AudioVideo/Films/Video02.wmv" />
 <param name="AutoStart" value="true" />
 <param name="stretchToFit" value="true" />
 <param name="uiMode" value="full" />
 <param name="Playcount" value="1" />
 <param name="windowlessVideo" value="false" />
 <param name="volume" value="100" />alt : Objet impossible à charger</object>
</div>
	
<div><a href="http://validator.w3.org/check?uri=http://monwebfacile.free.fr/Tutoriaux/AudioVideo/Demos/AudioVideo_Demo_object_WMP.htm">w3c</a></div>

</body>
</html>

Fiche Javascript : Le multimédia dynamique

Objet de la fiche :

État de la fiche

Plan de la fiche :

Avant propos et rappel

<bgsound> et javascript (Internet Explorer uniquement)

Rappel syntaxe et attributs standards

Exemple

<embed> et javascript

Des commandes javascript

Insertion Audio et Vidéo

<object> et javascript

Rappel syntaxe et attributs standards

Attributs normalisés de la balise <object>

Insertion Image, fichier

Insertion Audio et Vidéos

En utilisant la technologie Real Player

En utilisant la technologie Quicktime

En utilisant la technologie Flash

En utilisant la technologie activeX de Windows Media Player

Application au projet de site web