musique sur le forum

[lesetoilesdemundi]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : janvier 2022
Lien du forum : http://lesetoilesdemundi.forumactif.com

Description du problème

Bonjour

J'avais jusqu' en janvier de la musique sur mon forum et plus rien ne fonctionne

voici le code que j'utilisais jusqu'à présent

Code:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <style type="text/css">

.material-icons {
color: #FB8C00;
font-size: 64px;
}
</style> <em style="position:absolute; left: 100px; top: 60px" id="mute-toggle" class="material-icons">volume_up</em>
<p>
</p>
<div id="player">
</div><script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '0',
width: '0',
playerVars: {'playlist': 'https://youtu.be/oToBRs-DPEg&list=PLf-xwFSr1ByTUl8Gk9SS4dT-TrCS0q6p0,Kq7LHBNdAqQ', 'autoplay': 1, 'controls': 1,'autohide':1,'loop':1,'wmode':'opaque' },
videoId: 'pnxAc887g7Y',
events: {
'onReady': onPlayerReady}
});
}



function onPlayerReady(event) {
event.target.play();
}



jQuery('#mute-toggle').on('click', function() {
var mute_toggle = jQuery(this);

if(player.isMuted()){
player.unMute();
mute_toggle.text('volume_up');
}
else{
player.mute();
mute_toggle.text('volume_off');
}
});

</script>

quelqu'un aurait il la gentillesse de m'éclairer sur le sujet, j'avoue que je suis assez nulle, ce premier code m'avait été remis par quelqu'un d'ici

merci de l'aide que vous pourriez m'apporter

[Lixyr]

Bonsoir,

Avant toute chose, ôtez-moi d'un doute : lorsque je teste l'URL de la playlist
(https://youtu.be/oToBRs-DPEg&list=PLf-xwFSr1ByTUl8Gk9SS4dT-TrCS0q6p0,Kq7LHBNdAqQ)
directement sur Youtube, le lien est modifié et je tombe sur une musique de Within Temptation. Or, sur mon forum de test, j'ai la musique de Gladiator. Donc est-ce que le lien est encore valide ?

Sinon, j'ai corrigé votre code. Après les correctifs, il fonctionne bien chez moi.
Je me suis permise de modifier un petit peu le HTML, j'ai corrigé le JavaScript, et j'ai indenté le tout pour que ce soit plus lisible pour vous.

Code:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<style type="text/css">
.material-icons {
  color: #FB8C00;
  font-size: 64px;
}
 
  #player {display: none;}
</style>

<p>
  <em style="position:absolute; left: 100px; top: 60px" id="mute-toggle" class="material-icons">volume_up</em>
</p>
<div id="player"></div>

<script src="https://www.youtube.com/player_api"></script>
<script type="text/javascript">
var player;
function onYouTubePlayerAPIReady() {
  player = new YT.Player('player', {
    playerVars: {
      'autoplay': 1,
      'controls': 0,
      'autohide': 1,
      'wmode': 'opaque',
      'showinfo': 0,
      'loop': 1,
      'rel': 0,
      'playlist': 'https://youtu.be/oToBRs-DPEg&list=PLf-xwFSr1ByTUl8Gk9SS4dT-TrCS0q6p0,Kq7LHBNdAqQ'
    },
    videoId: 'pnxAc887g7Y',
    events: {
      'onReady': onPlayerReady
    }
  });
}
function onPlayerReady(event) {
  event.target.play();
}
 
jQuery('#mute-toggle').on('click', function() {
  var mute_toggle = jQuery(this);
  if(player.isMuted()) {
    player.unMute();
    mute_toggle.text('volume_up');
    player.playVideo();
  }
  else {
    player.mute();
    mute_toggle.text('volume_off');
    player.pauseVideo();
  }
});
</script>

[lesetoilesdemundi]

Bonjour

merci de votre réponse, malheureusement le lien youtube de within temptation ne fonctionne pas et effectivement j'ai la musique de gladiator que je n'arrive pas à supprimer....

[Lixyr]

Dans ce cas, pourrais-je avoir le lien valide de la vidéo que vous souhaitez avoir en musique de fond ?

Comme vous avez enregistré les identifiants de deux vidéos différentes dans votre premier code, je ne sais pas quelle vidéo vous souhaitez. En tout cas, sachez que les codes ne sont pas les mêmes en fonction de si vous souhaitez une vidéo seule ou bien une playlist...

ps : J'ai modifié un peu le code, pour reprendre celui fourni par Youtube.

Pour charger la vidéo The Unforgiving :
- note : Cette vidéo n'est pas une playlist, mais une seule vidéo contenant une heure de musique.
- lien Youtube : https://www.youtube.com/watch?v=pnxAc887g7Y
- voici le code :

Code:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<style type="text/css">
.material-icons {
  color: #FB8C00;
  font-size: 64px;
}
 
  #ytplayer {display: none;}
</style>

<p>
  <em style="position:absolute; left: 100px; top: 60px" id="mute-toggle" class="material-icons">volume_up</em>
</p>
<div id="ytplayer"></div>

<script>
  // Load the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // Replace the 'ytplayer' element with an iframe and
  // YouTube player after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      height: '0',
      width: '0',
      videoId: 'pnxAc887g7Y',
      autoplay: 1
    });
  }
 
  jQuery('#mute-toggle').on('click', function() {
    var mute_toggle = jQuery(this);
    if(player.isMuted()) {
      player.unMute();
      mute_toggle.text('volume_up');
      player.playVideo();
    }
    else {
      player.mute();
      mute_toggle.text('volume_off');
      player.pauseVideo();
    }
  });
</script>

