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
Vous désirez créer votre site web ? Je suiswebmaster en normandie sinon vous pouvez consulter mon profil yoolink pour suivre mon actu.

Discussion

Drewari, 28/04/2007 23:37:

Je souhaiterai un petit complément d’informations.

Pouvez-vous m’indiquer ou l’on doit placer les différents codes... ( body ou head... ?)

Page concerné :

http://www.wikistuce.info/doku.php/javascript/modifier l apparence de windows media player#piloter windows media player avec javascript

Merci d’avance Drewari

 
maniT4c, 02/05/2007 08:48:

Le javascript peut être placer aussi bien dans la balise head que dans la balise body. L’intégration du media player doit se faire dans le body. Les boutons eux aussi doivent se trouver dans le body.

 
nico, 14/01/2008 12:10:

Salut et merci énormément pour ce script.

Cependant, j'aurais aimer avoir des précisions sur la méthode à utiliser pour afficher un image dynamique sur la fonction mute. Un genre de swap image selon si la radio est en sourdine ou non… Je sais pas si je m'exprime assez clairement alors n'hésitez pas à me posez des questions !!!

Le code sur lequel je bloque : function mute() {

document.getElementById('player').settings.mute=!document.getElementById('player').settings.mute;

}

Il faudrait donc juste définir une image pour l'évènement “true” et une autre pour l'évènement “false” ! Désolé, ça semble si simple mais n'ayant aucune notion de javascript, je m'en remets à vous ;-)

Merci

 
maniT4c, 15/01/2008 11:56:

Il te faut modifier légèrement la fonction mute pour qu'elle affiche ton image en conséquence.

function mute() {
	if(document.getElementById('player').settings.mute) {
           document.getElementById('player').settings.mute=false;
           document.getElementById('monImage').src="nomute.jpg";
        }
        else {
          document.getElementById('player').settings.mute=true;
          document.getElementById('monImage').src="muted.jpg";
        }
}

Voila c'est du vite fait et je n'ai pas testé mais l'idée est la. En résumé tu fait un test pour vérifier si ton boutton est muté au moment du clic, si oui alors tu le démute et tu demande à l'element “monimage” de changer la source de l'image. (ton image doit avoir comme id “monImage”. Et sinon ca fait l'inverse. Bon courage !

 
runweb, 18/03/2008 18:50:

bonjou a tous, j'ai remplacer les liens texte par des images, mais il y a un probleme au niveau du bouton playpause, quand je clique pour faire pause l'image disparait et le texte play revient. comment puis je faire pour résoudre ce probleme. merci pour votre aide.

 
maniT4c, 19/03/2008 09:38:

Il faut que tu modifie la fonction playpause pour qu'elle affiche ton image “play” lorsque tu clic sur le bouton “pause”

 
Si vous ne pouvez pas lire les lettres, tlchargez ce fichier WEV et coutez les.