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.
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
Yeah, there’s not much of a problem with this in Hype. The basic steps are:
Add the video and subtitle tracks to the Resources Library of a Hype document
Move the <video> element into an empty Rectangle by editing its Inner HTML
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!)
Add your labeling elements and assign them Unique Element IDs in the Identity Inspector
Add an On Scene Load handler to run javascript
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:
Fantastic Jonathan, much appreciated.