BLOG / 디지털 마케팅

How To: Chapterize Your Videos Using WebVTT Files

디지털 마케팅 1/7/2016

Adding chapters to videos, especially long form videos, can have a dramatic effect on the stickiness of your video. This works well in many use cases, such as training or annual report videos, allowing a viewer to quickly jump to a specific area of interest. Brightcove uses WebVTT files for closed captions, but they’re also easily used for chaptering. Never heard of a WebVTT file? Don’t worry, it’s basically a text file. No coding skills are needed.

Creating your tt file

The first thing you need to do is create the WebVTT File. Here’s what the content of of a WebVTT file will look like:

WEBVTT

00:00:00.000 --> 00:00:30.000
Lionfish

00:00:30.000 --> 00:00:54.000
Anemone

00:00:54.000 --> 00:01:25.000
Clownfish

00:01:25.000 --> 00:01:54.000
Sea Horse

00:01:54.000 --> 00:02:23.000
Crab

00:02:23.000 --> 00:02:35.000
Dolphins

Copy and paste the content of this file into a new text editor on your computer. (TextEdit on Mac or Notepad on PC for example). Note: Make sure the text file is plain-text not rich-text format.

  1. Update the chapter names and the start and end timecode for each chapter.
  2. Save the updated file and change the extension to .vtt. (ex: filename.vtt)

Uploading your vtt file

Next you want to upload this file to the associated video in VideoCloud. You can find this option in the “Text Tracks” section of the video details panel. This is essentially the same process as adding captions to your video, but choosing “Chapters” from the drop down. Visit our support page to learn how to add captions to videos in VideoCloud. Note: There may be a few minutes of processing time before your captions appear.

That’s it! You have just chapterized your video. You should now see a small speech bubble in the bottom left corner of your video (next to the volume control). Click on it and you’ll see your chapters. Now watch as users easily navigate through your long-form videos and your engagement scores soar.

For more information on on how to create a WebVTT file, visit our support page.