search

sampotts / plyr

A simple HTML5, YouTube and Vimeo player
https://plyr.io
MIT License
26.38k stars 2.92k forks source link

Seek-Preview #1159

Closed calvinthefreak closed 5 years ago

calvinthefreak commented 6 years ago

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: image

thanks in advance. Sorry for my English.

Ulf3000 commented 6 years ago

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

sampotts commented 6 years ago

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

Offbeatmammal commented 5 years ago

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':

jamesoflol commented 5 years ago

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:

Offbeatmammal commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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

Offbeatmammal commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

sampotts commented 5 years ago

Yep, I just need time to review.

jamesoflol commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

Thanks!

sampotts commented 5 years ago

Ergh debugging Edge is awful

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

jamesoflol commented 5 years ago

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

Offbeatmammal commented 5 years ago

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 commented 5 years ago

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

doublex commented 5 years ago

@sampotts Thanks a lot!

sampotts commented 5 years ago

This has been in since 3.5.0 thanks to @jamesoflol 👍

inglesuniversal commented 3 years ago

Question about this old topic: What is the appropriate time interval between sprites best suited for Plyr?

Thanks.

UPDATE:

Just found it.... I guess I'll leave it here if somebody runs into the same issue

1 sec interval between thumbnails (sprite sheet)

SAMPLE_VTT_THUMBNAIL_SPRITE_FILE

jamesoflol commented 3 years ago

Question about this old topic: What is the appropriate time interval between sprites best suited for Plyr?

Thanks.

UPDATE:

Just found it.... I guess I'll leave it here if somebody runs into the same issue

1 sec interval between thumbnails (sprite sheet)

SAMPLE_VTT_THUMBNAIL_SPRITE_FILE

Depends on the length of your video. Under 5 minutes: 1 second. Under 20 minutes: 2 seconds. Under 1 hour: 5 seconds. Over 1 hour: 10 seconds.

If you set it too short for a long video, you'll have several unwanted effects: The code efficiently precaches the spritesheets before and after the currently previewed time, but if the interval is too short, the user's mouse will likely move faster than the cached images. And itll be wasted bandwidth, because in e.g. a 1-hour video, moving the mouse cursor 1 pixel to the right will usually actually be more than 10 seconds