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


(Jeroen Carelse) #1

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.


(Jonathan Deutsch) #2

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


(Jeroen Carelse) #3

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 -->
WEBVTT

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

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

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

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

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

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

3
00:00:06.000 --> 00:00:09.000
Oranje

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

5
00:00:12.000 --> 00:00:15.000
Rood

Jeroen


(Jonathan Deutsch) #4

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)


(Jeroen Carelse) #5

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