YouTube JavaScript API - Mette in pausa l'audio quando su YouTube viene riprodotto un video

Ho un rumore di sottofondo su un sito Web che il cliente desidera riprodurre in loop su tutto il sito Web, quindi ho impostato un tag <audio> che si attiva e si riavvia.YouTube JavaScript API - Mette in pausa l'audio quando su YouTube viene riprodotto un video

In diverse pagine, ho più iframe incorporato di YouTube che sono dichiarati utilizzando il codice incorporato dalle pagine video di YouTube, ad esempio:

<iframe width="420" height="315" src="http://www.youtube.com/embed/Y3OR9HnB14I?rel=0" frameborder="0" allowfullscreen></iframe>

Quello che vogliono, è che quando un video di YouTube è riprodotti/ripresi, l'audio si interrompe e quando un video di YouTube viene arrestato/messo in pausa, riprende l'audio.

Qualcuno ha avuto un'idea su come utilizzare l'API JavaScript di YouTube?

fonte

2013-06-06 Stefan Dunn

Dovresti essere in grado di utilizzare l'API Javascript Javascript di YouTube per fare ciò. Puoi ascoltare l'evento onStateChange su tutti i tuoi giocatori incorporati, quando un "1" (gioco) proviene da uno di essi, fai una pausa. Quando viene visualizzato "2" (in pausa) o "0" (terminato), è possibile riprenderlo di nuovo.

questo funziona per me:

<html> 
    <head> 
    <script language="javascript"> 
     var player = null; 
     var lobbyAudio = null; 

     function onYouTubePlayerReady(playerapiid) { 
     player = document.getElementById(playerapiid); 
     lobbyAudio = document.getElementById('lobby-audio'); 
     player.addEventListener("onStateChange", "onYouTubePlayerStateChange"); 
     } 

     function onYouTubePlayerStateChange(state) { 
     switch (state) { 
      case 1: // playing 
      lobbyAudio.pause(); 
      break; 
      case 0: // ended 
      case 2: // paused 
      lobbyAudio.play(); 
      break; 
     } 
     } 
    </script> 
    <body> 
    <audio id="lobby-audio" src="lobby-audio.mp3" autoplay="True" controls="True" loop="True"></audio> 

    <object width="640" height="360"> 
     <param name="movie" 
     value="https://www.youtube.com/v/t-aOvEweUEw?enablejsapi=1&playerapiid=ytplayer1&version=3"></param> 
     <param name="allowFullScreen" value="true"></param> 
     <param name="allowScriptAccess" value="always"></param> 
     <embed 
      id="ytplayer1" 
      src="https://www.youtube.com/v/t-aOvEweUEw?enablejsapi=1&playerapiid=ytplayer1&version=3" 
      type="application/x-shockwave-flash" allowfullscreen="true" 
      allowScriptAccess="always" width="640" height="360"> 
     </embed> 
    </object> 
    </body> 
</html>

lascio come esercizio per voi di capire come tenere traccia dello stato per diversi video =) Ma un suggerimento è che l'onYouTubePlayerReady() viene chiamato una volta per ogni giocatore sulla pagina. Puoi specificare un giocatore diverso per ciascun giocatore per distinguerli. (Nell'esempio di cui sopra ho usato "ytplayer1" per il singolo giocatore

API Reference:. https://developers.google.com/youtube/js_api_reference
API pagina di configurazione: https://developers.google.com/youtube/youtube_player_demo
La refrence a potrebbe essere utile anche: http://www.w3schools.com/tags/ref_av_dom.asp

fonte

2013-06-11 22:05:34 Christian

Con le due funzioni che hai dichiarato, sostituisci le funzioni dell'API JavaScript di YouTube? Non vedo da nessuna parte nel codice che le esegui, quindi presumo che queste vengano eseguite tramite l'API? –

Ho trovato la risposta al mio commento in il riferimento API. Usua Mi ci vuole un paio d'ore per avere la testa attorno a nuove guide di riferimento .. Grazie. –

hehe. Sì, sono entrambi eseguiti dall'API, come gli eventi basati. onYouTubePlayerReady() è un nome codificato. onYouTubePlayerStateChange Chiedo al giocatore di chiamare chiamando addEventListener con il nome per primo. – Christian

dal API docs:

Eventi

onStateChange Questo evento ogni volta che cambia di stato del giocatore. Il valore che l'API passa alla funzione listener dell'evento specificherà un numero intero corrispondente allo stato del nuovo lettore. I valori possibili sono:
-1 (unstarted) 
    0 (ended) 
    1 (playing) 
    2 (paused) 
    3 (buffering) 
    5 (video cued). 
Quando il giocatore carica prima di un video, che verrà trasmesso un (-1) evento unstarted. Quando un video è pronto e pronto per la riproduzione, il lettore trasmetterà un evento video (5). Nel codice, è possibile specificare i valori interi oppure è possibile utilizzare uno dei seguenti variabili namespace:
YT.PlayerState.ENDED 
    YT.PlayerState.PLAYING 
    YT.PlayerState.PAUSED 
    YT.PlayerState.BUFFERING 
    YT.PlayerState.CUED 

E per il gioco/mettere in pausa il video uso:

Riproduzione di un video

player.playVideo(): Void Riproduce il video attualmente caricato/caricato. Verrà riprodotto lo stato del giocatore finale dopo l'esecuzione di questa funzione (1).

Nota: una riproduzione conta solo verso il conteggio delle visualizzazioni ufficiali di un video se è avviata tramite un pulsante di riproduzione nativo nel lettore.

player.pauseVideo(): Void Mette in pausa il video in riproduzione. Lo stato del lettore finale dopo l'esecuzione di questa funzione verrà messo in pausa (2) a meno che il giocatore sia nello stato terminato (0) quando viene chiamata la funzione, nel qual caso lo stato del giocatore non cambierà.

fonte

2013-06-11 21:10:19

YouTube JavaScript API - Mette in pausa l'audio quando su YouTube viene riprodotto un video

risposta

Problemi correlati