Video Element – Caption Files (WebVTT)

Introduction

Because of WCAG 2.0 AA / 508 compliance / accessibility requirements, or just being a nice web designer / developer, every video should have Closed Captions.

52 PM

…but Hype doesn’t have the option to add captions. That renders the video Element in Hype essentially useless to me and perhaps others. To fix this problem, the video has to be added separately as HTML, just so the WebVTT caption file can be added. That seems silly.


Recommendation

Therefore, since Tumult does seem to be concerned about accessibility, the Video Element should have a field to specify WebVTT files. Yes, multiple files, as the language can be specified.


Technical Specifications

Here’s what a typical “track” tag looks like, when adding captions to a web video…

<track src="${resourcesFolderName}/video-name.vtt" kind="captions" srclang="en" label="English" default="default">


Ulterior Motive

Currently, I’m working on an app called “Intensifies”, which is for greater control and precision in creating WebVTT caption / subtitle files. (I thought I posted a thread about this before, but I couldn’t find it.) Obviously, if Hype makes it easy to add captions files, there would be a greater demand for caption making software.


More Info…

https://www.w3schools.com/tags/tag_track.asp – The HTML used to add caption tracks
https://caniuse.com/#search=vtt – Browser support for WebVTT is phenomenal
https://www.w3.org/TR/webvtt1/ – The specifications for WebVTT


How interested are you in web captions?!

  • NOT AT ALL – I never use captions :rage:
  • I’M CURIOUS – I’d like to add captions, but I don’t know how. :man_shrugging:t2:
  • HYPE NEEDS THIS – I use captions and Hype should support this! :grin:
  • I LOVE CAPTIONS – Hype should do this and I like Intensifies :heart_eyes:

0 voters

1 Like

As of last January, this is an important issue in the US. If you are producing educational videos, you can get sued if you don’t include captioning. Of course, it is a good thing to do anyway.

However, this is a feature already included in modern video production software. In fact, many programs have even automated this process (e.g. Camtasia) and therefore IMHO, it isn’t necessary for Hype.

How's it not necessary for Hype?

If I have a caption file, in WebVTT format, how would I add that to Hype by using the video element? It's not possible.

Also fyi

Not played with this for a while...

Thanks for the feedback, I’ve added this on our tracker.

I too concur with Drew Bullens comments about 508 Compliance issues on US Gov projects. In fact, in the late 1990’s I worked with the W3C that created the accessibility standards used today in Enterprise level government operations. Today I am a freelance UX/UI/ Animator for hire specializing in US Govt. enterprise level operations/UX/UI Design and I love HYPE and its superior support team, forums that actually shares solutions in real time, and a commitment to listen and improve the tools performance and quality.

I am a true believer in the future of this potentially game changing tool in the industry. However I must say this…

The number one reason that HYPE is not widely used on US Government websites is that it is “perceived” to be not 508 compliant since the tools needed to make the tool “100 % compliant capable” are not included in the application. I know this because on every project I do, I recommend adding HYPE to the mix. The answer is not no, but hell no. Well, almost always.

Simple as that.

Using third party tools to bridge the gap in compliance issues is almost always a non-starter since all applications used on government projects have to be authorized and on that organizations “APPROVED LIST”. Every agency in the US Government has their own standards, although they are getting closer to a more rational application use policy.

I am going through this now on a government project that I am using HYPE on. They absolutely love the concepts and animationsI have presented, they see it as the potential gamebreaking go-to tool for training and storytelling, but this is the sticking point. No internal 508 accessibility tools - no chance of widespread use.

That is the Billion dollar question that Tumult must address. Does TUMULT add the accessibility features and become a bigly huge player in US Govt. application development process? Organizations that literally spend BILLIONS of dollars every year that are crying out for an efficient tool like HYPE?

Does Tumult grab the brass ring and add 508 compliance and acceptance tools to go along with its ease of use, animation, ebookin’, wireframming kick ass features? Or go home and wonder why the tool did not take off going up against Adobe, when the US Government is literally screaming for solutions that can fill this void and save them money?

Thanks for reading as always,
LT

Thanks for your thoughts and enthusiasm on accessibility/508 compliance!

For folks on the forums visiting this topic and more curious, I’ll point out that there’s a list we’ve compiled to help folks with 508 compliance. This is of course no substitute to more direct tool offerings that you are requesting.

(also do note we have far outlived Adobe’s direct competitor to Hype :wink: )

2 Likes

Jonathan,

Thanks for the quick reply on the topic. It was that list to help with 508 compliance fixes that directed me to comment originally. I mean it is greatly appreciated to use Hypes easy to use alt-tag, aria code, et al. and the other descriptor elements to get to 508 compliance, all of which make Hype so awesome.

However, let me repeat the issue at hand here.

The US Government - specifically leadership in DoD, GSA, Treasury, State Dept. perceives (you know, like fake news!) that Hype cannot be considered "508 compliant capable" any more than it can be considered a top animation application since it has to rely on third party apps and work arounds to match the leaders in the field. (I know this firsthand since I have been pitching HYPE to deciders on the highest levels, whether misinformed or not, this is their standard push back and I am pretty damn sure they get all this info from Adobe. lol).

