Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Possible race condition with Options.image? #429

Open
bchah opened this issue May 30, 2024 · 2 comments
Open

Possible race condition with Options.image? #429

bchah opened this issue May 30, 2024 · 2 comments

Comments

@bchah
Copy link
Contributor

bchah commented May 30, 2024

I notice that when creating an instance of OvenPlayer and setting the 'image' option to a URL which fetches an image from an API, on many occasions OvenPlayer will only show the background color, not the image. In a few random tests it behaves as though there's some sort of race condition or synchronous callback that is preventing OP from waiting for the image to load and failing over to just showing the background color.

Has anybody else noticed this? If so, my workaround was to set the poster on the video player manually after OP is ready, e.g.

player.on('ready', () => {

                const videoElement = player.getMediaElement();
                videoElement.setAttribute("poster", image_url);
                player.off('ready');
            
        });
@SangwonOh
Copy link
Member

Hi @bchah . Does this happen in situations like this test code?

If only the background color is visible, will the player be unable to load the thumbnail forever?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Thumbnail Test</title>
  <style>
    #player {
      width: 100%;
    }
  </style>
</head>

<body>

  <div id="player"></div>

  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script src="https://cdn.jsdelivr.net/npm/ovenplayer@0.10.35/dist/ovenplayer.min.js"></script>

  <script>

    const player = OvenPlayer.create('player', {
      image: 'https://picsum.photos/720/480',
      sources: [
        {
          type: 'hls',
          file: 'https://llhls-demo.ovenmediaengine.com/app/stream/llhls.m3u8'
        },
      ]
    });
  </script>
</body>

</html>

@bchah
Copy link
Contributor Author

bchah commented Jul 2, 2024

@SangwonOh I was able to periodically reproduce this problem with these options: autoStart TRUE, mute FALSE, showBigPlayButton FALSE and a WebRTC source that is offline.

It's not critical for now and I can't give you the exact steps to reproduce it, I just often see the background color of the player with no image while loading, even though an 'image' is specified for the background.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants