[proftnj] Musique en continu sur le forum

par **Sun Tzu** le Dim 18 Mai - 16:15

Bonjour

Faisable, même pour un "débutant", il faut être attentif, patient, faire des essais, etc.

Bon courage ! Cool

NB: Il n'y a pas de procédé plus simple, désolé Neutral

----------------------------------------------------------------------------

Pour pouvoir naviguer sur votre forum sans que la musique stoppe, il faut que le lecteur (player) mp3 se trouve dans une pop-up que le visiteur peut utiliser comme il veut.
Mais il est impossible, avec un forum de ForumActif, d'ouvrir une pop-up directement à partir de l'accueil ou du portail.

AVANT DE COMMENCER

• Votre player doit être prêt, doit fonctionner et vous devez avoir noté son code et ses dimensions sur une page de bloc-notes (en.txt);
• Votre bouton (image) doit être prêt, hébergé et son url (http://hebergeur.com/xx/xxx/bouton.jpg par exemple) ainsi que ses dimensions doivent être notés aussi sur la page de bloc-notes.

RESUME

Il faut réaliser 2 pages html :
Pour ce faire, utilisez la possibilité qui vous est offerte par ForumActif de réaliser des pages html, mais cochez "non" pour l'option "Voulez-vous utiliser le haut et le bas de page de votre forum ?" :

comme ceci :

Ensuite, vous collez directement les scripts fournis ci-après.

page html 1 :
http://tonforum.com/player-h1.html (par exemple, -h1 provient de ForumActif, on pourrait avoir -h3, -h6, ...)
qui contient le code de l'étape 1 et donc le script du player que vous avez choisi (Dewplayer, Deezer,...).

page html 2 :
http://tonforum.com/bouton-h2.html (par exemple, -h2 provient de ForumActif, on pourrait avoir -h4, -h7, ...)
qui contient le code de l'étape 2 et donc le script de l'image du bouton que vous avez choisi et hébergé et le script qui ouvre la pop-up (la pop-up contient la page html avec le player).

Et, pour terminer,
on colle le script de l'iframe (= un trou dans la page), c'est-à-dire le code de l'étape 3 dans un module du portail et/ou la description d'un forum.

LES TROIS ETAPES

Première étape : le lecteur mp3

Page html n° 1 qui contient le lecteur et dont le titre est "Musique" et le nom "player.htm" :

Code:: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Musique</title> </head> <body bgcolor="black" style="margin:0 px;"> <div align="center"> script DU LECTEUR MP3 </div> </body> </html>

A la place de script DU LECTEUR MP3, on colle le code du lecteur mp3.
On peut aussi coller le code d'un player flash de fichier video en .flv à la place du code du player mp3.

Cette page html réalisée via le panneau d'administration aura une URL comme http://tonforum.com/player-h1.html (rappel : le -h1 provient de ForumActif, c'est normal).

Deuxième étape : le bouton

Page html n° 2 qui contient le bouton et dont le titre est "bouton" et le nom "bouton.htm" :

Code:: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>bouton</title> </head> <body style="margin:0px;"> <a href="#" onClick="window.open('URL DE LA PAGE HTML POPUP','music','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0, width=218, height=170, left=300, top=50');return(false)" target="_blank"> <img src="URL DE L'IMAGE HEBERGEE DU BOUTON" border="0"></a> </body> </html>

A la place de URL DE L'IMAGE HEBERGEE DU BOUTON, coller http://heberger/xx/xxx/bouton.jpg (bien retenir ses dimensions, on en aura besoin après).

Remplacer
URL DE LA PAGE HTML POPUP
par l'URL de votre page html 1 : http://tonforum.com/player-h1.html (rappel : le -h1 provient de ForumActif, c'est normal).

Modifier width="218" height="170" aux dimensions de VOTRE player mp3,
width = largeur, height = hauteur (en pixels).

Cette page html réalisée via le panneau d'administration aura une URL comme http://tonforum.com/bouton-h2.html (rappel : le -h2 provient de ForumActif, c'est normal).

Troisième et dernière étape : l'iframe

script à coller sur ta page de forum où vous voulez voir le bouton qui va ouvrir la pop-up qui contient le lecteur mp3 :

Code:: <iframe src="URL DE LA PAGE HTML BOUTON" name="bouton" width="50" height="50" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

Remplacer
URL DE LA PAGE HTML BOUTON
par l'URL de votre page html 2 : http://tonforum.com/bouton-h2.html (rappel : le -h2 provient de ForumActif, c'est normal).

Modifier width="50" height="50" aux dimensions de VOTRE bouton,
width = largeur, height = hauteur (en pixels).

Posté par Sun Tzu avec la permission de proftnj.
Merci à lui.