How to insert multiple language subtitles into a VOD and select it while watching the video.
Are you looking for implementing to insert multiple language subtitles into a VOD? AWS Elemental MediaConvert support various output codecs and containers and Maybe you've heard of WebVTT and HTML5 but you're unsure how to implement. This article explains how to leveraged WebVTT and HTML5 for the mp4 output by MediaConvert.
Introduction
Recently, I was asked by one of customers that it is possible to insert Korean & English subtitles into a VOD file using MediaConvert and how to select both subtitles when watching the video? (Korean/English)
To begin with, MediaConvert supports a wide range of captions conversion workflows. And our MediaConvert provide the process to insert captions in a VoD asset follows the below steps: Setting up captions in outputs (https://docs.aws.amazon.com/mediaconvert/latest/ug/set-up-captions-in-outputs.html)
No extensive guide on how to do that further.
Solution
Therefore, after researching a deeper investigation in this regard, I found that it can be implemented by using HTML5 and WebVTT.
Here are the related HTML5,
<video controls>
<source src="EMLExplained.mp4" type="video/mp4">
<track label="English Subtitles" kind="subtitles" srclang="en" src="EMLExplained.vtt" default>
<track label="Korean Subtitles" kind="subtitles" srclang="ko" src="EMLExplained_ko.vtt">
</video>
Steps :
In order to implement the scenario,
- I've launched EC2 and installed Web Server in the EC2.
- Transcoded our Elemental MediaLive introduction video into mp4 (EMLExplained.mp4)
- Converted the subtitle into WebVTT , (EMLExplained.vtt)
- Translated the subtitle in english into Korean ( (EMLExplained_ko.vtt)
- Place all the files into DocumentRoot in my EC2
- Implemented player.html
Resources :
- EMLExplained.vtt
{
WEBVTT
00:00:00.000 --> 00:00:02.000
AWS elemental media live is a
00:00:02.000 --> 00:00:04.000
cloud-based broadcast grade video
00:00:04.000 --> 00:00:06.000
processing service with the power to
00:00:06.000 --> 00:00:09.000
deploy live channels within minutes the
00:00:09.000 --> 00:00:10.000
service encodes video in real time
00:00:10.000 --> 00:00:13.000
compressing live sources into high
00:00:13.000 --> 00:00:15.000
quality streams for delivery to
00:00:15.000 --> 00:00:17.000
televisions and connected devices with
00:00:17.000 --> 00:00:19.000
high availability advanced broadcast
00:00:19.000 --> 00:00:22.000
features and pay-as-you-go pricing media
00:00:22.000 --> 00:00:24.000
live makes it easy to bring live events
00:00:24.000 --> 00:00:27.000
and 24/7 channels to consumers without
00:00:27.000 --> 00:00:29.000
costly investment in infrastructure
00:00:29.000 --> 00:00:32.000
media life also works with other AWS
00:00:32.000 --> 00:00:34.000
media services as a complete set of
00:00:34.000 --> 00:00:36.000
tools for reliable cloud-based video
00:00:36.000 --> 00:00:38.000
processing and delivery of live
00:00:38.000 --> 00:00:39.000
broadcasts and events
}
- player.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Video WebVTT Example</title>
<style>
* {
margin: 20px 0 auto;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>HTML5 Video <a href="https://w3c.github.io/webvtt/">WebVTT</a> Example</h1>
</header>
<section>
<video controls>
<source src="EMLExplained.mp4" type="video/mp4">
<track label="English Subtitles" kind="subtitles" srclang="en" src="EMLExplained.vtt" default>
<track label="Korean Subtitles" kind="subtitles" srclang="ko"src="EMLExplained_ko.vtt">
</video>
</section>
</body>
</html>
Demo Screenshot :
Relevant content
asked 2 years ago
AWS OFFICIALUpdated 2 years ago- AWS OFFICIALUpdated a year ago
- AWS OFFICIALUpdated 16 days ago
- AWS OFFICIALUpdated a year ago
