[SOLVED] Multiple external .vtt (webvtt) files into Hype

After 2 days of trying to cobble together from various examples I have learned something about javascript/json (yeah) but not enough to solve my problem.

What do I need or want? I like to present on our website video interviews which has both subtitles and metadata (text + URL). The subtitles and metadata need to be outside of the video as in the crude example below.

Now the subtitles & metadata are in 1 json file but I run into timing/editing problems. So I would be much happier when they are separate. Attached is a .zip with all that I got so far.
video-template-mixed.zip (163.0 KB)

The big story is that I like to use Hype as a platform to create enhanced interactive video, just so you know.

It seems to work for me? Can you better describe where there’s an issue?

Thank you Jonathan for replying.

yes that example does work indeed and I meant to ask:
how can I get this to work inside Hype and with a separate subtitle and metadata file?

My previously attached .vtt were in json format as the javascript needs that. Ideally I would have the webvtt format like this:
video-template-mixed-metadata.vtt -->

00:00:01.000 --> 00:00:06.000
01-06 seconds link 1

00:00:07.000 --> 00:00:09.000
07-09 seconds link 2

00:00:06.000 --> 00:00:09.000
10-15 seconds link 3

video-template-mixed-subtitles.vtt -->

00:00:00.000 --> 00:00:03.000
Donker blauw

00:00:03.000 --> 00:00:06.000
Middel blauw

00:00:06.000 --> 00:00:09.000

00:00:09.000 --> 00:00:12.000
Kanarie geel

00:00:12.000 --> 00:00:15.000


Yeah, there’s not much of a problem with this in Hype. The basic steps are:

  1. Add the video and subtitle tracks to the Resources Library of a Hype document
  2. Move the <video> element into an empty Rectangle by editing its Inner HTML
  3. Change the resources referenced to be proceeded with ${resourcesFolderName}/ so Hype finds them (and also uncomment the 2nd track since that is what you want to use!)
  4. Add your labeling elements and assign them Unique Element IDs in the Identity Inspector
  5. Add an On Scene Load handler to run javascript
  6. Basically use the code in your .js document here, but loop over all texttracks to run the oncuechange function.

Here’s a Hype document that runs 2 separate track files and shows their output for one video:

text-tracks.hype.zip (55.6 KB)


wow! This is working. I already gave up on the idea but now I can play around again :slight_smile: Fantastic Jonathan, much appreciated.

1 Like

I get an error without subtitling.

text-tracks 2.hype.zip (64.4 KB)

Can you elaborate on the error/what you see? I don’t notice any issues in the console.log when I run in Desktop Safari/Chrome.