Tracks

Introduction

Tracks are File Objects with a kind of subtitles, chapters, or thumbnails.

They are used to provide additional information about your media, and to enable features that your users have come to expect from top-tier players.

{
  "id": "file_ijklmnop1234",
  "object": "track",
  "kind": "subtitles",
  "type": "text/vtt",
  // ... other props
  "url": "https://your-project.ittybit.net/bunny/subtitles.vtt",
  "ref": "subtitles",
}

Media objects can contain one or more Tracks.

{
  "id": "med_abcdefgh1234",
  "object": "media",
  "kind": "video",
  "files": [
    // ... other files
    {
      "id": "file_ijklmnop1234",
      "object": "track",
      "kind": "subtitles",
      "type": "text/vtt",
      "url": "https://your-project.ittybit.net/bunny/subtitles.vtt",
      "ref": "subtitles",
    },
    {
      "id": "file_ijklmnop5678",
      "object": "track",
      "kind": "chapters",
      "type": "text/vtt",
      "url": "https://your-project.ittybit.net/bunny/chapters.vtt",
      "ref": "chapters",
    },
    {
      "id": "file_ijklmnop9012",
      "object": "track",
      "kind": "thumbnails",
      "type": "text/vtt",
      "url": "https://your-project.ittybit.net/bunny/thumbnails.vtt",
      "ref": "thumbnails",
    }
  ],
  // ... other props
}

Usage

Tracks are placed inside a <video>¹ tag or passed to your Player.

<video src="https://your-project.ittybit.net/bunny/video.mp4">
  <track kind="subtitles" src="https://your-project.ittybit.net/bunny/subtitles.vtt" srclang="en" default>
  <track kind="chapters" src="https://your-project.ittybit.net/bunny/chapters.vtt">
  <track kind="metadata" src="https://your-project.ittybit.net/bunny/thumbnails.vtt">
</video>

Kinds

Tracks can be one of the following kinds:

• subtitles
• chapters
• thumbnails

Subtitles

Subtitles are essential for accessibility and they enable viewers to watch video and audio media without sound.

They are available in text/vtt and text/srt formats.

WEBVTT

1
00:00:00.000 --> 00:00:01.234
Hello, world!

2
00:00:01.234 --> 00:00:02.456
This is an example of

3
00:00:03.456 --> 00:00:05.678
a VTT formatted subtitle file.

See the Subtitle Tasks section for more information about creating new subtitle tracks.

Chapters

Chapters are used to display logical chapter markers for video and audio media.

They are available in text/vtt format.

WEBVTT

1
00:00:00.000 --> 00:00:12.345
An intro to chapters

2
00:00:12.345 --> 00:00:23.456
A chapter about chapters

3
00:00:23.456 --> 00:00:34.567
Another chapter

See the Chapter Tasks section for more information about creating new chapter tracks.

Thumbnails

A thumbnail track is used to provide preview images as your viewer hovers over the video player progress bar.²

Behind-the-scenes, ittybit will generate a sprite sheet containing all the frames in a grid.

The track then tells the player which section of the sprite sheet to display at any given time.

This approach is more efficient than providing a separate image for each frame because it reduces the number of HTTP requests, and the sprite sheet can be cached by the browser reducing or eliminating latency for subsequent frames.

Thumbnail tracks are available in text/vtt format.

WEBVTT

1
00:00:00.000 --> 00:00:02.345
https://your-project.ittybit.net/bunny/sprite.png#xywh=0,0,160,90

2
00:00:02.345 --> 00:00:04.567
https://your-project.ittybit.net/bunny/sprite.png#xywh=160,0,160,90

3
00:00:04.567 --> 00:00:06.789
https://your-project.ittybit.net/bunny/sprite.png#xywh=320,0,160,90

See the Thumbnail Tasks section for more information about creating new thumbnail tracks.