Embed / Player Stuck in "Preparing" Screen, no pre-roll

API
1

Since a few (?) days, my embedded Streams do not get past the “Preparing Stream” pre-roll. it never showed any ads (only this screen), but now it gets stuck like this. The Chat is working.

grafik
grafik1409×818 134 KB

This is the link: LeagueStreams

It does work on other streams, where there seem to be no pre-roll:

(only examples if they are live).

I embed it in my Angular App

public initLivePlayer(platform: Platform, streamer: StreamerDetailsDTO, workspaceHeight: number, qualityIsSet: boolean = false) {
    if (platform === Platform.TWITCH) {
      // @ts-ignore
      this._player = new Twitch.Embed('player', {
        channel: streamer.platformIdentifier,
        height: workspaceHeight,
        width: '100%',
        autoplay: false,
        parent: this._parents
      });

      this._player.addEventListener(Twitch.Embed.VIDEO_PLAY, () => {
        if (!qualityIsSet) {
          this._player.setQuality(this._player.getQualities()[1].group, this._player.getQualities()[1].name);
          qualityIsSet = true;

        }
      });

      this._player.addEventListener(Twitch.Embed.VIDEO_READY, () => {
        this._player.play();
      });

      this._playerSubject.next(this._player);
    }
  }

embedded here

<div class="flex flex-wrap scrollable-div">
  <div class="w-full md:w-4/5">
    <div class="w-full" id="player"></div>
  </div>
</div>

And the index.html has the .js file

<!doctype html>
<html dir="ltr" lang="en">
<head>
  <meta charset="utf-8">
  <title>LeagueStreams</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
   ...
  <script src="https://embed.twitch.tv/embed/v1.js"></script>
   ...
</head>
<body>
<app-root></app-root>
  <noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
</html>

I see this on Win11 Firefox and Chrome latest, both no Adblock and on Android, same browsers.

2

Does it permanently stay on the ‘Preparing’ screen, or does it end after a few minutes? If it goes away after a few minutes then that’s normal as sometimes that screen is shown when an ad break should be running, but for whatever reason there were no ads to display.

Also, unrelated to purple screen of death about preparing ads, just so you’re aware you’re getting a warning in console from the Embed about it blocking autoplay, which might be due to the element you have to the right of the player (the one currently showing Varus at the time of this reply) overlapping the player itself. Even though you’re not using autoplay, it’s just something to be aware of.

3

Retest with this removed in case it’s conflicting with the preparing screen.

And to be honest you should leave the user to choose their quality.

Basically strip it back to bare bones and work up/readding JS till it breaks and trace the fault

4

It does not go away, it seems to crash. I saw that by switching from Player to Embed, the layout seems to be off, will check that!

I will try that, thank you both. However, I added this in the first place, because it ALWAYS selected the lowest possible quality by default.

Also I think that always having the “fallback” seems odd and like a mistake…