I would really like to be a fly on the wall when Tumult IT tells upper management that it is not worth the effort to become truly animation friendly and satisfy US Govt. 508 compliance issues because we did not know or chose to ignore that;

  • Adding visual wave forms to audio tracks would help animators match mouth movements or that actual sounds could be heard in the actual tool rather than a browser. As a former Disney animator I can tell you that this one issue puts Hype in the also rans for animators weapon of choice. I know because I ask my tech savvy young animation friends this question all the time, although when prodded, they say that Hype could be "the worlds greatest storyboard/e-commerce ad tool tool if only it did those things."

  • Adding real closed captioning features along with JSON use or specific javascript (I know, I know - workaround) to allow for data gathering - see US Government Training Q&A built in the tool itself would get you over the hump. Let me put this in perspective, every US Government agency must provide online training for their employees, this alone is a Billion dollar a year business, and the go to tool for this is, wait for it... Adobe Captivate - the worlds second worst app (powerpoint stands alone for awful) is the tool of choice for almost all of US Government training. (ouch!).

You want to put an epic beat down for the ages on Adobe and make your investors think you are awesome o'clock every time you walk in a room? Take a look at Captivates tool set and challenge your IT team to match that crapola and attack it like a Pirate movie.

I you did that, I would be proud to visit you and your team, and raise a glass (or two) to your success...
on your own private island.

Again thanks for responding, I feel so much better now.

Eltee,

p.s. I will be posting a bit of the project I am working on as I will be "axing for help" very soon!

1 Like

Hi Larry!

I also have been wishing (for a couple years now) for an improved audio track feature set in the Hype interface, In the meantime one work around...

Here is a screen capture of a visual waveform in the Hype interface:

1) Import sound into an editor that can show a waveform (here I used Garageband).
2) Screen capture the track. Save as .mp4 or .mov
3) Drag into Hype - done!

Note: Since this track is for guidance - not publication - ".mov" works fine.


I would think the visual wave form "issue" would be secondary to the lip syncing itself. Hype has no mechanism for auto or assisted lip syncing. I am not a character animator but it would seem to be far better to have the lip syncing done in some other app that has this capability and then import the result into Hype.

1 Like

I’m a bit confused by the conversation here. First, it seems to have gone off-topic... or expanded. I’m only raising a single accessibility issue here. It’s a really “simple” fix too. (It never really is easy though, is it?) Hype just needs to add track support for WebVTT files. I don’t mind the larger discussion of accessibility, but I don’t want attention lost for the WebVTT support.

Second, accessibility support is important to me, but I’m not sure what’s the problem here. Is it with the code that Hype outputs or is it with the app itself?

Is it both? It sounds like both. :smile:

If I’m understanding the suggestion correctly, the suggestion is that the captioning be done in Hype itself. Is that why I’m not being mentioned directly in this conversation, as that would be bad news for my app idea? Ha ha, I don’t care. I’m just as happy to sell books to the government, instead of apps.

I still think it’s important to be able to manually select a WebVTT file though, regardless if I was working on Intensifies or not. Currently, I’m not. :crazy_face:

But wow, I didn’t think a small change to software would yield a private island. Ha ha. Maybe I should get back to work on Intensifies.

1 Like

This is the part I’m not understanding. In regards to displaying captions, what can’t be done in Hype exactly?

If I’m making the animation in Hype, I can control when text is displayed or when sounds are played.


And thinking along the same lines of what can’t be done in Hype, apparently there’s a temporary solution to the WebVTT problem...

https://iandevlin.com/blog/2015/02/javascript/dynamically-adding-text-tracks-to-html5-video/

I was thinking there was a way to dynamically add a track to an HTML video. It looks like I needed to rest up to find the right search term. Ha ha. That’s theoretical though, as I’m using an iPad right now.


Update - Ha ha, it’s important to read the whole article...

So while there is a way, it does seem odd that the Text Track API doesn’t have a native method for removing text tracks, nor does it have a way to dynamically load a WebVTT file.

So, it seems if I need to add WebVTT to a project, I’m still better off manually creating the Video HTML than trying to inject a track to the Hype Video element.

Jim,

First off, thanks for the tip, much appreciated - I have been using it to match mouth movements and it works fine, but it is a workaround and therefore a non-starter when attempting to get Hype on the Government Schedule, which is what I am talking about in the first place.

Secondly, in response to your quote above:
"Then what's the point of using Hype, when I can do this all in Adobe Creative Suite in the first place?"

As an aside, did you know html code was originally a last minute work around by its creators as they forgot to add a means of c-c-communication between the UCLA and Stanford labs? That workaround only took decades to become standardized-ish today. So I get it. Developers have the workaround bug in their DNA, and it is a good thing too, because it inspires innovation - and endless Photic book plugs - and that leads to application improvements.

Secondly I agree with you, you don't think like a character animator. In a nutshell character animation production starts with a script - then voiceovers - then production. I put the matching of character movements with sound right up there with oxygen in the animation process. That is why Hype is perceived by animators as "meh".

Which is a shame because it is so damn close to being a world beater for the price.

Thanks for responding it is very helpful and one of the many reasons I enjoy the forums.

Eltee

I'm bumping this back to the top because I saw video captions mentioned on the forum recently, but that thread seems to have disappeared.

The issue in this thread is about being able to add a WebVTT file to a video imported in Hype. That should be really easy to do. Heh, but since this thread is over five years old, apparently not. :smile:

The workaround is to add the video manually with HTML and then add the track tag too.

More info here… https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API#styling_webvtt_cues

Checking in on any accessibility upgrades for Hype as the last conversations were several years ago and it doesn't appear to have been addressed? Is there an "add-in" embeddable video player that may support VTT or SRT that can be turned on and off during playback?

Thanks!

1 Like

@heyjoe

That looks like the comment I was trying to find. :slightly_smiling_face:

With basic HTML, you can manually add your own WebVTT caption file.

Ideally, this would be managed by Hype, where you could just associate a VTT file (or multiple VTT files) to a Hype video element.

1 Like