CODEWITHSUNDEEP
apiyoutubeyoutube-apiembedinnerhtml
Deniz Kaya
Deniz Kaya

Reputation: 28

innerHTML event with multiple Youtube players (change navbar with javascript API)

I'm trying to change the content of my navbar when a youtube embed is played, so the user sees on witch item of the navbar the sound(/video) is coming from. It works fine with one player but theres an issue when you have two players. Because if two embeds are playing and pause is pressed on one of them, it looks like none is playing on the navbar.

What i'm trying to do is make 1 item (number 10) on my navbar react to multiple youtube players. So if i press play, number 10 lights up red, if i press pause (or stop) it goes white again (the original colour). This works great with one player but doesn't work with two (or more). Because if it press play on two players, the navbar item turns red. But if pauze 'one' of them, the navbar item turns white, while the other play is still playing.

What i want is the 'go white' event to look at two players, so if the other player is still playing, i want the navbar item to remain red, only if both players stop, it should go white.

I need the 'go white' event to say: turn white only if both players are not playing

(hope this is better then te previous explanation)

NAVBAR:

 </li>
  <li><a id="c10" href="#as10">10</a></li>
  <li><a id="c09" href="#as9">9</a></li>
  <li><a id="c08" href="#as8">8</a></li>
  ....
</ul>

EMBEDS:

<iframe id="player1" name="t136" width="240" height="220" data-src="http://www.youtube.com/embed/IpMqzFdt5fU?rel=0&showinfo=2&controls=2" enablejsapi="1" onload=lzld(this) frameborder="0" controls="2" allowfullscreen src="about:blank" onload=lzld(this)>

<iframe id="player2" name="t137" width="240" height="220" data-src="http://www.youtube.com/embed/CwYo5DzFzQ4?rel=0&showinfo=2&controls=2" enablejsapi="1" frameborder="0" controls="2" allowfullscreen src="about:blank" onload=lzld(this)> </iframe>

SCRIPT:

<script type="text/javascript">
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('player1' , {
  events: {
    'onStateChange': onPlayerStateChange
  }
 });
player = new YT.Player('player2' , {
  events: {
    'onStateChange': onPlayerStateChange
      }
     });
  }
  function onPlayerStateChange(event) {
      if (event.data == 1 ) {
        var element=document.getElementById("c10");
element.innerHTML="<font color=red>10</font>";}
    if (event.data == 2 || event.data == 0) {var element=document.getElementById("c10");
element.innerHTML="10";};
  }

</script>

NEW PROBLEM

I've come across a'n issue with innerhtml event when using an iframe refresh button, witch looks like this:

HTML:

<a class="pull-right" href="#" onclick="Click1()">refresh</a>

JAVASCRIPT:

function Click1(){
  document.getElementById('player1').src = document.getElementById('player1').src;
  players["player1"] = [new YT.Player("player1", { events: { 'onStateChange': onPlayerStateChange }}), false];
  if (allStopped==true) {document.getElementById("c10").innerHTML = "10";}

the problem again is that if the user presses refresh while playing an embed, the navbar stays red, while it should be white (if nothing is playing). I had the same issue before, but i can't get it to work with a click event. This time you can be certain that the refresh causes a playback stop, but other embeds could be playing.

Upvotes: 0

Views: 844

Answers (1)

jlmcdonald
jlmcdonald

Reputation: 13667

EDIT: Updated code and description below to reflect the updates to the original post

Two things of possible use to you: 1) in your onYouTubePlayerAPIReady method, you'll want to use an array to hold the references to the two players (so you aren't overwriting the first one with the second). IF you don't do this, then you won't hear events from the first player object any more. This approach will also let you keep track of which players are playing, so that when a pause event comes up, the state is stored for you to find out if ALL players have stopped and you need to make your navbar change. 2) note that the event element not only has the data, but also has a 'target' attribute which will contain the ID of the player which raised the event. So you ought to be able to use that info to let your onPlayerStateChange method know what to do to you navbar. Something like this might get at what you need:

var players = {};
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady() {
    var iframes = document.getElementsByTagName('iframe');
    for (var i = 0; i < iframes.length; i++) {
        players[iframes[i].id] = [new YT.Player(iframes[i].id, {
            events: {
                'onStateChange': onPlayerStateChange
            }
        }), false] // the 'false' in this array is whether or not it's currently playing
    }
}

function onPlayerStateChange(event) {
    if (event.data == 1) {
        document.getElementById("c10").innerHTML = "<span style='color:red'>10</span>";
        players[event.target.a.id][1] = true;
    }
    if (event.data == 2 || event.data == 0) {
        var allStopped = true;
        players[event.target.a.id][1] = false;
        for (var frame in players) {
            if (players[frame][1] == true) {
                allStopped = false;
                break;
            }
        }
        if (allStopped == true) {
            document.getElementById("c10").innerHTML = "10";
        }
    }
}

Here's a fiddle of this code that demonstrates it's working:

http://jsfiddle.net/jlmcdonald/VA64N/9/

Upvotes: 0

Related Questions