Bug with .seek() for Youtube videos

[onikienko]

• Issue does not already exist
• Issue observed on https://plyr.io

Expected behavior

The video is paused (just loaded). When seek() to some point in the video it should not start to play.

Actual behavior

seek() should work with respect to the current plyr state. But it starts to play.
But the worst that for some videos it works as expected (f.e. this one https://www.youtube.com/watch?v=ZqqZSuKrY-U ) but for some not (i.e. this one https://www.youtube.com/watch?v=D9YZw_X5UzQ )

Environment

• Browser: Chrome
• Version: 62
• Operating System: Windows
• Version: 10

Players affected:

• HTML5 Video
• HTML5 Audio
• YouTube
• Vimeo

Steps to reproduce

Use code below

<div class="vid"  data-type="youtube" data-video-id="https://www.youtube.com/watch?v=D9YZw_X5UzQ"></div>
<div class="vid"  data-type="youtube" data-video-id="https://www.youtube.com/watch?v=ZqqZSuKrY-U"></div>
<script>
    "use strict";

    const plyrs = plyr.setup('.vid');
    const plr1 = plyrs[0];
    const plr2 = plyrs[1];
    plr1.on('ready', () => {
        console.log('plr1 ready');
        plr1.seek(10);
    });
    plr2.on('ready', () => {
        console.log('plr2 ready');
        plr2.seek(10);
    });
</script>

[friday]

Neither of the links start playing in my tests (with you code). Rather, the loading animation is showing in a constant loop. This makes sense since the data hasn't loaded. I don't consider this to be a bug, but perhaps I misunderstood?

To load the current time you can play, then pause, like this:
https://jsbin.com/dujonufasa/edit?js,output

You may also want hide/black out the container until it's loaded (and likely mute/unmute).

Also see #426 for a feature suggestion related to this issue.

[spencer237]

#709 use this methode
https://github.com/sampotts/plyr/blob/master/src/js/plyr.js#L1771

[onikienko]

@friday

RIght. I found that there is no issue if the script is running on the server. But if you run it with no server -> it there. https://www.youtube.com/watch?v=D9YZw_X5UzQ starts to play on seek.

Any idea why? Previously (before last updates) we do not have this issue.

Just run index.html from the root folder from attached zip.

plyr-test.zip

@spencer237

Thanks for the answer. But this issue is already fixed. Isn't it?

[friday]

That's strange. Can confirm that this is happening to the top video if opening the file directly in Chrome (but not Firefox). Perhaps some sort of race-condition involved.

Seems to be very edge-case. I would try to avoid opening html files like that. Self-hosting isn't hard. At least for devs (try pythons SimpleHTTPServer or Caddy). Due to security reasons, opening html files in your browser isn't the same experience as if they were hosted. Still strange though.

In case that doesn't work for you, this worked for me opening directly in Chrome

plyr.setup('.vid').forEach(plr => {
  plr.pause(); // Pausing here _shouldn't_ be necessary, but is
  plr.on('ready', () => {
    plr.toggleMute(true);
    plr.seek(10);
    plr.play();
  });
  plr.on('playing', () => {
    if (!plr.seekDone) {
      plr.pause();
      plr.toggleMute(false);
      plr.seekDone = true;
    }
  });
});

[onikienko]

For me on Firefox same issue (v.57)

Most of the youtube videos have this bug.

Anyway. Today moved dev. env. to a self-hosted server and no issue. And thank you for the code snippet!

Won't close the issue. Maybe someday it will be fixed.

[sampotts]

I can't seem to replicate this on v3 so assuming it's fixed? Feel free to re-open if that's not the case 👍