Design Template by Anonymous
Features Extended
Captions
Captions or subtitles are essential in achieving accessbility for more users. If the user goes on your web page and wants to interact with a video but doesn't speak the
language it's in or can't hear the audio then their experience won't leave them content. Therefore, we use captions to provide for those users. To do this you would
add a .vtt file and list the captions in the format such as seen below.
Here is an example of a .vtt file:
WEBVTT
1
00:00:01.000 --> 00:00:03.000
- Hi.
2
00:00:03.000 --> 00:00:05.000
- Goodbye.
Then start coding the same way as you would for a video without captions. Adding a track element is important and within this is where the .vtt file is attached. Kind is
set equal to captions, srclang defines the language and then the label element is how the caption is shown to the user.
How to add captions in code:
<!DOCTYPE html>
<html>
<body>
<video width=500 height=300 controls>
<source src="video.mp4">
<track src="captions.vtt" kind="captions" srclang="EN" label="English">
</video>
</body>
</html>
YouTube Style
A clean alternative to the format in which HTML display video media is to use YouTube. It disregards the need to make sure the browser will suppport the video file format
type the video is in because it references the video URL instead. This is especially helpful if the video is already on YouTube. The way the video is displayed
is definitely shown in an elegant way and comes with many preset attribute options on the video such as pause, mute, playback speed, and captions.
Here is how to get a YouTube video on your web page:
<!DOCTYPE html>
<html>
<body>
<iframe width=500 height=300 src="https://www.youtube.com/embed/ZSt9tm3RoUU">
<iframe>
</body>
</html>