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.

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.

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).

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?

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.

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.