Basic VTT File Example
This is a simple VTT file that demonstrates the basic structure and formatting. Perfect for beginners learning the WebVTT format.
WEBVTT 00:00:00.000 --> 00:00:05.000 Welcome to our video tutorial! 00:00:06.000 --> 00:00:10.000 This is a basic subtitle example. 00:00:11.000 --> 00:00:15.000 Each subtitle appears for 4-5 seconds. 00:00:16.000 --> 00:00:20.000 Perfect for most video content. 00:00:22.000 --> 00:00:26.000 Thanks for watching!
Key Features:
- • Starts with mandatory "WEBVTT" header
- • Simple timestamp format (HH:MM:SS.mmm)
- • Clear, readable subtitle text
- • Proper spacing between cues
- • Appropriate duration for each subtitle
Advanced Features Sample
This example showcases advanced VTT features including positioning, alignment, and text formatting options.
WEBVTT - Advanced Features Demo NOTE This file demonstrates advanced WebVTT features 00:00:05.000 --> 00:00:10.000 align:center <b>Bold title</b> appearing in the center 00:00:12.000 --> 00:00:17.000 position:80% line:20% Top-right positioned subtitle 00:00:20.000 --> 00:00:25.000 align:left size:50% This is a <i>left-aligned</i> subtitle taking up only half the screen width 00:00:28.000 --> 00:00:33.000 Regular subtitle with <u>underlined</u> text and <b><i>bold italic</i></b> combination 00:00:35.000 --> 00:00:40.000 align:center <c.highlight>Custom styled text</c> using CSS classes
align: left, center, right
position: 0-100% (horizontal)
line: vertical positioning
size: 0-100% (width)
<b> Bold text
<i> Italic text
<u> Underlined text
<c.class> Custom CSS styling
Multi-Speaker Example
This sample demonstrates how to handle multiple speakers in a conversation, making it easy to identify who is speaking.
WEBVTT - Interview with Dr. Smith 00:00:05.000 --> 00:00:10.000 <v Host>Welcome to Tech Talk. I'm your host, Sarah. 00:00:11.000 --> 00:00:15.000 <v Host>Today we're speaking with Dr. Smith about AI. 00:00:16.000 --> 00:00:20.000 <v Dr. Smith>Thank you for having me, Sarah. 00:00:21.000 --> 00:00:26.000 <v Host>Let's start with the basics. What is AI? 00:00:27.000 --> 00:00:35.000 <v Dr. Smith>Artificial Intelligence is the simulation of human intelligence in machines. 00:00:36.000 --> 00:00:42.000 <v Dr. Smith>These machines are programmed to think and learn like humans. 00:00:43.000 --> 00:00:48.000 <v Host>That's fascinating! Can you give us an example from everyday life? 00:00:49.000 --> 00:00:55.000 <v Dr. Smith>Certainly! Voice assistants like Siri and Alexa are great examples.
Speaker Identification Benefits:
- • Clearly identifies who is speaking
- • Improves accessibility for hearing-impaired viewers
- • Essential for interviews, podcasts, and dialogues
- • Can be styled differently for each speaker
Styled Subtitles Sample
This example shows how to create visually appealing subtitles with colors, effects, and custom styling for different content types.
WEBVTT - Styled Subtitles Demo
STYLE
::cue(.narrator) { color: white; background: rgba(0,0,0,0.8); }
::cue(.character1) { color: #00ff00; }
::cue(.character2) { color: #ff6600; }
::cue(.emphasis) { color: red; font-weight: bold; }
00:00:05.000 --> 00:00:10.000
<c.narrator>In a world where subtitles tell the story...</c>
00:00:12.000 --> 00:00:17.000
<v Character 1><c.character1>I think we should escape!</c>
00:00:18.000 --> 00:00:22.000
<v Character 2><c.character2>Are you crazy? It's too dangerous!</c>
00:00:24.000 --> 00:00:28.000
<c.emphasis>EXPLOSION SOUND EFFECT</c>
00:00:30.000 --> 00:00:35.000 align:center
<b><i>THE END</i></b>
00:00:37.000 --> 00:00:42.000
<c.narrator>Subscribe for more adventures...</c>Styling Features:
- • Custom CSS styles in STYLE block
- • Color-coded speakers and narration
- • Special formatting for sound effects
- • Emphasis styling for important text
- • Background colors for better readability
Educational Content Example
Perfect for educational videos, this sample includes chapter markers, definitions, and structured learning content.
WEBVTT - Physics: Newton's Laws NOTE Chapter 1: Introduction 00:00:05.000 --> 00:00:10.000 <v Professor>Today we'll learn about Newton's Three Laws. 00:00:12.000 --> 00:00:18.000 <b>First Law: Law of Inertia</b> An object at rest stays at rest. 00:00:20.000 --> 00:00:25.000 Unless acted upon by an external force. NOTE Chapter 2: Second Law 00:00:30.000 --> 00:00:35.000 <b>Second Law: F = ma</b> Force equals mass times acceleration. 00:00:37.000 --> 00:00:42.000 <i>Remember: F = ma</i> This is fundamental to mechanics. NOTE Chapter 3: Third Law 00:00:45.000 --> 00:00:50.000 <b>Third Law: Action and Reaction</b> For every action, there's an equal and opposite reaction. 00:00:52.000 --> 00:00:57.000 <v Professor>These laws form the foundation of classical mechanics. 00:01:00.000 --> 00:01:05.000 <u>Key Takeaway:</u> Understanding these laws helps us predict motion.
Accessibility Features Sample
This example demonstrates how to make your VTT files fully accessible, including sound descriptions and audio cues.
WEBVTT - Accessible Documentary 00:00:05.000 --> 00:00:10.000 <v Narrator>Welcome to Nature's Wonders. 00:00:12.000 --> 00:00:17.000 [Peaceful forest sounds and birds chirping] 00:00:18.000 --> 00:00:23.000 <v Narrator>We begin our journey in the Amazon rainforest. 00:00:25.000 --> 00:00:30.000 [Sound of rustling leaves and distant monkey calls] 00:00:32.000 --> 00:00:37.000 <v Narrator>The canopy towers 150 feet above us. 00:00:39.000 --> 00:00:44.000 [Sudden loud bird cry] <v Narrator>That's a toucan calling to its mate. 00:00:46.000 --> 00:00:51.000 ♪ [Traditional indigenous flute music begins] ♪ 00:00:53.000 --> 00:00:58.000 <v Local Guide>This tree is over 500 years old. 00:01:00.000 --> 00:01:05.000 [Music fades out] <v Narrator>Our guide speaks from generations of forest knowledge. 00:01:07.000 --> 00:01:12.000 [Thunder rumbling in the distance] <v Narrator>The afternoon rain approaches.
Accessibility Elements:
- • Sound effects described in [brackets]
- • Music indicated with ♪ symbols
- • Speaker identification for clarity
- • Environmental audio descriptions
- • Non-speech audio clearly marked
Ready-to-Use Templates
Download these templates and customize them for your specific needs. Each template is designed for different types of content.
- • Clean, readable format
- • Standard timing intervals
- • No special formatting
- • Works with all players
- • Speaker identification
- • Question/answer structure
- • Professional formatting
- • Clear speaker transitions
- • Chapter markers
- • Emphasis styling
- • Key term highlighting
- • Note sections
- • Sound descriptions
- • Music notations
- • Speaker identification
- • WCAG compliant
How to Use These Samples
1. Choose the Right Sample
Select the example that best matches your content type: basic for simple videos, multi-speaker for interviews, or accessible for compliance requirements.
2. Customize the Content
Replace the sample text with your actual subtitle content. Adjust timestamps to match your video's timing and dialogue.
3. Test Your VTT File
Always test your VTT file with your video using VLC Media Player or a web browser to ensure proper synchronization and display.
4. Validate and Optimize
Use online VTT validators to check for syntax errors and optimize timing for the best viewer experience.