Skip to main content

Uploading Subtitles to your Interactive Video 💬

Make your videos accessible and engaging with subtitles and captions!

Not only do they help with viewers who are hard of hearing, but they extend audience reach by allowing people to watch your video content without sound (think of all the times you may have left your headphones at home while commuting or at work!).

The final big benefit of using subtitles / closed captions in your experiences is that they can increase your video watch time.  A study by PLYmedia found that captioned videos received 40% more views than uncaptioned videos. They also found that viewers were 80% more likely to watch a video to completion when closed captions were available.

Add subtitles in just 3 simple steps

FAQs about using subtitles and closed captions

What file types are supported?

Currently, Stornaway supports .VTT files for subtitles and closed captions.

This Adobe help page nicely summarises what a WebVTT file is for – “A WebVTT cue allows you to specify text for a particular part of a media file, for example, a subtitle, and the timestamp range of the media file that the text in question applies to” – this makes them perfect for use in your projects.

 

Where can I get .vtt subtitle files?

Here at Stornaway, one of our favourite tools for subtitle auto-generation (and auto-translate) is Veed.io – a web-based video editor.

Whilst we haven’t used these ourselves, other websites like OpenSubtitles.org and Subscene.com state that they offer a wide range of subtitles in different formats, including .vtt.

There are also a few open-source subtitle editing software tools that allow you to extract subtitles from videos in .vtt format. These include  Aegisub and Subtitle Edit.

How do I upload subtitles for multiple languages?

In your project sidebar, you can add and select any language that you have a .vtt file. There is no limit to the number of languages you can choose!

Then when your island is saved, you can play test using the ‘Play’ button and select which language you want to view using the ‘CC’ button. The best part is that once a viewer has selected their chosen language, that remains consistent throughout the rest of their journey (given they have been uploaded on other islands).

How can I adjust the styles and positions of my captions?

Colour

Using the <c.[colour]> tag, you can control the text and background colour of your subtitles. For example:

02:00.000 --> 02:05.000

<c.yellow>This is yellow text</c>




02:00.000 --> 02:05.000

<bg.blue>This text has a blue background</c>




02:00.000 --> 02:05.000

<c.yellow.bg_blue>This is yellow text on a blue background</c>

 

The following colours are supported in vtt files:

  • White
  • Lime
  • Cyan
  • Red
  • Yellow
  • Magenta
  • Blue
  • Black

Position & size

It can be particularly useful in interactive experiences to control the position of subtitles – specifically so they do not obstruct choice that are displayed onscreen. Here are some handy tips to control sizing and positions:

00:00:01.000 --> 00:00:05.000

This text will appear at the bottom by default.




00:00:06.000 --> 00:00:10.000 line:10%

This text will appear at the top.




00:00:11.000 --> 00:00:15.000 line:10% align:left

This text is at the top, aligned to the left.




00:00:16.000 --> 00:00:20.000 line:90% align:right

This text is at the bottom, aligned to the right.

 

Sizing can also be changed using percentages from within the vtt files:

00:00:00.000 --> 00:00:04.000 position:10%,line-left align:left size:35%

Where did he go?




00:00:04.000 --> 00:00:06.500 position:45%,line-right align:center size:25%

What are you waiting for?

How do viewers select the language they need?

The Stornaway player controls feature an instantly recognisable ‘CC’ icon that, when selected, allows viewers to select from their desired language which you have uploaded to that particular island.

Languages are respected across the interactive journey, ensuring viewers do not need to re-select their chosen language when navigating on their chosen paths.

Why should I add subtitles or closed captions?

Accessibility: Approximately 5% of the world’s population has some form of hearing loss. Make sure that anyone who wants to see and learn from your video can.

Personal preferences: Recent studies show that 69% of people prefer watching without sound in public – with 25% also preferring videos without sound in private.

Understanding: We all learn in different ways. Seeing things written down is useful for many and can add clarity if voices or subject matters are difficult to understand.

Different languages: Hola! Bonjour! Take your video to audiences around the world! Don’t let a different language stop your viewers from hearing what you are saying.