Multiple Embed Videos at the same page

API
1

Hey guys, I’m trying to embed multiple videos in my website and also hidding who gets offline.

This is the code I’m using:

<table border="1">
				<colgroup>
    <col class="twitch-tabela1">
    <col class="twitch-tabela2">
    <col class="twitch-tabela3">
  </colgroup>
			<!--<p>O autor do popup foi o Góes</p>-->
  <!---------------------------------- Streamer 1 ---------------------------------->
<td><div id="twitch-embed1"></div>

<!-- Load the Twitch embed script -->
<script src= "https://player.twitch.tv/js/embed/v1.js"></script>

  <div id="twitch1" class="hide1">
  </div>

  <script type="text/javascript">
    var options = {
      channel: "livedogoes", // TODO: Change this to the streams username you want to embed
      width: 300,
      height: 300,
    };
    var player = new Twitch.Player("twitch1", options);
    player.setVolume(0.0);

    player.addEventListener(Twitch.Player.READY, initiate)

    function initiate() {
      player.addEventListener(Twitch.Player.ONLINE, handleOnline);
      player.addEventListener(Twitch.Player.OFFLINE, handleOffline);
      player.removeEventListener(Twitch.Player.READY, initiate);
    }

    function handleOnline() {
      document.getElementById("twitch1").classList.remove('hide1');
      player.removeEventListener(Twitch.Player.ONLINE, handleOnline);
      player.addEventListener(Twitch.Player.OFFLINE, handleOffline);
      player.setMuted(true);
    }

    function handleOffline() {
      document.getElementById("twitch1").classList.add('hide1');
      player.removeEventListener(Twitch.Player.OFFLINE, handleOffline);
      player.addEventListener(Twitch.Player.ONLINE, handleOnline);
      player.setMuted(true);
    }
  </script></td>

  <!---------------------------------- Streamer 2 ---------------------------------->
  <td><div id="twitch-embed2"></div>

<!-- Load the Twitch embed script -->
<script src= "https://player.twitch.tv/js/embed/v1.js"></script>

  <div id="twitch2" class="hide2">
  </div>

  <script type="text/javascript">
    var options = {
      channel: "gaules", // TODO: Change this to the streams username you want to embed
      width: 300,
      height: 300,
    };
    var player = new Twitch.Player("twitch2", options);
    player.setVolume(0.0);

    player.addEventListener(Twitch.Player.READY, initiate)

    function initiate() {
      player.addEventListener(Twitch.Player.ONLINE, handleOnline);
      player.addEventListener(Twitch.Player.OFFLINE, handleOffline);
      player.removeEventListener(Twitch.Player.READY, initiate);
    }

    function handleOnline() {
      document.getElementById("twitch2").classList.remove('hide2');
      player.removeEventListener(Twitch.Player.ONLINE, handleOnline);
      player.addEventListener(Twitch.Player.OFFLINE, handleOffline);
      player.setMuted(true);
    }

    function handleOffline() {
      document.getElementById("twitch2").classList.add('hide2');
      player.removeEventListener(Twitch.Player.OFFLINE, handleOffline);
      player.addEventListener(Twitch.Player.ONLINE, handleOnline);
      player.setMuted(true);
    }
  </script></td>
  <!---------------------------------- Streamer 3 ---------------------------------->
  <td><div id="twitch-embed3"></div>

<!-- Load the Twitch embed script -->
<script src= "https://player.twitch.tv/js/embed/v1.js"></script>

  <div id="twitch3" class="hide3">
  </div>

  <script type="text/javascript">
    var options = {
      channel: "symbiolive", // TODO: Change this to the streams username you want to embed
      width: 300,
      height: 300,
    };
    var player = new Twitch.Player("twitch3", options);
    player.setVolume(0.0);

    player.addEventListener(Twitch.Player.READY, initiate)

    function initiate() {
      player.addEventListener(Twitch.Player.ONLINE, handleOnline);
      player.addEventListener(Twitch.Player.OFFLINE, handleOffline);
      player.removeEventListener(Twitch.Player.READY, initiate);
    }

    function handleOnline() {
      document.getElementById("twitch3").classList.remove('hide3');
      player.removeEventListener(Twitch.Player.ONLINE, handleOnline);
      player.addEventListener(Twitch.Player.OFFLINE, handleOffline);
      player.setMuted(true);
    }

    function handleOffline() {
      document.getElementById("twitch3").classList.add('hide3');
      player.removeEventListener(Twitch.Player.OFFLINE, handleOffline);
      player.addEventListener(Twitch.Player.ONLINE, handleOnline);
      player.setMuted(true);
    }
  </script></td>
