Plyr: Seek-Preview

[calvinthefreak]

I want to add something like YouTube has for quite some time now, I want you to add a Seek-Preview for me like on YouTube, because I am recently quite interested in dtube project but the player pisses me so... here is my thing to ask if it is possible:

We have this Preview Image, Prerendered: https://ipfs.io/ipfs/QmaJNsdbT2jARQYSmNJuNhCQucLiTmWGookzCFjjSpzpLq

and this is the thing I want:

thanks in advance.
Sorry for my English.

[Ulf3000]

1up for this , without the preview , every alternative youtube player is automatically worthless , sorry but thats the truth

[sampotts]

I’ll still sleep at night don’t worry. Feel free to get a pull request in...

[Offbeatmammal]

looks like it would be possible to add something into controls.js in updateSeekTooltip(event) to also look up a thumbnail image for the relevant timestamp and show it while scrubbing on the seek bar but it's not as trivial/easy as just 'add some hover-over iamges':

• can we query those images from youTube?
• can we query those images from Vimeo?
• in all cases what granularity of thumbnails do we need (eg is it one every second, or one every _n_% of the length of the content, and how do the rules change for a 15s vs a 5min vs a 30 min vs a 90 min piece of content)
• how would they be generated/named (ffmpeg for the first, number the naming convention is going to tie back to how they're used/referenced)?

[jamesoflol]

There's already a PR: https://github.com/sampotts/plyr/pull/1253

I was hoping for a little testing/feedback from anyone before putting the finishing touches on it

In answer to your questions:

• Thumb file naming: I've gone with the VTT spec for thumbs, same as a few other implementations out there, so that people can use any interval + naming convention that they want
• Granularity: One every n seconds. Different intervals depending on video length. My personal preference is:
  
  
  
  • 1hr+: 10 second interval
  
  
  • 20m+: 5 second interval
  
  
  • 5m+: 2 second interval
  
  
  • 0-5m: 1 second interval
  
  

[Offbeatmammal]

@jamesoflol - quick look at the implementation and it's really nice! using vtt makes it more flexible (I've done an implementation in the past that embed the tc into the filename which was messy!)
quick play on macOS browsers (current Chrome, Firefox, Safari) I didn't see any issues.
Agree sprite images would be nice (though initial load might be slower, so would need to preload/pre-cache the image.
Is there any downside/issue to only supplying one vtt file have having it used for all quality sources?

[jamesoflol]

Thanks for that. I've actually implemented jpeg sprites today, will commit new code soon. It's much more ideal with sprites. Better with high latency, safer with http1-only browsers, etc.

Sprites shouldn't hurt load time in any significant way? No images are downloaded until the user hovers seek bar. It means that implementers will want to choose a tile size that keeps each sprite down to under a few hundred KB. (There's also a CPU performance ramification in going too large with a sprite sheet, as the browser has to print the entire thing, not just the individual frame.)

[jamesoflol]

How do you propose putting more than one quality source into a single VTT file?

[Offbeatmammal]

How do you propose putting more than one quality source into a single VTT file?

was thinking rather than a vtt for each quality, just allow a single one for if implementor just supplies
src: [
'https://dev.videohop.com.au/s3/v/bkxvj83ae3k-hls/thumbs/thumbs.vtt',
]

it would use the same thumbs for 90p, 240p, and 1080p (some implementors might want to minimise thumbnail generation and reuse the same for each) ...

another random thought... does this work with yT and Vimeo thumbs as well, or just ones for a locally hosted asset?

[jamesoflol]

Oh I see. Yeah, one single thumb quality is fine, and I guess may actually be the most common use - somewhere between 80 and 160px.

I'm not writing this to work with Youtube or Vimeo. They don't provide a supported interface that I know of, and as such I expect that their image infrastructure/locations/specifications will change without notice. Heck, even their support interface (video embed) seems to change enough. I imagine that you could have Youtube hosting your video, and host the thumbnails yourself. Though I guess that kinda defeats the purpose of using youtube...

[Offbeatmammal]

I imagine that you could have Youtube hosting your video, and host the thumbnails yourself. Though I guess that kinda defeats the purpose of using youtube...

had a bit of a dig around and can't find an API or official way that'll get the info (looks like they create storyboards which are image sprites and lazy load them, but doesn't seem to have any timing info etc ... and as you say, likely they'd change format at any time. I'd say not worry about yT and Vimeo for now (sorry I muddied the waters!)

[doublex]

Any chance that https://github.com/sampotts/plyr/pull/1253 gets merged?

[sampotts]

Yep, I just need time to review.

[jamesoflol]

Probably good that you haven't had time yet! The changes for jpeg sprites were a bit more destructive than I thought... Just adding neighbouring-image preloading now.

[jamesoflol]

OK, preloading is implemented, demo updated. It seems to be working very nicely now, very fast. Think I'm happy with it, just need a few more hands testing now.

[Offbeatmammal]

quick test, looks good in Chrome, Safari, Firefox and Tor Browser on macOS (as expected Tor has some latency but once caught up behaves as expected)
Edge (Win10) thumbnails appear, but ... seeking seems blocked (clicking on the seek bar did not re-position the video as expected) - error in console: SCRIPT5022: Exception thrown and not caught
is.js (1,1). Chrome on Win10 works. Also Chrome on Deepin Linux. Will try and test on R-Pi B+/Chrome later today (but have to find where I put it!)

[jamesoflol]

Good catch! Right you are. I'll look into that. Ergh debugging Edge is awful :)

Thanks!

[sampotts]

Ergh debugging Edge is awful

Isn't it?! Same for IE. There's a reason Microsoft have stopped trying to make browsers! 😂

[jamesoflol]

I have confidence in their ability to screw up even a re-skin ;)

[Offbeatmammal]

it'll be interesting to see how the move to Chromium takes things with Edge (and Brave also giving up on their skin, BTW just also testing in Brave on macOS, works fine).

FWIW the base plyr.io, seek is working in Edge

[jamesoflol]

That's fixed. Seems Edge didn't like me using the array spread operator to convert an array. Replaced with Array.from()

[doublex]

@sampotts
Thanks a lot!

[sampotts]

This has been in since 3.5.0 thanks to @jamesoflol 👍