AirenSoft / OvenPlayer

OvenPlayer is JavaScript-based LLHLS and WebRTC Player for OvenMediaEngine.
https://OvenMediaEngine.com/ovenplayer
MIT License
497 stars 124 forks source link

Possible race condition with Options.image? #429

Open bchah opened 1 month ago

bchah commented 1 month ago

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 commented 2 weeks ago

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 commented 2 days ago

@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.