Embed player API seek method and event "ready" does not work

kaugesaar commented 8 years ago

The docuemtation says.

"ready"  : Emitted when player is ready to accept function calls.

What exactly is function calls in this case? Because in the example below player.seek(startTime) does not work. I do see the log message in console.

<div id="twitch-player"></div>
<script src= "http://player.twitch.tv/js/embed/v1.js"></script>
<script type="text/javascript">
    var startTime = 5322;
    var options = {
        width: 854,
        height: 480,
        video: "v54549410"
    };

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

    player.addEventListener('ready', function() {
        console.log('ready event fired');
        player.seek(startTime);
    });
</script>

scien commented 8 years ago

any progress on this one? it does seem like ready is being fired too early.

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="http://player.twitch.tv/js/embed/v1.js"></script>
  </head>
  <body>
    <div id="player"></div>
    <script type="text/javascript">
      var player = new Twitch.Player("player", {
        channel: "monstercat",
        height: 400,
        width: 600
      });

      // or explicitly call setChannel. this has the same issue
      // player.setChannel('monstercat');

      // channel is not set yet (my expectation is that it would be)
      console.log('channel 1', player.getChannel());

      player.addEventListener('ready', function() {

        // channel is still not set
        console.log('channel 2', player.getChannel());

        // this approach fixes the issue described later
        // wait until channel is set, then play
        var play = function() {
          if(player.getChannel()) {
            player.play();
          }
          else {
            setTimeout(play, 1);
          }
        }
        play();

        // js error: when calling either of these immediately, the player doesn't know what
        // channel it's on, so the load method returns undefined instead of a promise
        // player.play();
        // setTimeout(function() {player.play();}, 1);

        // seems like the channel is usually set within the first one second and this works
        // but is hacky
        // setTimeout(function() {player.play();}, 1000);
      });
    </script>
  </body>
</html>

images describing the flow above

se (the channel name) and ue (the video id) are both still undefined when calling play directly in the ready event handler, so there's nothing to load and no Promise is returned from load.

Is there an event listener other than ready which will be called when the video/channel is ready to go?

mrjumjum commented 8 years ago

~~Hello, There currently isn't an event listener to listen to when the video/channel is ready. Please use setTimeout() and wait an appropriate time before calling seek and other functions.~~

scien commented 8 years ago

got it. thanks for the reply

mrjumjum commented 8 years ago

Hello, @scien

Apologies for the previous inaccurate reply. We will be implementing a 'playing' event that will signify when the video/channel is playing and ready to go.

scien commented 8 years ago

thanks @mrjumjum . What about in the case where a player is embedded without autoplay? It would be nice to have an event knowing that it's safe to call play() and get the expected behavior. Anything planned for this?

jasongornall commented 8 years ago

any update here? I too am curious @mrjumjum

mavrick commented 8 years ago

Bump, I have been able to repro the case on my end. You have to have autoplay=true the video for the seek() event to work. Calling play() sets the seek time back to 0

madprops commented 5 years ago

Waiting for what @scien said. Right now after setChannel(src), calling .play() won't work until a while later. I need an event to know when the video is ready to be played.

justintv / Twitch-API

Embed player API seek method and event "ready" does not work #514