Youtube JavaScript API - Wstrzymaj dźwięk, gdy wideo z YouTube'a gra

Mam szum w tle na stronie internetowej, którą klient chce odtwarzać w pętli w całej witrynie, dlatego utworzyłem tag <audio>, który autoplays i pętle.Youtube JavaScript API - Wstrzymaj dźwięk, gdy wideo z YouTube'a gra

na kilku stronach, mam wiele Youtube wbudowanych iframe, które są deklarowane za pomocą wbudowanego kodu ze stron YouTube wideo, na przykład:

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

czego chcą, jest to, że kiedy film youtube jest Odtwarzane/wznawiane, dźwięk zatrzymuje się, a gdy wideo youtube jest zatrzymane/wstrzymane, wznów dźwięk.

Czy ktoś ma pomysł, jak to zrobić za pomocą interfejsu API JavaScript YouTube?

Źródło

2013-06-06 Stefan Dunn

Powinieneś być w stanie użyć funkcji API odtwarzacza JavaScript YouTube w tym celu. Możesz wysłuchać zdarzenia onStateChange we wszystkich wbudowanych odtwarzaczach, gdy "1" (gra) pochodzi od któregoś z nich, wstrzymujesz. Kiedy pojawi się "2" (pauza) lub "0" (zakończenie), możesz wznowić ponownie.

Działa to dla mnie:

<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>

Zostawiam to jako ćwiczenie dla Ciebie, aby dowiedzieć się, jak śledzić stan dla kilku filmów =) Ale wskazówką jest to, że onYouTubePlayerReady() jest wywoływana raz dla każdego gracza na stronie. Możesz określić inny playerapiid dla każdego gracza, aby je rozdzielić. (W powyższym przykładzie użyłem "ytplayer1" dla pojedynczego gracza

API Reference. https://developers.google.com/youtube/js_api_reference
API strona demo: https://developers.google.com/youtube/youtube_player_demo
Referencje aby mogła być użyteczna także: http://www.w3schools.com/tags/ref_av_dom.asp

Źródło

2013-06-11 22:05:34 Christian

Za pomocą dwóch funkcji, które zadeklarowałeś w tym miejscu, zastępujesz funkcje API JavaScript w serwisie Youtube? Nie widzę nigdzie w kodzie, że je wykonujesz - więc zakładam, że te operacje są wykonywane za pośrednictwem interfejsu API? –

Znalazłem odpowiedź na mój komentarz w odniesienie do API lly zajmuje mi kilka godzin, aby uzyskać wskazówki na temat nowych przewodników. Dzięki. –

hehe. Tak, oba są wykonywane z API, podobnie jak w przypadku zdarzenia. onYouTubePlayerReady() to nazwa zakodowana na sztywno. onYouTubePlayerStateChange Pytam odtwarzacza, aby zadzwonić, najpierw wywołując addEventListener z nazwą. – Christian

z API docs:

Wydarzenia

onStateChange To wydarzenie odpala zmienia stan odtwarzacza. Wartość przekazywana przez interfejs API do funkcji detektora zdarzeń określa liczbę całkowitą odpowiadającą stanowi nowego odtwarzacza. Możliwe wartości to:
-1 (unstarted) 
    0 (ended) 
    1 (playing) 
    2 (paused) 
    3 (buffering) 
    5 (video cued). 
Kiedy odtwarzacz po raz pierwszy załaduje wideo, wyemituje niepodpisane (-1) zdarzenie. Gdy wideo jest oznaczone i gotowe do odtworzenia, odtwarzacz wyśle wideo wideo (5). W kodzie można określić wartości całkowitych lub użyć jednego z następujących przestrzeni nazw zmiennych:
YT.PlayerState.ENDED 
    YT.PlayerState.PLAYING 
    YT.PlayerState.PAUSED 
    YT.PlayerState.BUFFERING 
    YT.PlayerState.CUED 

I play/pause wykorzystanie wideo:

odtwarzania filmu

player.playVideo(): Void Odtwarza aktualnie cued/loaded video. Ostateczny stan odtwarzacza po wykonaniu tej funkcji będzie odtwarzany (1).

Uwaga: Odtwarzanie liczy się tylko do oficjalnej liczby wyświetleń wideo, jeśli zostało zainicjowane za pomocą natywnego przycisku odtwarzania w odtwarzaczu.

player.pauseVideo(): Void Zatrzymuje aktualnie odtwarzany film. Ostateczny stan odtwarzacza po wykonaniu tej funkcji zostanie wstrzymany (2), chyba że odtwarzacz jest w stanie zakończonym (0) , gdy funkcja zostanie wywołana, w takim przypadku stan odtwarzacza nie ulegnie zmianie.

Źródło

2013-06-11 21:10:19

Youtube JavaScript API - Wstrzymaj dźwięk, gdy wideo z YouTube'a gra

Odpowiedz

Powiązane problemy