How to insert multiple language subtitles into a VOD and select it while watching the video.

3 minuti di lettura
Livello di contenuto: Intermedio
5

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,

  1. I've launched EC2 and installed Web Server in the EC2.
  2. Transcoded our Elemental MediaLive introduction video into mp4 (EMLExplained.mp4)
  3. Converted the subtitle into WebVTT , (EMLExplained.vtt)
  4. Translated the subtitle in english into Korean ( (EMLExplained_ko.vtt)
  5. Place all the files into DocumentRoot in my EC2
  6. 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 :

Enter image description here Enter image description here

AWS
ESPERTO
Bo_L
pubblicato 8 mesi fa829 visualizzazioni