基于 MediaConvert 实现加载 WebVTT 字幕的 HLS 流媒体的封装

在视频点播的场景中，一种常见的需求为在视频里面添加字幕（或者滚动播放某些通知）。常见的做法是将字幕与视频一起转码成 HLS 切片，即字幕是内嵌在视频中的。然而在这种情况下，如果我们需要更换字幕的内容，则不得不重新做转码、上传、更新的动作，如果您需要更新的视频数量很大，这无疑会消耗您非常大的成本与精力。

本文将指导您如何利用 AWS Elemental MediaConvert ，通过转码输出 m3u8 索引文件，TS 切片以及 WebVTT 字幕文件，实现传统视频文件格式到流媒体封装方式的转换。当您需要更新字幕时，仅需直接修改 WebVTT 字幕文件（可编辑的结构化文本文件），即可调整视频播放时所显示的字幕。因此，通过本文，您可以了解如何方便的管理视频字幕内容，尤其适用于字幕出错或者是需要更新滚动通知的场景。

背景知识

HTTP Live Streaming（缩写是HLS）是由苹果公司提出基于HTTP的流媒体网络传输协议。它的工作原理是把整个流分成一个个小的基于HTTP的文件来下载，每次只下载一些。当媒体流正在播放时，客户端可以选择从许多不同的备用源中以不同的速率下载同样的资源，允许流媒体会话适应不同的数据速率。在开始一个流媒体会话时，客户端会下载一个包含元数据的extended M3U (m3u8) playlist文件作为索引文件，用于寻找可用的媒体流。作为一种常见的互联网流媒体点播解决方案，很多播放器和软件都支持M3U文件格式。

AWS Elemental MediaConvert 是一款具有广播级功能的基于文件的视频转码服务，支持将文件转码为 HLS, DASH 等多种方式。借助该服务，您能够轻松创建视频点播 (VOD) 内容，结合 CloudFront 等 AWS 服务实现大规模的广播和多屏幕传输，使得我们可以专注于提供媒体内容，而无需执行复杂的视频处理基础设施构建和运营操作。

配置原理

首先将原始视频及原始字幕（如 MP4 + SRT）上传至 S3，通过 MediaConvert 将传统的媒体文件格式，转化为 HLS 流媒体文件格式，包括切片、索引、WebVTT 字幕文件，分开存至 S3，有字幕更新需要时，对S3中的 WebVTT字幕文件(.vtt) 进行更新即可实现字幕更新的需求。

架构图

注：架构图为一个比较完整的 AWS 点播媒体解决方案，在此文中，我们只演示橘色虚线框中的部分。

MediaConvert 输出HLS+WebVTT m3u8引用逻辑示例

What-is-AWS.m3u8 #index入口
|__What-is-AWS_bin.m3u8 视频+音频流切片索引
|__What-is-AWS_webtt.m3u8 字幕索引
|__What-is-AWS_webtt_00001.vtt 字幕文件

为演示字幕更新效果，后续演示中将通过直接更新 What-is-AWSwebtt00001.vtt 文件来实现。如果您希望更改引入的字幕文件，您也可以通过更改 What-is-AWS.m3u8 索引、What-is-AWS_webtt.m3u8 索引，以及. vtt 文件（如改为 What-is-AWSwebtt00002.vtt）来实现。

前提条件

最后是否能如期加载出字幕效果，存在播放器限制。因此此方案需结合支持的客户端播放器一起使用。目前已测：
1. HLS.js , Android ExoPlayer等 HLS 播放器可正常加载；
2. VLC，Video.JS （以及一些基于VideoJS的在线播放器如dplayerx.com 或 m3u8play.com ）等不可以。
MediaConvert 服务在 AWS 中国以及海外区都可以使用。如果您使用的是由西云数据运营的AWS （宁夏）区域和由光环新网运营的AWS（北京）区域，需要通过备案的方式打开80、8080、443端口，才可以通过公开 URL 连接的方式访问 S3 对象文件。若您未做备案，可以考虑先使用 AWS 海外区域做验证。

配置步骤

总体步骤为：将原始文件以及字幕文件上传到S3，创建输出目录、设置 MediaConvert S3角色。然后创建 Convert Job，将原始视频+字幕转码为 HLS + WebVTT。

