VTT file containing image url and caption

Question

Is there a way I could store image url inside VTT file? For example:

WEBVTT

00:00:00.000 --> 00:00:10.000
Chapter tile goes here
thumb_0001.jpg

00:00:10.000 --> 00:00:20.000
Another chapter title
thumb_0002.jpg

I know I could write custom parser, but I am wondering is there some kind of a standard for this?

Answer 1

You would need to have a separate WebVTT metadata track, a player that supports them, and likely some scripting and CSS to act on the cue payload. You can see an AblePlayer demo of a few things a metadata track can do (at the 39 second mark). If you examine the wwa_meta.vtt file, you can see that it references ID selectors that happen to be in the player's page html code.

Answer 2

The example you give is quite similar to what is being done currently across the internet for image thumbnails. It's most commonly used for animated video previews on... adult... websites. If you Google search for ".jpg" filetype:vtt you'll find some interesting examples that take the same approach as yours.

As Murray cited already, it's not really the proper way to do it. The metadata track option he cites is much more inline with correct use of the VTT spec. However it's also not broadly supported. You could follow VTT guidelines and end up with a file that can't be read by many players.

One other option is CSS. VTT is designed to work nicely with CSS. So you could include you image as a CSS background-image. That way it's separate from the text content and (at least in theory) some players might even be able to display it properly.