Scribd
Upload
9 views

How To Add HTML Video Subtitles and Captions

Uploaded by

nikki sanchez
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

How To Add HTML Video Subtitles and Captions

Uploaded by

nikki sanchez
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

11/22/24, 3:51 PM How to Add HTML Video Subtitles and Captions

HOW TO ADD HTML VIDEO


SUBTITLES AND CAPTIONS

To add video subtitles in HTML,

upload a WebVTT caption file to

the same folder of your website

that the video is stored in. Add a

track element referencing the

appropriate WebVTT file to the

video’s HTML code, and your

video will now display a CC

symbol among the controls.

HTML video subtitles make your

content accessible to everyone

by using a standardized

captioning format that works on

all desktop devices and

browsers.

Here’s an example of HTML video


https://www.3playmedia.com/learn/how-to-guides/html5-video-captioning/ 1/6
11/22/24, 3:51 PM How to Add HTML Video Subtitles and Captions
Here s an example of HTML video

code with a track tag for closed

captions and French subtitles:

<video width="320" height="240">


<source type="video/mp4" src="/my_
<track src="/captions_file.vtt" la
<track src="/French_captions_file.

What caption format does HTML


require?
WebVTT captions are now the preferred format for HTML5 video due to

parameters which allow for adjustments to the line position, text

position, styling, and alignment.

https://www.3playmedia.com/learn/how-to-guides/html5-video-captioning/ 2/6
11/22/24, 3:51 PM How to Add HTML Video Subtitles and Captions

How HTML Video Subtitles Work


HTML5 natively supports video without the need for third-party plugins,

which is a major step forward in standardizing accessible video across

the internet.

In older versions of HTML, there was no standard for rendering a video

on a web page. Almost all videos were shown through plugins, which

created compatibility conflicts across different browsers and devices –

making it practically impossible to publish video that worked

universally.

How to use the HTML track element?


The track element can be used to add timed-text data enhancements

like subtitles, closed captions, audio description, and chapter markers

to your video. Note that multiple track elements can be used

simultaneously.

The attributes of the track element are:

src = specifies the URL location of the caption file


label = specifies the title of the track
kind = specifies the type of time-aligned text. Options include
captions, subtitles, chapters, descriptions, or metadata.
srclang = specifies the language
default = specifies that this track is enabled by default.

More questions on
HTML?
https://www.3playmedia.com/learn/how-to-guides/html5-video-captioning/ 3/6
HTML?
11/22/24, 3:51 PM How to Add HTML Video Subtitles and Captions

We’ve got you covered.

Watch our conversation with an

expert from the World Wide Web

Consortium and member of the

HTML5 Accessibility Task Force.

RELATED RESOURCES:
1:08:55

Video.js Captions & Subtitles

https://www.3playmedia.com/learn/how-to-guides/html5-video-captioning/ 4/6
11/22/24, 3:51 PM How to Add HTML Video Subtitles and Captions

Ultimate Guide to Closed Captioning

About 3Play Media


3Play Media provides closed
captioning, transcription, and audio
description services to make video
accessibility easy. We are based in
Boston, MA and have been operating
since 2008.

Contact Us
77 N. Washington Street
2nd Floor
Boston, MA 02114
Tel: (617) 764-5189

https://www.3playmedia.com/learn/how-to-guides/html5-video-captioning/ 5/6
11/22/24, 3:51 PM How to Add HTML Video Subtitles and Captions

Fax: (617) 245-0510

Privacy Policy Patents Terms Security System Status

Site by 3 Media Web

  
©2024 3Play Media. All Rights Reserved

https://www.3playmedia.com/learn/how-to-guides/html5-video-captioning/ 6/6

You might also like