11484 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous!
C'est la première fois que j'écris ici, mais je visite le site depuis longtemps et je dois dire que c'est une mine d'or!

Voilà ma situation: J'utilise un lecteur pop up sur mon site qui fonctionne avec une liste de lecture. J'aimerais que lorsqu'on clique sur un lien (le titre d'un morceau) ce morceau soit lancé dans le lecteur en question.
Pour l'instant j'ai ce code qui fonctionne pour la liste de lecture, mais comment sélectionner un morceau particulier de cette liste?

<a title="morceau1" ONMOUSEOVER="window.status='Open video';return true" ONFOCUS="window.status='Open video';return true" ONMOUSEOUT="window.status=''" href="JavaScript:void(0)" onClick="window.open('player.swf?file=playlist.xspf&amp;allowfullscreen=true&amp;height=40&amp;width=400&amp;&amp;id=veneers&amp;searchbar=false&amp;showicons=false&amp;autostart=true&amp;overstretch=fit&amp;backcolor=287585&amp;frontcolor=FFFFFF&amp;lightcolor=000000', 'playercadre','left=1,top=1,menubar=0,location=0,status=0,width=400,height=40,toolbar=no,resizable=0');">Morceau1</a>



Merci d'avance de votre aide! Smiley lol
Bonjour,

Il faut que le lecteur en question soit accessible en JavaScript. Il faut voir la documentation du lecteur, pour voir s'il est prévu de pouvoir le piloter en JavaScript. Ce n'est pas forcément le cas...
Peut-être que jplayer te conviendrait? Il est possible de créer une liste cliquable...

edit : (mode je chipote) la façon d'utiliser ce plugin jquery est un peu capillotractée. Perso j'aurais créé un code html comprenant une liste de lien vers les fichiers MP3 et puis j'aurais créé le player par dessus en javascript ce qui permettrait d'avoir toujours accès aux fichiers. Et, pour chipoter un peu plus, j'utiliserais des boutons à la place des liens pour piloter le player. Smiley langue
Modifié par Patidou (18 May 2009 - 12:04)
Il s'agit du JW FLV Player, il est pilotable en javascript. J'ai lu la documentation, j'y arrive quand il est sur une page html ou dans une frame, mais pas en pop up.
Voilà le code que j'utilise quand il est dans une frame différente des liens:


<a href="#" onClick="parent.frames['playerframe'].player.sendEvent('PLAY')">toggle play/pause</a><br><br>
<a href="#" onClick="parent.frames['playerframe'].player.sendEvent('ITEM', 0)">play item 0</a><br>
<a href="JavaScript:parent.frames['playerframe'].player.sendEvent('ITEM', 1)">play item 1</a><br>
<a href="JavaScript:parent.frames['playerframe'].player.sendEvent('ITEM', 2)">play item 2</a><br>


Mais je veux le mettre en pop up pour éviter les frames justement (question de référencement).
thecaco a écrit :
Mais je veux le mettre en pop up pour éviter les frames justement (question de référencement).

Qu'il soit dans une pop-up ou dans une frame, ça va pas changer grand chose côté référencement. Je ne crois pas que ça soit le bon critère. Par contre si c'est pour une raison pratique, telle que permettre la lecture de musique en continu sans coupure lors du changement de page, c'est plus justifié.
en fait au départ j'utilisais les frames pour que le lecteur lise la musique en continu même lorsque le visiteur change de page. Mais les frames n'étant pas bonnes pour le référencement du site, je me tourne vers la solution du lecteur pop-up. Voilà pour le déroulement de mon histoire.
Tout irait à la perfection, il ne manque que ce bout de code pour choisir un morceau parmi un playlist.... Smiley bawling
Ah ok, je pensais «player dans une iframe» et pas «frameset avec player d'un côté et contenu de l'autre». Ce deuxième cas de figure est en effet largement déconseillé.
Pour référencer une popup, est-ce qu'il ne faut pas assigner une variable à l'ouverture de la fenêtre pop-up?
var music_player = window.open('player.html', 'music_player_window');

