Scuola forum (scuo.la) - Forum di discussione per le scuole

Scuola forum (scuo.la) - Forum di discussione per le scuole (https://www.scuolaforum.org/)
-   Informatica (https://www.scuolaforum.org/informatica/)
-   -   Fermare musica di sottofondo sito quando parte video YouTube (https://www.scuolaforum.org/informatica/5625-fermare-musica-di-sottofondo-sito-quando-parte-video-youtube.html)

marco 02-19-2013 06:43 PM
Fermare musica di sottofondo sito quando parte video YouTube
 
Salve,
ho un sito internet dove con jquery è stata inserita una musica di sottofondo, e nella home page vi è un pulsante per spegnere la musica. Nella stessa pagina però, vi sono dei video caricati su youtube che quando vengono visualizzati si sovrappongo come audio a quello del sito. Ora io vorrei fare in modo che al partire dei video, si spegnesse in automatico la musica. Qualcuno ha idea di come si possa fare?
Grazie

Quinto 03-26-2013 09:53 AM
Devi sfruttare le api di youtube per spegnere o mettere in pausa il player jquery che fa funzionare la musica di sottodofondo del sito.
Comincia con inserire questo nell'head del sito:
codice HTML:
<script src = "http://www.youtube.com/player_api"></script>
<script type="text/javascript" src="Scripts/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.jplayer.inspector.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){

        $("#jquery_jplayer_1").jPlayer({
                ready: function () {
                        $(this).jPlayer("setMedia", {
                                mp3: "http://www.XXXXXX.XXX/music.mp3"
                        }).jPlayer("play");
                },
                ended: function (event) {
                        $(this).jPlayer("play");
                },
                swfPath: "../Scripts",
                supplied: "mp3"
        });

        $("#jplayer_inspector").jPlayerInspector({jPlayer:$("#jquery_jplayer_1")});
});
//]]>
</script>
Poi metti i pulsanti on/off per la musica, così:
codice HTML:
<div id="jquery_jplayer_1" style="position:absolute; left:-9999px;"></div>
<div style="float:right; margin-top:-10px" id="jp_interface_1">
 <a href="#" class="jp-play">Play</a>
 <a href="#" class="jp-pause">Pause</a>
</div>
Infine inserisci il video youtube così:
codice HTML:
<div id="videoYouTube">
<iframe  id="player" width="419" height="315" style="margin-top:52px"src="http://www.youtube.com/embed/YYYYYY" onload="floaded()" frameborder="0" allowfullscreen></iframe>
</div>

<script>
//onYouTubePlayerAPIReady
var player;
function floaded(){
  player = new YT.Player('player', {
  videoId: '-0W4g6tExM0',
  events:
  {
      'onStateChange': function (event)
      {
              if (event.data == YT.PlayerState.PLAYING) {
                  $("#jquery_jplayer_1").jPlayer("pause");
              }
      }
    }
  });
}
</script>
Ovviamente devi correggere dove ho messo XXXXXX.XXX con il nome del sito, e YYYYYY con il codice corretto del video youtube, ed il gioco è fatto.;-)


Tutti gli orari sono GMT +2. Attualmente sono le 11:10 AM.