Video Cue / Caption Generator

Elements Audio & Video
1

Hi,

I recently have been playing with .vtt files used to add caption overlays on to videos.

I will be posting a basic how to soon in regards to using them with Hype. But in a conversation I was having with @Photics about an issue with them, he mentioned that it would be really good to have a Caption Generator made in Hype.

I thought this was a good idea and so have made one.

The idea is that you load your video into the scene using a choose file input. The play your video and move the play head to the points you want to start and end a caption.

When at one of the points you set the time by clicking the Set Cue Start or Set Cue End* and the time is recorded for you.

You then enter the caption text for the cue and then add the cue to the list of cues.
When you are done, you click the finish button and a sheet will slide down with the .vtt formatted text.

Just copy this text into your .vtt file and then do what you would normally do to add the .vtt file to you videos.

You can check the VideoCue Generator out here…

VideoCues Generator

There are still things I need to do with it so I won’t post the project just yet.

Screen Shot 2016-02-16 at 19.43.36.JPG2070×1688 279 KB

Screen Shot 2016-02-15 at 20.42.11.JPG2006×1582 105 KB

The videos you load stay local to you, there is no server side operations or upload. All Local to your browser and machine.

Tested in Safari and Chrome. I prefer Safari though.

Note:

I was originally going to get the .vtt to also be able to save to disk. But that is only possible with Chrome, which I have working but not with Safari. So I have left it out.

I know I can probably do it using server side to create and download the file but I did not want to rely on server side operations.

Use mp4 files…

Let me know what you think…

6 Likes
2

Version 4.1

Use the Link above to check it out

  • Once cues are added to the list you can Live Preview them in the
    current video. (Working only in Safari at the mo )

(note: A cue is editable when it is in the Cues list so you can adjust at any time. )

  • The cues are now added as last entry at the top, first entry at the
    bottom

  • The cues list now scrolls. Rather than the whole scene layout.

3

Hmm.

@Daniel
Just noticed the closed captioning is not working in my Chrome.
I can get it to work in Safari no problem. ( via hype )
But not with Chrome.

I have manage to get it working in Chrome with a normal html file ( not hype), I had to click the CC button a few times before it did work !.

But nothing I do via Hype works, any ideas ?

4

It does work well in Safari when I select the 'English' option for CC. I do see this error in Chrome: Error in writeWEBVTT: TypeError: Cannot read property 'textTracks' of undefined. What do you mean by:

I"m not sure how this all fits together.

5

If you are doing that from my link. I do nt get that. !! Where did you see that..?
Fixed that, that was just me being a dumb arse. I change a global var name by accident.

I do get "Resource interpreted as TextTrack but transferred with MIME type text/plain"

What I mean is if I construct a webpage by just writing the html in the old fashioned way :grinning: and include a video which references a .vtt file. It works.

But the same file and same code for the video put into a Hype doc does not work.

Incidentally the file I reference is only there because there has to be a src listed within the track tag. I actually remove it use JS to do all the cues and then re add the track.

6

I have not managed to solve the Chrome issue with Closed Captions not playing in a video in Hype!

So have had to disable live preview for Chrome.
It all works ok in Safari.

Version 4.1.3 now also has jump points. The little blue buttons allow you to jump to time in the video corresponding to a start or end time in the cue list.