addEventListener Not Working

API
1

Hi,

I’m using the API to embed videos direct into a site. And I’m having issues with the javascript events. The events just don’t seem to trigger. I ideally want to use .ONLINE but am currently using .PAUSED as it’s easier to test.

    var player = new Twitch.Player("twitchplayer", options);

player.addEventListener('Twitch.Player.PAUSED', function() {
    console.log('paused');
});

Any help would be much appreciated.

Thanks
Jake

2

This test I built may help

https://twitch.extensions.barrycarlyon.co.uk/temp/player_test.html

image
image864×913 255 KB

A is button press log/some events
B is all events

3

Thank you for your reply Barry. Is there a way I can see the code?

Thanks
Jake

4

Just view source the page

view-source:https://twitch.extensions.barrycarlyon.co.uk/temp/player_test.html

5

Thank you. I can’t seem to notice any real differences though when it comes to the code strucutre compared to mine.

6

Line 51

var player = new Twitch.Embed("test", options);

I’m talking to the embed, you are talking to the player.

So I’m using embed everything as my basis

You are using the older player

7

Ah okay, thanks. Does that mean that a lot of functionality here is now depreciated?

Thanks
Jake

8

I implemented most of those on the test I linked to

And can poke about to test the rest

pause/play are obvious
setChannel is on line 142
setQuality line 156

9

Cool. The functionality I’m looking to build is:

Have the stream embedded on the page, with the player hidden until the stream is actually streaming/live.

10

I wouldn’t use events for that. Since then you are fighting autoplay/muted logic in browsers even more so.

Either just show the player regardless of stream status, as doing it pure player reading you have to show the player, wait for it to read the status, then show/hide then you don’t know if autoplay was aborted by the browser or not.

I’d pull the data from the API or via Webhooks and frontend based on that so if the page is open and the stream state changes the palyer wouldn’t appear until reload

Additionally if you hide the player via CSS, there is no guarantee the browser will allow the player to auto play when the stream goes live, blocking the event triggers.

11

Right okay, I see. Thank you.

See I’ve got it to work so that when the video ends, it hides using .getEnded().

Could you elaborate on this please?

Either just show the player regardless of stream status, as doing it pure player reading you have to show the player, wait for it to read the status, then show/hide then you don’t know if autoplay was aborted by the browser or not.

Thanks
Jake

12

getEnded works to hide the player.

But conversely the other way you may have issues as a hidden dom element may get blocked by the browser for autoplay, so you may not see any events trigger.

13

I see, thanks. Would Twitch.Embed.VIDEO_PLAY work do you think if the player was set to autoplay when going live?

Thanks
Jake

14

I cannot 100% say for sure that it will as the brower autoplay blocking technology is a bit of a black box

15

Cool. Thank you so much for your help, much appreciated.

16

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