Menu
I have background noise on a website which the client wants playing on loop throughout the website, so I have set up an <audio> tag which autoplays and loops.
On several pages, I have multiple Youtube embedded iframes which are declared using the embedded code from the youtube video pages, for example:
<iframe width="420" height="315" src="http://www.youtube.com/embed/Y3OR9HnB14I?rel=0" frameborder="0" allowfullscreen></iframe>
What they want, is that when a youtube video is played / resumed, the audio pauses and when a youtube video is stopped / paused then resume the audio.
Has anyone got an idea on how to do this using the Youtube Javascript API?
576
You should be able to use the Youtube Javascript Player API to do this. You can listen to the onStateChange event on all your embedded players, when a "1" (playing) comes from any of them, you pause the . When either "2" (paused) or "0" (ended) comes you can resume the again.
This works for 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>
I leave it as an exercise for you to figure out how to keep track of the state for several videos =) But a hint is that the onYouTubePlayerReady() is called once for every player on the page. You can specify a different playerapiid for each player to tell them apart. (in the example above i used "ytplayer1" for the single player.
102
from the API docs:
Events
onStateChange This event fires whenever the player's state changes. The value that the API passes to your event listener function will specify an integer that corresponds to the new player state. Possible values are:
-1 (unstarted) 0 (ended) 1 (playing) 2 (paused) 3 (buffering) 5 (video cued).When the player first loads a video, it will broadcast an unstarted (-1) event. When a video is cued and ready to play, the player will broadcast a video cued (5) event. In your code, you can specify the integer values or you can use one of the following namespaced variables:
YT.PlayerState.ENDED YT.PlayerState.PLAYING YT.PlayerState.PAUSED YT.PlayerState.BUFFERING YT.PlayerState.CUED
And for play/pause the video use:
Playing a video
player.playVideo():Void Plays the currently cued/loaded video. The final player state after this function executes will be playing (1).
Note: A playback only counts toward a video's official view count if it is initiated via a native play button in the player.
player.pauseVideo():Void Pauses the currently playing video. The final player state after this function executes will be paused (2) unless the player is in the ended (0) state when the function is called, in which case the player state will not change.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
