-
-
Notifications
You must be signed in to change notification settings - Fork 2.9k
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.
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
WebVTT files to load Tooltip Thumbnails #46
Comments
Hey @adantzler, Thanks! Nice idea. I'll have a look at implementing something for sure. 👍 |
That's awesome, let me know if I can help in any way. On Tue, Mar 3, 2015 at 4:12 PM, Sam Potts notifications@github.com wrote:
|
I've created a little snippet to catch displayed seek onHover 💃
|
Cool! You might want to use MutationObserver rather than DOM events given the performance benefit: |
Thanks! I didn't looked at performance, because I did not finished yet. I will take a look at MutationObserver, when will be ready and works well for me, I will post it here. Here is a dynamic thumbnail, I don't think its powerful, I would recommend server-side thumbnails. HTML code
JS code
|
Just to add a couple data points on going this route to implement thumbnails over the time rail. THEOplayer and Radiant Media Player also implement thumbnails over the time rail using a WebVTT metadata file that points to images using a sprite with media fragments. https://support.theoplayer.com/hc/en-us/articles/207460505-Preview-Thumbnails https://www.radiantmediaplayer.com/docs/3.0/preview-thumbnails.html When I had implemented a plugin for MediaElement.js to do similar, I found MutationObserver to help with performance. |
I started work on this today.) Just FYI in case of a freak overlap of someone else also thinking to finally do this.) Should be done some time this week jamesoflol@5bd00ab |
@jamesoflol a) "hours" are optional in WebVTT: https://www.w3.org/TR/webvtt1/#webvtt-timestamp b) It should be possible to use absolute URLs (e.g. https://example.com/thumb.jpg) |
Patch to fix hours:
|
Thanks doublex! Have implemented fixes for both 'a' and 'b'. I've also fixed a minor issue with images loading out of order. https://github.com/jamesoflol/plyr/commits/preview-thumbs @sampotts should I put in a new PR? |
@jamesoflol |
Plyr.io looks awesome! Great work!
When we encode our videos we generate a VTT file and include thumbnails in it.
We are currently using JWPlayer and it's format we follow is below:
WEBVTT
00:00.000 --> 00:05.000
/assets/preview1.jpg
00:05.000 --> 00:10.000
/assets/preview2.jpg
00:10.000 --> 00:15.000
/assets/preview3.jpg
00:15.000 --> 00:20.000
/assets/preview4.jpg
The text was updated successfully, but these errors were encountered: