Modifier l'apparence de windows media player

Il est en réalité impossible de modifier l'apparence de windows media player comme on pourrait le faire sur son ordinateur en rajoutant un skin (apparence). Il est par contre possible de n'afficher que la vidéo et de recréer toute l'interface du player.

Intégrer windows média player à une page web

Windows media player s'intègre grâce à une balise object et se configure à l'aide de paramêtre.

html4strict
<object id="player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" style="width:640px; height:480px"type="application/x-mplayer2">
	<param name="url" value="video1.wmv" />
	<param name="autoStart" value="True" />
	<param name="uiMode" value="none" />
</object>

Le style permet de déterminer la taille de votre vidéo.
Le type indique le type de vidéo que vous voulez afficher
Le classid permet d'indiquer la version du lecteur utilisé (ici windows media 7 ou plus)
Le premier parametre “url” indique le chemin du fichier à visionner
Le seconde “autostart” indique au player de lancer directement la vidéo
Le troisième “uiMode” indique que les controles (play,pause,volume,etc) doivent être masqués

Il existe de très nombreux paramètres vous les trouverez sur le site de msdn

Nous avons donc intégré notre vidéo à notre page web et masqué l'interface du player, nous allons maintenant créer les fonctions javascript qui permettront de remplacer l'interface.

Piloter windows media player avec javascript

javascript
<script type="text/javascript">
//couper le son de la vidéo
function mute() {
	//un if qui permet de vérifier l'etat du son (coupé ou pas) et d'agir en conséquence
	document.getElementById('player').settings.mute=!document.getElementById('player').settings.mute;
}
//augmenter ou diminuer le volume sonore
function changeVolume(v) {
	//la valeur v peut être positive pour augmenter et négative pour diminuer
	document.getElementById('player').settings.volume+=v;
}
//mode plein écran
function fullScreen() {
	document.getElementById('player').fullScreen=true;
}
//stopper la vidéo
//J'ai préféré améliorer la fonction de base proposer par windows media player pour stopper une vidéo
//Car cette dernière n'avait pas un comportement logique.
function stopVid() {
	document.player.controls.currentPosition=0; //revenir à la première image de la vidéo
        document.getElementById('playPauseBtn').innerHTML="Play";//on affiche play sur le bouton play/Pause
	setTimeout("stop()",50); //lancer la fonction stop dans 50 milisecondes
}
//la fonction de base pour stopper une vidéo proposé par les controles de windows media player
function stop() {
	document.player.controls.stop(); //stopper la vidéo
}
//avance rapide
function avance() {
        document.getElementById('playPauseBtn').innerHTML="Play";//on affiche play sur le bouton play/Pause
	document.player.controls.fastforward();
}
//retour rapide
function recule() {
        document.getElementById('playPauseBtn').innerHTML="Play";//on affiche play sur le bouton play/Pause
	document.player.controls.fastreverse();
}
//cette fonction permet de gérer un bouton play/pause basique
function playPause() {
	if (document.player.playState==3) {//vérification de l'etat du lecteur, la valeur 3 indique que le lecteur est en train de lire la vidéo
		document.player.controls.pause();//on met le lecteur en pause
		document.getElementById('playPauseBtn').innerHTML="Play";//on affiche play sur le bouton
	}
	else {//sinon
		document.player.controls.play();//on lance la lecture
		document.getElementById('playPauseBtn').innerHTML="Pause";//on affiche pause sur le bouton
	}
}
</script>
Vous trouverez les controles de windows media player également sur le site de msdn

Voila il ne reste plus qu'à créer les boutons qui lanceront les fonctions. J'ai utilisé des liens texte tout simple il est bien sur plus interressant de les remplacer par des images de votre choix :).

Afficher les boutons

html4strict
<a href="javascript:playPause();" id="playPauseBtn">Pause</a><br />
<a href="javascript:stopVid();">stopper la video</a><br />
<a href="javascript:avance();">Avance rapide</a><br />
<a href="javascript:recule();">Retour rapide</a><br />
<a href="javascript:mute();">Mute</a><br />
<a href="javascript:changeVolume(5);">Volume Up</a><br />
<a href="javascript:changeVolume(-5);">Volume Down</a><br />
<a href="javascript:fullScreen();">Full screen [Double cliquez pour revenir]</a><br />

Compatibilité avec Firefox

La méthode décrite plus haut n'est pas directement compatible avec Firefox il vous faut proposer à vos visiteurs d'installer un plugin que vous pourrez trouver à cette adresse ”Mozilla ActiveX Plug-In”.

L'idéal est de proposer à d'effectuer une vérification de la présence du plugin pour les utilisateurs de Firefox et de leur proposer d'installer le plugin s'il ne le possèdent pas déja.

-

ManiT4c
Gérant et chef de projet de l'agence web Op'art, je suis également webmaster freelance. Retrouvez moi également sur twitter.