Cette variable est alors une référence à l'objet Window qui représente ta pop-up (ou ton onglet, notamment avec Firefox si l'utilisateur force l'ouverture d'un onglet à la place d'une fenêtre...). Tu peux faire un music_player.document.title pour récupérer le contenu du <title> de la page, par exemple.

Si dans la page du player tu déclares var player = document.getElementById('id_du_player'); comme le précise l'API de JW FLV Player, tu dois pouvoir accéder à cet élément depuis ta page mère avec:
music_player.player.sendEvent()
Alors je suis vraiment nulle, mais je cherche depuis hier et je ne sais pas où placer mes codes Smiley confused .
Et du coup je me demande si je peux utiliser le code que j'ai donné au début, à savoir:

<a title="morceau1" ONMOUSEOVER="window.status='Open video';return true" ONFOCUS="window.status='Open video';return true" ONMOUSEOUT="window.status=''" href="JavaScript:void(0)" onClick="window.open('player.swf?file=playlist.xspf&allowfullscreen=true&height=40&width=400&&id=veneers&searchbar=false&showicons=false&autostart=true&overstretch=fit&backcolor=287585&frontcolor=FFFFFF&lightcolor=000000', 'playercadre','left=1,top=1,menubar=0,location=0,status=0,width=400,height=40,toolbar=no,resizable=0');">Morceau1</a>


J'ai l'impression qu'il faut que je revois tout du début et que ce code ne va pas.... Vous me confirmez?
thecaco a écrit :
Alors je suis vraiment nulle, mais je cherche depuis hier et je ne sais pas où placer mes codes Smiley confused .

Ah oui d'accord.

Gérer ce genre de choses demande une connaissance minimale de JavaScript. Vu le code que tu utilises, je devine que tu ignores tout de JavaScript, ou que tu en bricoles vaguement sans avoir les bases?

Il ne va pas y avoir de solution miracle ici. Apprendre les bases de JavaScript me semble indispensable si on veut réaliser ce genre de chose.

