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.

Sign up for GitHub

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

Jump to bottom

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

Open
kaugesaar opened this issue Mar 16, 2016 · 8 comments
Open

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

kaugesaar opened this issue Mar 16, 2016 · 8 comments
Labels
Investigating

Comments

@kaugesaar
Copy link

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>
@kaugesaar kaugesaar changed the title Embed player API seek method and event "ready" does not work for Embed player API seek method and event "ready" does not work Mar 16, 2016
@scien
Copy link

scien commented Apr 27, 2016

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

screen shot 2016-04-26 at 4 01 20 pm

screen shot 2016-04-26 at 4 10 05 pm

screen shot 2016-04-26 at 4 25 02 pm

screen shot 2016-04-26 at 4 15 51 pm

screen shot 2016-04-26 at 4 14 52 pm

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
Copy link
Contributor

mrjumjum commented Apr 29, 2016 •
edited
Loading

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
Copy link

scien commented Apr 29, 2016

got it. thanks for the reply

@mrjumjum
Copy link
Contributor

mrjumjum commented Apr 29, 2016 •
edited
Loading

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
Copy link

scien commented May 2, 2016

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
Copy link

jasongornall commented May 18, 2016 •
edited
Loading

any update here? I too am curious @mrjumjum

@mavrick
Copy link

mavrick commented Jul 26, 2016

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
Copy link

madprops commented Feb 24, 2019 •
edited
Loading

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Investigating
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@madprops @mavrick @scien @kaugesaar @mrjumjum @jasongornall