Pour charger une playlist
- note : Il s'agit de la playlist que vous avez indiquée dans votre code,
- lien Youtube : https://www.youtube.com/watch?v=oToBRs-DPEg&list=PLf-xwFSr1ByTUl8Gk9SS4dT-TrCS0q6p0
- voici le code :

Code:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<style type="text/css">
.material-icons {
  color: #FB8C00;
  font-size: 64px;
}
 
  #ytplayer {display: none;}
</style>

<p>
  <em style="position:absolute; left: 100px; top: 60px" id="mute-toggle" class="material-icons">volume_up</em>
</p>
<div id="ytplayer"></div>

<script>
  // Load the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // Replace the 'ytplayer' element with an iframe and
  // YouTube player after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      height: '0',
      width: '0',
      videoId: 'oToBRs-DPEg',
      listType: 'playlist',
      list: 'PLf-xwFSr1ByTUl8Gk9SS4dT-TrCS0q6p0',
      autoplay: 1
    });
  }
 
  jQuery('#mute-toggle').on('click', function() {
    var mute_toggle = jQuery(this);
    if(player.isMuted()) {
      player.unMute();
      mute_toggle.text('volume_up');
      player.playVideo();
    }
    else {
      player.mute();
      mute_toggle.text('volume_off');
      player.pauseVideo();
    }
  });
</script>

Voici les parties concernées qui changent d'un code à l'autre :

Code:

videoId: 'pnxAc887g7Y',

pour la première vidéo (The Unforgiving), et

Code:

 videoId: 'oToBRs-DPEg',

pour la deuxième vidéo (la playlist).

Ici, on définit l'identifiant de la vidéo. Sur Youtube, cet identifiant se trouve ici pour la vidéo The Unforgiving :

https://www.youtube.com/watch?v=pnxAc887g7Y

Et pour la playlist, l'identifiant se trouve ici :

https://www.youtube.com/watch?v=oToBRs-DPEg&list=PLf-xwFSr1ByTUl8Gk9SS4dT-TrCS0q6p0

C'est toute la partie verte qui se trouve après v=.

Code:

listType: 'playlist',

Ce code n'est présent que dans le deuxième code concernant la playlist. Si vous ne souhaitez pas charger de playlist (comme c'est le cas dans le code pour la vidéo The Unforgiving par exemple), il faut supprimer ce code.

Là, on dit au code : "Attention, je charge une playlist !"

Code:

list: 'PLf-xwFSr1ByTUl8Gk9SS4dT-TrCS0q6p0',

Là encore cette partie de code ne concerne que la playlist. Il faut supprimer cette partie si vous ne souhaitez pas charger de playlist. Il s'agit de l'identifiant Youtube de la playlist. On le trouve dans le lien :

https://www.youtube.com/watch?v=oToBRs-DPEg&list=PLf-xwFSr1ByTUl8Gk9SS4dT-TrCS0q6p0

C'est toute la partie du lien se trouvant après &list= .

[lesetoilesdemundi]

Bonsoir

merci pour votre réponse, j'ai tenté de mettre les deux codes que vous avez fournis, aucun ne fonctionne sur mon forum. Je désire mettre l'album de within temptation, je tiens à préciser que durant 3 ans je n'avais aucun problème et je pouvais changer la musique comme bon me semblait mais depuis janvier j'ai en continue la musique de gladiator...je précise que le code est placé dans généralité, peut être qu'il y a changement, j'en sais rien. j'avoue que je suis une quiche là dessus. Le lien que je désire c'est https://www.youtube.com/watch?v=pnxAc887g7Y

merci du temps que vous consacrez à mon problème

[lesetoilesdemundi]

Ah je tiens à préciser que même lorsque je change le code j'ai le droit de nouveau à Gladiator

[Lixyr]

Bonjour,

C'est normal que ça ne fonctionne pas, sur votre forum je vois toujours l'ancien code avec le lien Gladiator. Vous devez remplacer l'intégralité du code que vous avez fourni par celui que je vous ai donné (en l'occurrence le premier). En soit, c'est le même, à quelques exceptions près que j'ai corrigé certaines erreurs.
Il suffit d'une mise à jour de Firefox ou de Youtube pour que le code devienne obsolète. Là je vous ai mis la dernière version.

[lesetoilesdemundi]

bonjour


j'ai mis ceci

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /><style type="text/css">
.material-icons {
color: #FB8C00;
font-size: 64px;
}

#ytplayer {display: none;}
</style>
<p>
<em style="position:absolute; left: 100px; top: 60px" id="mute-toggle" class="material-icons">volume_up</em>
</p>
<div id="ytplayer">
</div>
<script>
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Replace the 'ytplayer' element with an iframe and
// YouTube player after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '0',
width: '0',
videoId:'oToBRs-DPEg',
listType: 'playlist',
list: 'PLf-xwFSr1ByTUl8Gk9SS4dT-TrCS0q6p0',
autoplay: 1
});
}

jQuery('#mute-toggle').on('click', function() {
var mute_toggle = jQuery(this);
if(player.isMuted()) {
player.unMute();
mute_toggle.text('volume_up');
player.playVideo();
}
else {
player.mute();
mute_toggle.text('volume_off');
player.pauseVideo();
}
});
</script>

j'ai donc bien remplacé le code de gladiator mais sans succès, là je n'ai plus de musique du tout, tant pis je crois que il y a un truc qui reste obscur chez moi, merci beaucoup malgré tout

[Lixyr]

Bonjour,

Quand je vais sur votre forum https://lesetoilesdemundi.forumactif.com/ et que j'active la musique (donc je clique une fois pour mute, puis une fois pour activer), j'entends bien Within Temptation. Par contre, vous avez installé la playlist.

[lesetoilesdemundi]

merci beaucoup, il fallait juste que je relance une fois le haut parleur même s'il semblait actif