









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.
Windows media player s'intègre grâce à une balise object et se configure à l'aide de paramêtre.
<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
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.
<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>
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 :).
<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 />
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 etmon twitter.
Discussion
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
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.
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
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 !
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.
Il faut que tu modifie la fonction playpause pour qu'elle affiche ton image “play” lorsque tu clic sur le bouton “pause”
Excellent ce script, exactement ce qu'il me falait ! Seulement… je rencontre un petit soucis pour son utilisation sous Firefox 3, impossible d'afficher la vidéo. Quelqu'un à une solution à me suggérer ?
Bonjour J'espère que ce sujet est toujours suivi.
J'aimerais utiliser ce script dans des images mappé. Mais mon idée n'est pas au point. Un peu d'aide svp. J'avais pensé a :
<br />
</object> <script type=“text/javascript”> 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 } 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>
<img src=“header_03.png” usemap=”#map” /> <map name=“map”> <area shape=“circle” coords=“157,51,31” alt=“play” title=“Lecture” href=“javascript:playPause();” /> <area shape=“circle” coords=“206,86,11” alt=“stop” title=“Stop” href=“javascript:stop();” /> </map>