Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
The <track> element adds text tracks to videos. It supports subtitles, captions, descriptions, and more in WebVTT format for better accessibility.
Translation of dialogue. Shown at bottom of video.
Dialogue + sound effects. For accessibility.
Scene descriptions for visually impaired.
Clickable navigation points in video.
Working examples with English, Spanish, and French subtitles
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video with Captions & Subtitles</title>
</head>
<body>
<h2>🎬 Video with Captions & Subtitles</h2>
<div class="video-section">
<h3>1. Video with Subtitles</h3>
<video width="500" height="300" controls class="video-player" poster="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&fm=jpg">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A00%3A00%3A00.000%20--%3E%2000%3A00%3A02.000%0AWelcome%20to%20our%20video!%0A%0A00%3A00%3A02.000%20--%3E%2000%3A00%3A04.500%0AThis%20is%20the%20first%20subtitle.%0A%0A00%3A00%3A04.500%20--%3E%2000%3A00%3A07.000%0AEach%20subtitle%20has%20a%20time%20code." srclang="en" label="English">
Your browser does not support the video tag.
</video>
<p class="info">📝 Click CC button to toggle subtitles</p>
</div>
<div class="video-section">
<h3>2. Video with Captions (Accessibility)</h3>
<video width="500" height="300" controls class="video-player" poster="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&fm=jpg">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4" type="video/mp4">
<track kind="captions" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A00%3A00%3A00.000%20--%3E%2000%3A00%3A02.000%0A%5BNarrator%5D%20Welcome%20to%20the%20demo%20video.%0A%0A00%3A00%3A02.000%20--%3E%2000%3A00%3A04.500%0ACaptions%20describe%20every%20sound%20and%20dialogue.%0A%0A00%3A00%3A04.500%20--%3E%2000%3A00%3A07.000%0AReady%20for%20accessible%20storytelling." srclang="en" label="English Captions">
Your browser does not support the video tag.
</video>
<p class="info">♿ Includes dialogue + sound descriptions</p>
</div>
<div class="video-section">
<h3>3. Multiple Language Support</h3>
<video width="500" height="300" controls class="video-player" poster="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=800&fm=jpg">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4" type="video/mp4">
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A00%3A00%3A00.000%20--%3E%2000%3A00%3A02.000%0AWelcome%20to%20our%20video!%0A%0A00%3A00%3A02.000%20--%3E%2000%3A00%3A04.500%0AThis%20is%20the%20first%20subtitle.%0A%0A00%3A00%3A04.500%20--%3E%2000%3A00%3A07.000%0AEach%20subtitle%20has%20a%20time%20code." srclang="en" label="English">
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A00%3A00%3A00.000%20--%3E%2000%3A00%3A02.000%0ABienvenidos%20al%20video.%0A%0A00%3A00%3A02.000%20--%3E%2000%3A00%3A04.500%0AExplora%20subt%C3%ADtulos%20en%20espa%C3%B1ol.%0A%0A00%3A00%3A04.500%20--%3E%2000%3A00%3A07.000%0ACada%20l%C3%ADnea%20tiene%20un%20c%C3%B3digo%20de%20tiempo." srclang="es" label="Español">
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A00%3A00%3A00.000%20--%3E%2000%3A00%3A02.000%0ABienvenue%20dans%20la%20vid%C3%A9o.%0A%0A00%3A00%3A02.000%20--%3E%2000%3A00%3A04.500%0AChoisissez%20les%20sous-titres%20en%20fran%C3%A7ais.%0A%0A00%3A00%3A04.500%20--%3E%2000%3A00%3A07.000%0AChaque%20sous-titre%20indique%20les%20temps." srclang="fr" label="Français">
Your browser does not support the video tag.
</video>
<p class="info">🌐 Select language from captions menu</p>
</div>
<div class="video-section">
<h3>4. Descriptions for Visually Impaired</h3>
<video width="500" height="300" controls class="video-player" poster="https://picsum.photos/seed/nature/800/600.jpg">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4" type="video/mp4">
<track kind="captions" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A00%3A00%3A00.000%20--%3E%2000%3A00%3A02.000%0A%5BNarrator%5D%20Welcome%20to%20the%20demo%20video.%0A%0A00%3A00%3A02.000%20--%3E%2000%3A00%3A04.500%0ACaptions%20describe%20every%20sound%20and%20dialogue.%0A%0A00%3A00%3A04.500%20--%3E%2000%3A00%3A07.000%0AReady%20for%20accessible%20storytelling." srclang="en" label="Captions">
<track kind="descriptions" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A00%3A00%3A00.000%20--%3E%2000%3A00%3A02.000%0AThe%20camera%20pans%20over%20a%20bright%20meadow.%0A%0A00%3A00%3A02.000%20--%3E%2000%3A00%3A04.500%0AGentle%20breeze%20rustles%20through%20tall%20grass.%0A%0A00%3A00%3A04.500%20--%3E%2000%3A00%3A07.000%0ASoft%20chimes%20signal%20the%20end%20of%20the%20intro." srclang="en" label="English Descriptions">
Your browser does not support the video tag.
</video>
<p class="info">👁️ Detailed descriptions of video content</p>
</div>
<div class="vtt-example">
<h3>5. Example VTT File Format</h3>
<pre class="code-block">WEBVTT
00:00:00.000 --> 00:00:02.000
Welcome to our video!
00:00:02.000 --> 00:00:04.500
This is the first subtitle
00:00:04.500 --> 00:00:07.000
Each subtitle has a time code</pre>
</div>
</body>
</html>Loading preview...