Par ailleurs, il me semble que tu indiques ton fichier SWF comme contenu à charger dans la pop-up. Il faudrait plutôt créer une page HTML en bonne et due forme, depuis laquelle le fichier SWF sera appelé (via l'élément OBJECT). Cela te permettrait de suivre ce que dicte la documentation du lecteur Flash utilisé...

thecaco a écrit :
J'ai l'impression qu'il faut que je revois tout du début et que ce code ne va pas.... Vous me confirmez?

À priori, oui. Smiley smile
Modifié par Florent V. (21 May 2009 - 16:10)
Oui, je comprends que les solutions miracles n'existent pas, et je trouve déjà ici une aide précieuse!
 tu en bricoles vaguement sans avoir les bases?

C'est exact, je veux réaliser quelques fonctions, et en regardant tout ça Javascript me tente vraiment et j'ai bien l'intention et l'envie de m'y plonger comme il se doit.

 Il faudrait plutôt créer une page HTML en bonne et due forme, depuis laquelle le fichier SWF sera appelé (via l'élément OBJECT).


C'est que j'avais compris d'après tes messages.
Bien, j' y retourne avec ces conseils et je te remercie beaucoup! Smiley smile
Ne pas oublier que la page HTML qui contient le lecteur Flash doit déclarer la variable player (ou autre nom au choix) qui correspond à l'élément OBJECT du lecteur. Cf. la documentation du lecteur Flash utilisé.
Me revoilà! Smiley lol
Bon, cette fois j'ai suivi à la lettre un des exemples disponible sur le site. http://home5.inet.tele.dk/nyboe/flash/mediaplayer4/JW_API_xmpl_7-3-0-0.html

J'arrive à le faire fonctionner, à lui faire lecture/pause lorsqu'il est en pop up, mais pas à lui dire quel morceau jouer de la liste de lecture. Le code est à mon avis bien propre, j'ai l'impression que je ne suis pas loin.

Voilà le code de la page mère:

<html>
<head>
<title>Player Pop up</title>
<style type="text/css">
	#wrapper { position:absolute; left:10px; top:150px; width:300; height:296; }
</style>

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">

var currentFile = ""; 
var currentItem = 0; 
var previousItem = -1; 

var player = null;
function playerReady(thePlayer) {
	player = window.document[thePlayer.id];
	addListeners();
}


function addListeners() {
	if (player) { 
		player.addControllerListener("ITEM", "itemListener"); 
	} else {
		setTimeout("addListeners()",100);
	}
}


function itemListener(obj) { 
	if (obj.index != currentItem) {
 		previousItem = currentItem;
		currentItem = obj.index;
	}
}


function deletePlayer(theWrapper, thePlaceholder, thePlayerId) { 
        swfobject.removeSWF(thePlayerId);
        var tmp=document.getElementById(theWrapper);
        if (tmp) { tmp.innerHTML = "<div id=" + thePlaceholder + "></div>"; }
        player = null;
}


function createPlayer(theFile) {
	var flashvars = {
		file:theFile, 
		autostart:"true", 
		playlistsize:"100",
		playlist:"bottom"
	}
	var params = {
		wmode:"opaque",
		allowfullscreen:"true", 
		allowscriptaccess:"always"

	}
	var attributes = {
		id:"player1",  
		name:"player1"
	}
	swfobject.embedSWF("player.swf", "placeholder1", "320", "296", "9.0.115", false, flashvars, params, attributes);
}


var popWin = null;
function createWindow(theUrl) {  
	if (player) { 
		player.sendEvent("STOP"); 
		deletePlayer('wrapper', 'placeholder1', 'player1');
	}

	document.getElementById("buttonId1").style.visibility = "hidden";
	document.getElementById("buttonId2").style.visibility = "visible";
	document.getElementById("buttonId3").style.visibility = "visible";
	document.getElementById("buttonId4").style.visibility = "visible";


	popWin = window.open(theUrl, "smallWin", "width=480,height=340,left=100,top=200,resizable=yes");
	popWin.focus();
}


function popWinPlay() {
	if ((popWin)&&(! popWin.closed)) { popWin.player.sendEvent('PLAY') }
	else { createWindow('jw_satellitewin.html?'+currentItem); }
}

function popWinTrack() {
	if ((popWin)&&(! popWin.closed)) { popWin.player.sendEvent('ITEM, 3') }
	else { createWindow('jw_satellitewin.html?'+currentItem); }
}


function initPlayer() {
	document.getElementById("buttonId1").style.visibility = "visible";
	document.getElementById("buttonId2").style.visibility = "hidden";
	document.getElementById("buttonId3").style.visibility = "hidden";
	document.getElementById("buttonId4").style.visibility = "visible";

	createPlayer('playlist_mixmedia.xml');
}
</script>
<head>
<body onLoad="initPlayer()" bgcolor="#CCCCCC">

<div id="wrapper">       
	<div id="placeholder1"></div>
</div>  
<br>

<input type="button" id="buttonId1" value="Click to show player in popup window" onClick="createWindow('jw_satellitewin.html?'+currentItem)"><br>
<input type="button" id="buttonId2" value="show player here" onClick="popWin.close(); initPlayer()">
<input type="button" id="buttonId3" value="play/pause satellite" onClick="popWinPlay()">
<input type="button" id="buttonId4" value="Item 3" onClick="popWinTrack()">

</body>
</html>




En ce qui concerne la partie function popWinTrack c'est moi qui l'ai faite en me disant que d'après la logique du code (et la mienne bien sûre) ça devrait marcher...mais non.

Smiley sweatdrop

Si quelqu'un peut me donner le petit coup de pouce magique, ce serait extra....