在此文中我们提供两种方法去做转换。一种是直接导入我们已经写好的 json 快速设置转换任务；第二种是学习如何使用控制台逐步的操作来设置转换任务。

本文使用 mp4 格式的视频文件 + SRT 格式的字幕文件做演示，其他格式类似。如果您没有合适的原始视频做演示, 可点击下载本文演示中使用的原始视频和原始字幕。

方法一：直接导入 json 设置转换任务

从这里下载job配置文件并保存至本地
在MediaConvert控制台点击“import job”，选择步骤1保存的 json 文件
如截图所示，依次调整视频/音频/字幕文件位置、输出文件位置、Job IAM role名称（如尚未创建，请参考这里）

4.确认参数无误后，滚动到页面下方，点击“Create”创建任务，等待任务执行完成。

方法二：控制台操作

注意：如果您已经完成 方法一：json导入，请直接跳过此小节内容！

在MediaConvert控制台点击“Create job”
将 input 位置填写您的原始文件所在位置。
在input 当中，添加字幕文件 (add captions selector ）
建立 output group, 自定义命名并且指定 S3 输出位置。segment length 为切片片段，默认为10s，可根据需求自行调整。
output1 当中，默认已经为我们选择好视频和音频，我们只需要再填写 video 中 encoding setting 的必填项 Bitrate (bits/s) ，可根据需求自定义值。
回到 output group 处，为字幕添加 output（系统自动命名为 Output 2）。
在output2处，删除 video selector （因为已经在 output1中定义过了），添加 caption ，注意 destination type需要选择 WebVTT。
在 settings 中，选择具有 S3 访问权限的 IAM role。
其他参数都可以采用默认值，或者是根据需求自己定义，更多配置细节可以参考此配置文件。确认无误后点击“Create”创建转换任务。

检查输出

转换任务创建成功后，回到MediaConvert控制台刷新查看任务状态, 任务完成后会在指定的S3输出目录生成 m3u8、ts、vtt文件，结构如下图所示。
```
What-is-AWS.m3u8 #index入口
|__What-is-AWS_bin.m3u8 视频+音频流切片索引
|__What-is-AWS_webtt.m3u8 字幕索引
|__What-is-AWS_webtt_00001.vtt 字幕文件 
```
将上一步骤生成的文件设置为public，利用 m3u8 播放器对入口进行播放。注意，如果此时直接利用一些网页版的 m3u8 播放器，可能会有跨域错误。请参考S3 CORS 设置以解决此类问题。如仅做演示用，如果您用的是 Mac 系统，可直接用 Safari 浏览器打开此 m3u8 连接。

效果验证

演示视频可点击此处What-is-AWS.m3u8 ，Safari自动播放，其余浏览器需要借助 m3u8 播放器，请查看 “前提条件” 查询您所使用的播放器是否支持此类格式的播放。以及如果直接利用一些网页版的 m3u8 播放器，请提前开启 CORS 解决跨域问题。

原始效果演示

可以看到此时字幕为 version1。点击查看此时使用的.vtt 字幕文件

字幕更新后效果演示

从S3 下载此 vtt 文件，更新文字并且重新上传。此时再次刷新同一个视频，字幕已经更新如下。

注意：S3 对于新的对象是 read-after-write 的一致性，而对于覆盖文件的更新写入是最终一致性的数据模型。因此如果您是直接覆盖，可能会需要隔一段时间生效。如果您希望立即生效，请删除.vtt文件并且再次上传即可。

结论

本文讨论了利用 AWS Elemental MediaConvert 转码输出基于HLS协议的流媒体内容，包括m3u8索引文件、ts切片、WebVTT字幕文件，方便的实现视频点播服务中字幕和视频的分离。当您需要做字幕更新时，仅需直接修改 WebVTT 字幕文件的内容，即可调整视频播放时所显示的字幕。从而方便您更灵活的管理视频字幕内容。

参考资料

https://docs.thinkwithwp.com/mediaconvert/latest/ug/create-outputs.html
https://docs.thinkwithwp.com/mediaconvert/latest/ug/iam-role.html
https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API

亚马逊AWS官方博客