Franc83


Playlist pour Windows Media Player Convertir en PDF Version imprimable
13-11-2008

Une playlist avec le Windows Media Player


Suite à une demande de Lehard sur le forum, et un problème multiple pour avoir un Windows Média Player avec une playlist qui fonctionne à la fois sur Internet Explorer et Firefox, voici donc une série de solutions utilisables sur les sites, et dans un Sandbox sur les Spaces Live.


Réglages basiques sur Internet Explorer


Cette technique ne fonctionne pas pour l'instant sur Firefox. Il semblerait que le "onclick" qui lance la lecture du fichier .asx ne soit pas prise en compte par Firefox.



1) Préparation du serveur:


  • un répertoire "player" avec tous vos fichiers et sous répertoires sur votre serveur
  • un sous-répertoire "wmv" avec vos vidéos
  • un sous-répertoire "asx" avec vos fichiers asx
  • un sous-répertoire "image" avec vos images liens.

Vous pouvez remplacer ces images liens par des mots ou textes liens pour lancer vos vidéos.


2) Création des fichiers asx "playlist" pour le lecteur Windows Média Player. Vous faites une playlist .asx par vidéo à lancer



<asx version="3.0">
<title>Video1</title>
<entry>
<ref href = "../videos/video1.wmv" />
<author>Franc83</author>
<copyright>©2008 franc83</copyright>
</entry>
</asx>


3) Le code "object" et "embed" pour le lecteur :



<object
id="Player" width="350" height="320"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="AutoStart" value="1">
<param name="ShowControls" value="true">
<embed type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
name="Player" width="350" height="320"
autostart=1 showcontrols=1>
</object>


Il existe d'autres param ou balises, mais à vous de voir celles que vous voulez ajouter. Je n'ai mis que les principales.


4) Les Images ou texte liens pour lancer les vidéos dans le lecteur :



<a onClick="playIt('fichiers/v1.asx')">
<img src="image/mon.gif" width="xx" height="yy"
border="0" style="cursor:pointer">
</a>


A répéter autant de fois que de vidéos et donc de liens vers les fichiers asx playlist de ces vidéos.


Attention aux adresses relatives vers les différents fichiers si vous voulez que vos liens fonctionnent et que vos vidéos se lancent !


5) Le petit javascript qui va valider le "onclick", gracieusement soufflé par Lehard,et que vous mettez juste avant la balise </body>


<script>
function playIt(filename) {
Player.URL = filename;
}
</script>


Les liens en pop-up


Avantage, la place occupée est moindre, et la technique fonctionne sur tous les navigateurs, sauf si on a réglé les explorateurs à bloquer les pop-up, auquel cas, il faut soit accepter l'ouverture du pop-up vidéo, soit prévenir que le clic sur l'image ou le texte ouvrira un pop-up qui lira une vidéo...

3 5 4 2 1

Sous forme de boutons avec un form et un input....


              

Ou simplement utiliser un lien textuel pour ouvrir le pop-up :

Voir la
vidéo 1
Voir la
vidéo 2
Voir la
vidéo 3
Voir la
vidéo 4
Voir la
vidéo 5

 

1) Lier une image à un pop-up

- Créer un fichier html avec juste le lecteur qui va lire la vidéo en automatique

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vidéo 1</title>
</head>
<body>
<p align="center">
<object type="application/x-mplayer2"
data="http://www.franc83.fr/videos/video1.wmv"
style="width:350px;height:320px;">
<param name="FileName"
value="http://www.franc83.fr/videos/video6.wmv"/>
<param name="ShowControls" value="1"/>
<param name="AutoStart" value="1"/>
<param name="loop" value="null"/>
<param name="DisplaySize" value="4"/>
</object>
<form><center>
<input type="button" name="fermer la fenêtre"
value="Fermer la fenêtre"
onclick="javascript:self.close('fenetre');" />
</center>
</form>
<br />
</body>
</html>


Notez la présence du petit javascript dans l'input du form pour fermer le pop-up

2) lier maintenant un image à un pop-up


<a href="javascript:void(0)"
onclick="window.open('videos/video1.html',
'video1','menubar=no, location=no,
scrollbars=no, resizable=no,
width=375,height=400')">
<img src="Images/3.gif"
alt="commentaire" width="xx"
height="yy" border="0"
style="cursor:pointer">
</a>

3) Mettre un lien texte


<a href="javascript:void(0)"
onclick="window.open('videos/video1.html',
'video1','menubar=no, location=no, scrollbars=no,
resizable=no, width=375,height=400')">
Voir la <br>vidéo 1
</a>


Autant de liens que de vidéos à relier aux liens textes.

4) Lier le pop-up à un bouton


<form>
<input type="button"
value="Vidéo 1"
onClick="window.open('videos/video1.html',
'mywindow1','width=375,height=400')">
</FORM>


Avec autant de boutons que de vidéos pop-up à lancer...

 


{mosgoogle center}

Dans le même esprit


 
Suivant >

S'abonner

devenir amis sur facebook

Votre adresse email ici pour recevoir les nouveautés du site directement dans votre boite

Nos Gadgets

Installez nos gadgets

gratuits Live Spaces

albi-gadget.jpg

Albidochon

oeil2moscou.jpg

Oeil 2 Moscou

Aidez-nous

aidez-nous

Recommandez ce
site à un ami

Statistiques

Powered By PageCache
Generated in 0.12437 Seconds