</table>

The videos are showing normally, but when a streamer is offline is not hidding.

this is the CSS that i’m using:

<style>
    .hide { display:none; 
    }     
    .twitch-imagem{
        background-color: transparent;
        height: 70px;
        width: 110px; 
        cursor: pointer;   
    }  
    /* Optional: The following css just makes sure the twitch video stays responsive */
  		 #twitch1 {
      position: relative;
      padding-bottom: 56.25%; /* 16:9 */
      padding-top: 25px;
      height: 0;
    }
        #twitch2 {
      position: relative;
      padding-bottom: 56.25%; /* 16:9 */
      padding-top: 25px;
      height: 0;
    }
        #twitch3 {
      position: relative;
      padding-bottom: 56.25%; /* 16:9 */
      padding-top: 25px;
      height: 0;
    }
  		 #twitch1 object, #twitch1 iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
        #twitch2 object, #twitch2 iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
        #twitch3 object, #twitch3 iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
	.twitch-tabela1{
        background-color: black;
        height: 200px;
        width: 250px;
    }
    .twitch-tabela2{
        background-color: black;
        height: 200px;
        width: 250px;        
    }
    .twitch-tabela3{
        background-color: black;
        height: 200px;
        width: 250px;    
    }  

</style>

Can anyone help me?
If I put only 1 streamer to show, the code works normally, if the streamer get offline, is hidding as it is supposed to do.
The code is not working only with 2+ streamers.

image
image1843×909 107 KB

OBS: I already tried to use the hide1 hide2 and hide3 in the css code. Didnt work.

2

You have three of each function with the same name.

So the last function likely “beats” all the other ones.

So

    function handleOffline() {
      document.getElementById("twitch1").classList.add('hide1');
      player.removeEventListener(Twitch.Player.OFFLINE, handleOffline);
      player.addEventListener(Twitch.Player.ONLINE, handleOnline);
      player.setMuted(true);
    }
    function handleOffline() {
      document.getElementById("twitch2").classList.add('hide2');
      player.removeEventListener(Twitch.Player.OFFLINE, handleOffline);
      player.addEventListener(Twitch.Player.ONLINE, handleOnline);
      player.setMuted(true);
    }
    function handleOffline() {
      document.getElementById("twitch3").classList.add('hide3');
      player.removeEventListener(Twitch.Player.OFFLINE, handleOffline);
      player.addEventListener(Twitch.Player.ONLINE, handleOnline);
      player.setMuted(true);
    }

In JS essentially means

    function handleOffline() {
      document.getElementById("twitch3").classList.add('hide3');
      player.removeEventListener(Twitch.Player.OFFLINE, handleOffline);
      player.addEventListener(Twitch.Player.ONLINE, handleOnline);
      player.setMuted(true);
    }

So the code to handle the first and second embeds is uncallable.
(Well each initiate function exists long enough to be called before it’s overwritten)

But thats your problem you are overwriting the function as you used the same name.

You need to revise the code to understand which frame is to be updated or to handle distinct naming of functions

3

Do you have the solution for that?
I’ve tried

function handleOffline1
function handleOffline2
function handleOffline3

and didnt work

4

Try making each variable unique.

For example in each of your <script> blocks you player, which is fine when initializing the player, but the 2nd <script> block overwrites the first reference to player with a new one, and the 3rd <script> block overwrites that, so even if each function is now unique they still all reference the same player as the functions will reference whatever the value of player is at the time it’s called.

If you’re not seeing why things are interfering with each other, maybe try to use just a single <script> block, or load a single .js file rather than break the code up the way you have.

5

Guys, I’ll be honest, I did much more than my capacity, I’m not even a programer and for me what I did was beyond spectacular, please can someone help me to finish this?
my discord: goes#7131

6

Anyone?

7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.