

本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

# Kinesis Video Streams 回放
<a name="how-playback"></a>



您可以使用以下方法查看 Kinesis 视频流：
+ **GetMedia**— 你可以使用 `GetMedia` API 构建自己的应用程序来处理 Kinesis Video Streams。 `GetMedia`是一种低延迟的实时 API。要创建能使用的玩家`GetMedia`，你必须自己构建。有关如何开发使用显示 Kinesis 视频流的应用程序的信息`GetMedia`，请参阅。[使用解析器库进行直播](parser-library.md)
+ **HLS** — [HTTP 直播 (HLS)](https://en.wikipedia.org/wiki/HTTP_Live_Streaming) 是一种基于 HTTP 的行业标准媒体流通信协议。您可以使用 HLS 查看 Kinesis 视频流，用于实时播放或查看存档视频。

  您可以使用 HLS 进行实时播放。延迟通常介于 3-5 秒之间，但可能介于 1-10 秒之间，具体取决于用例、玩家和网络条件。你可以使用第三方播放器（如 [Video.js](https://github.com/videojs/video.js/) 或 [Google Shaka Player](https://github.com/google/shaka-player)），通过提供 HLS 流会话 URL 来以编程或手动方式显示视频流。你也可以通过在 [Apple Safari 或 Microsof](https://www.apple.com/safari/) [t Edge](https://www.microsoft.com/en-us/edge) 浏览器的**位置**栏中输入 HLS 直播会话网址来播放视频。
+ **MPEG-DASH** — 基于 [HTTP 的动态自适应流媒体 (DASH)](https://en.wikipedia.org/wiki/Dynamic_Adaptive_Streaming_over_HTTP)，也称为 MPEG-DASH，是一种自适应比特率流媒体协议，可通过互联网从传统 HTTP Web 服务器传输高质量的媒体内容。

  您可以使用 MPEG-DASH 进行实时播放。延迟通常介于 3-5 秒之间，但可能介于 1-10 秒之间，具体取决于用例、玩家和网络条件。您可以使用第三方播放器（例如 [dash.js](https://github.com/Dash-Industry-Forum/dash.js/wiki) 或 [Google Shaka Player](https://github.com/google/shaka-player)）以编程方式或手动方式提供 MPEG-DASH 直播会话网址来显示视频流。
+ **GetClip**— 您可以使用 `GetClip` API 在指定时间范围内从指定视频流中下载包含已存档的点播媒体的片段（在 MP4 文件中）。有关详细信息，请参阅 [GetClip](https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_reader_GetClip.html) API 参考。

**Topics**
+ [视频播放曲目要求](video-playback-requirements.md)
+ [使用 HLS 播放视频](hls-playback.md)
+ [使用 MPEG-DASH 播放视频](dash-playback.md)

# 视频播放曲目要求
<a name="video-playback-requirements"></a>

亚马逊 Kinesis Video Streams Kinesis Video Streams 支持以多种格式编码的媒体。如果您的 Kinesis 视频流使用的格式不受 APIs 以下四种格式的支持，请使用[https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_dataplane_GetMedia.html](https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_dataplane_GetMedia.html)或 [https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_reader_GetMediaForFragmentList.html](https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_reader_GetMediaForFragmentList.html)，因为它们没有轨道类型限制。

**Topics**
+ [GetClip 要求](#requirements-getclip)
+ [获取DASHStreaming会话网址要求](#requirements-getdash)
+ [获取HLSStreaming会话网址要求](#requirements-gethls)
+ [GetImages 要求](#requirements-getimages)

## GetClip 要求
<a name="requirements-getclip"></a>

相关此 API 的更多信息，请参阅 [https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_reader_GetClip.html](https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_reader_GetClip.html)。


| 曲目 1 描述 | 轨道 1 编解码器 ID | 曲目 2 描述 | 轨道 2 编解码器 ID | 
| --- | --- | --- | --- | 
| H.264 视频 | V\$1 /ISO/AVC MPEG4 | 不适用 | 不适用 | 
| H.264 视频 | V\$1 /ISO/AVC MPEG4 | AAC 音频 | A\$1AAC | 
| H.264 视频 | V\$1 /ISO/AVC MPEG4 | G.711 音频（仅限 A-Law） | A\$1MS/ACM | 
| H.265 视频 | V\$1 MPEGH/ISO/HEVC | 不适用 | 不适用 | 
| H.265 视频 | V\$1 MPEGH/ISO/HEVC | AAC 音频 | A\$1AAC | 

**重要**  
每个片段中包含的编解码器私有数据 (CPD) 包含特定于编解码器的初始化信息，例如帧速率、分辨率和编码配置文件，这些信息是正确解码片段所必需的。不支持在生成的片段的目标片段之间更改 CPD。通过查询的媒体，CPD 必须保持一致，否则将返回错误。

**重要**  
不支持追踪更改。在所查询的媒体中，曲目必须保持一致。如果流中的片段从只有视频变为同时包含音频和视频，或者将 AAC 音轨更改为 A-Law 音轨，则会返回错误。

## 获取DASHStreaming会话网址要求
<a name="requirements-getdash"></a>

相关此 API 的更多信息，请参阅 [https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_reader_GetDASHStreamingSessionURL.html](https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_reader_GetDASHStreamingSessionURL.html)。


| 曲目 1 描述 | 轨道 1 编解码器 ID | 曲目 2 描述 | 轨道 2 编解码器 ID | 
| --- | --- | --- | --- | 
| H.264 视频 | V\$1 /ISO/AVC MPEG4 | 不适用 | 不适用 | 
| H.264 视频 | V\$1 /ISO/AVC MPEG4 | AAC 音频 | A\$1AAC | 
| H.264 视频 | V\$1 /ISO/AVC MPEG4 | G.711 音频（仅限 A-Law） | A\$1MS/ACM | 
| H.264 视频 | V\$1 /ISO/AVC MPEG4 | G.711 音频（仅限 U-Law） | A\$1MS/ACM | 
| AAC 音频 | A\$1AAC | 不适用 | 不适用 | 
| H.265 视频 | V\$1 MPEGH/ISO/HEVC | 不适用 | 不适用 | 
| H.265 视频 | V\$1 MPEGH/ISO/HEVC | AAC 音频 | A\$1AAC | 

**重要**  
每个片段中包含的编解码器私有数据 (CPD) 包含特定于编解码器的初始化信息，例如帧速率、分辨率和编码配置文件，这些信息是正确解码片段所必需的。直播会话期间不支持 CPD 更改。通过查询的媒体，持续专业发展必须保持一致。

**重要**  
不支持追踪更改。在所查询的媒体中，曲目必须保持一致。如果直播中的片段从只有视频变为同时包含音频和视频，或者将 AAC 音轨更改为 A-Law 音轨，则直播将失败。

## 获取HLSStreaming会话网址要求
<a name="requirements-gethls"></a>

相关此 API 的更多信息，请参阅 [https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_reader_GetHLSStreamingSessionURL.html](https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_reader_GetHLSStreamingSessionURL.html)。


**HLS Mp4**  

| 曲目 1 描述 | 轨道 1 编解码器 ID | 曲目 2 描述 | 轨道 2 编解码器 ID | 
| --- | --- | --- | --- | 
| H.264 视频 | V\$1 /ISO/AVC MPEG4 | 不适用 | 不适用 | 
| H.264 视频 | V\$1 /ISO/AVC MPEG4 | AAC 音频 | A\$1AAC | 
| AAC 音频 | A\$1AAC | 不适用 | 不适用 | 
| H.265 视频 | V\$1 MPEGH/ISO/HEVC | 不适用 | 不适用 | 
| H.265 视频 | V\$1 MPEGH/ISO/HEVC | AAC 音频 | A\$1AAC | 


**哈哈哈哈哈哈哈**  

| 曲目 1 描述 | 轨道 1 编解码器 ID | 曲目 2 描述 | 轨道 2 编解码器 ID | 
| --- | --- | --- | --- | 
| H.264 视频 | V\$1 /ISO/AVC MPEG4 | 不适用 | 不适用 | 
| H.264 视频 | V\$1 /ISO/AVC MPEG4 | AAC 音频 | A\$1AAC | 
| AAC 音频 | A\$1AAC | 不适用 | 不适用 | 

**注意**  
每个片段中包含的编解码器私有数据 (CPD) 包含特定于编解码器的初始化信息，例如帧速率、分辨率和编码配置文件，这些信息是正确解码片段所必需的。对于 TS 和 MP4，直播会话期间都支持更改 CPD。因此，会话中的片段可以在 CPD 中包含不同的信息，而不会中断播放。对于每个直播会话，只允许更改 500 个 CPD。

**重要**  
不支持追踪更改。在所查询的媒体中，曲目必须保持一致。如果直播中的片段从只有视频变为同时包含音频和视频，或者将 AAC 音轨更改为 A-Law 音轨，则直播将失败。

## GetImages 要求
<a name="requirements-getimages"></a>

相关此 API 的更多信息，请参阅 [https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_reader_GetImages.html](https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_reader_GetImages.html)。

**注意**  
`GetImages`媒体应包含轨道 1 中的视频曲目。

# 使用 HLS 播放视频
<a name="hls-playback"></a>

[HTTP 直播 (HLS)](https://en.wikipedia.org/wiki/HTTP_Live_Streaming) 是一种基于 HTTP 的行业标准媒体流通信协议。您可以使用 HLS 查看 Kinesis 视频流，用于实时播放或查看存档视频。

您可以使用 HLS 进行实时播放。延迟通常介于 3-5 秒之间，但可能介于 1-10 秒之间，具体取决于用例、玩家和网络条件。你可以使用第三方播放器（如 [Video.js](https://github.com/videojs/video.js/) 或 [Google Shaka Player](https://github.com/google/shaka-player)），通过提供 HLS 流会话 URL 来以编程或手动方式显示视频流。你也可以通过在 [Apple Safari 或 Microsof](https://www.apple.com/safari/) [t Edge](https://www.microsoft.com/en-us/edge) 浏览器的位置栏中输入 HLS 直播会话网址来播放视频。

[要使用 HLS 查看 Kinesis 视频流，请先使用 Get SessionURL 创建直播会话。HLSStreaming](https://docs.aws.amazon.com/kinesisvideostreams/latest/dg/API_reader_GetHLSStreamingSessionURL.html)此操作将返回用于访问 HLS 会话的 URL（包含会话令牌）。您随后可以使用媒体播放器或独立应用程序中的 URL 来显示流。

**重要**  
并非所有发送到 Kinesis Video Streams 的媒体都可以通过 HLS 播放。有关具体[GetHLSStreamingSessionURL](API_reader_GetHLSStreamingSessionURL.md)的上传要求，请参阅。

**Topics**
+ [使用检索 HLS 直播会话网址 AWS CLI](#retrieve-hls-url)
+ [示例：在 HTML 中使用 HLS 和 JavaScript](#how-hls-ex1)
+ [HLS 问题疑难解答](#how-hls-ex1-ts)

## 使用检索 HLS 直播会话网址 AWS CLI
<a name="retrieve-hls-url"></a>

以下过程演示如何使用为 Kinesis 视频流生成 HLS 直播会话网址。 AWS CLI 

有关安装说明，请参阅《[AWS Command Line Interface 用户指南》](https://docs.aws.amazon.com//cli/latest/userguide/getting-started-install.html#getting-started-install-instructions)。安装完成后， AWS CLI使用凭据和区域进行[配置](https://docs.aws.amazon.com//cli/latest/userguide/getting-started-quickstart.html#getting-started-quickstart-new)。

或者，打开已 AWS CLI 安装和配置的 AWS CloudShell 终端。有关更多信息，请参阅 [AWS CloudShell 用户指南](https://docs.aws.amazon.com//cloudshell/latest/userguide/welcome.html#how-to-get-started)。

**检索 Kinesis 视频流的 HLS 网址端点。**

1. 在终端中键入以下内容：

   ```
   aws kinesisvideo get-data-endpoint \
     --api-name GET_HLS_STREAMING_SESSION_URL \
     --stream-name YourStreamName
   ```

   您将收到如下所示的回复：

   ```
   {
       "DataEndpoint": "https://b-1234abcd.kinesisvideo.aws-region.amazonaws.com"
   }
   ```

1. 向返回的端点发出 HLS 直播会话 URL 请求。

------
#### [ Live ]

   为了进行实时播放，HLS 媒体播放列表会根据最新媒体不断更新。当您在媒体播放器中播放此类会话时，用户界面通常会显示 “**实**时” 通知，没有用于在播放窗口中选择要显示的位置的滑块控件。

   运行此命令时，请确保您正在将媒体上传到此流。

   ```
   aws kinesis-video-archived-media get-hls-streaming-session-url \
     --endpoint-url https://b-1234abcd.kinesisvideo.aws-region.amazonaws.com \
     --stream-name YourStreamName \
     --playback-mode LIVE
   ```

------
#### [ Live replay ]

   对于直播回放，从指定的开始时间开始播放。HLS 媒体播放列表还会在最新媒体可用时不断更新。会话将继续包含新摄取的媒体，直到会话到期或指定的结束时间（以先到者为准）。此模式非常有用，可以从检测到事件时开始播放，并继续直播截至会话创建时尚未摄取的媒体。

   确定开始时间戳。

   在此示例中，我们使用以**秒为单位的 Unix Epoch 时间**。有关[时间戳](https://docs.aws.amazon.com//cli/latest/userguide/cli-usage-parameters-types.html#parameter-type-timestamp)格式的更多信息，请参阅《 AWS Command Line Interface 用户指南》中的 “时间戳” 部分。

   有关转换工具，请参见 [UnixTime.org](https://unixtime.org/)。
   + **1708471800** 等于 2024 年 **2 月 20 日**下午 3:30:00 GMT-08:00

   在此示例中，我们没有指定结束时间戳，这意味着会话将继续包含新摄取的媒体，直到会话到期。

   在`LIVE_REPLAY`播放模式和指定了 [HLS 片段选择器的](https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_reader_GetHLSStreamingSessionURL.html#KinesisVideo-reader_GetHLSStreamingSessionURL-request-HLSFragmentSelector)情况下调用 `GetHLSStreamingSessionURL` API。

   ```
   aws kinesis-video-archived-media get-hls-streaming-session-url \
     --endpoint-url https://b-1234abcd.kinesisvideo.aws-region.amazonaws.com \
     --stream-name YourStreamName \
     --playback-mode LIVE_REPLAY \
     --hls-fragment-selector \
       "FragmentSelectorType=SERVER_TIMESTAMP,TimestampRange={StartTimestamp=1708471800}"
   ```

------
#### [ On-demand ]

   对于按需播放，HLS 媒体播放列表包含由 HLS 片段选择器指定的媒体。在媒体播放器中播放此类会话时，用户界面通常会显示一个滑块控件，用于在播放窗口中选择要显示的位置。

   要为直播的特定部分创建网址，请先确定开始和结束时间戳。

   在此示例中，我们使用以**秒为单位的 Unix Epoch 时间**。有关[时间戳](https://docs.aws.amazon.com//cli/latest/userguide/cli-usage-parameters-types.html#parameter-type-timestamp)格式的更多信息，请参阅《 AWS Command Line Interface 用户指南》中的 “时间戳” 部分。

   有关转换工具，请参见 [UnixTime.org](https://unixtime.org/)。
   + **1708471800** 等于 2024 年 **2 月 20 日**下午 3:30:00 GMT-08:00
   + **1708471860** 等于 2024 年 **2 月 20 日**下午 3:31:00 GMT-08:00

   在`ON_DEMAND`播放模式和指定了 [HLS 片段选择器的](https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_reader_GetHLSStreamingSessionURL.html#KinesisVideo-reader_GetHLSStreamingSessionURL-request-HLSFragmentSelector)情况下调用 `GetHLSStreamingSessionURL` API。

   ```
   aws kinesis-video-archived-media get-hls-streaming-session-url \
     --endpoint-url https://b-1234abcd.kinesisvideo.aws-region.amazonaws.com \
     --stream-name YourStreamName \
     --playback-mode ON_DEMAND \
     --hls-fragment-selector \
       "FragmentSelectorType=SERVER_TIMESTAMP,TimestampRange={StartTimestamp=1708471800,EndTimestamp=1708471860}"
   ```

**注意**  
如文档中所述，时间戳必须在 24 小时之内。[HLSTimestampRange](API_reader_HLSTimestampRange.md)

------

   您将收到如下所示的回复：

   ```
   {
       "HLSStreamingSessionURL": "https://b-1234abcd.kinesisvideo.aws-region.amazonaws.com/hls/v1/getHLSMasterPlaylist.m3u8?SessionToken=CiAz...DkRE6M~"
   }
   ```
**重要**  
请勿将此令牌共享或存储在未经授权的实体可以访问的地方。该令牌提供对直播内容的访问权限。使用与 AWS 凭证相同的措施来保护令牌。

   您可以使用此网址和任何 HLS 播放器来观看 HLS 直播。

   例如，使用 VLC 媒体播放器。

   你也可以通过在 Apple Safari 或 Microsoft Edge 浏览器的位置栏中输入 HLS 直播会话网址来播放 HLS 直播。

## 示例：在 HTML 中使用 HLS 和 JavaScript
<a name="how-hls-ex1"></a>

以下示例说明如何使用 AWS 适用于 JavaScript v2 的软件开发工具包检索 Kinesis 视频流的 HLS 直播会话并在网页中播放。该示例演示了如何在以下播放器中播放视频：
+ [Video.js](https://github.com/videojs/video.js/) 
+ [Google Shaka Player](https://github.com/google/shaka-player)
+ [hls.js](https://github.com/video-dev/hls.js/)

在中查看[完整的示例代码](https://github.com/aws-samples/amazon-kinesis-video-streams-media-viewer)和[托管网页](https://aws-samples.github.io/amazon-kinesis-video-streams-media-viewer/) GitHub。这个静态网页简化了对来自亚马逊 Kinesis 视频流的 HLS 和 MPEG-DASH 输出的测试和实验。示例页面提供了以下参数的输入字段：
+ AWS 区域: 您的 Kinesis 视频流所在的区域
+ 直播名称：你的 Kinesis 视频直播的名称
+ 播放模式：HLS 播放模式（直播、LIVE\$1REPLAY 或 ON\$1DEMAND）
+ 片段选择器类型：用于选择片段的方法（SERVER\$1TIMESTAMP 或 PRODUCER\$1TIMESTAMP）
+ 片段编号：起始片段号（如果适用）
+ 容器格式：媒体容器的格式（FRAGMENTED\$1 MP4 或 MPEG\$1TS）

应用程序从 HTML 页面的输入框中检索这些值，并使用它们来构造页面上显示的 HLS 流式传输会话的请求。

**Topics**
+ [导入 JavaScript 适用于浏览器的 AWS SDK](#how-hls-ex1-import)
+ [设置 Kinesis Video Streams 客户端](#how-hls-ex1-setup)
+ [检索 HLS 播放的端点](#how-hls-ex1-endpoint)
+ [设置 Kinesis Video Streams 存档媒体客户端](#how-hls-ex1-session)
+ [检索 HLS 直播会话网址](#how-hls-ex1-retrieve-url)
+ [在网页上显示 HLS 直播](#how-hls-ex1-display)

### 导入 JavaScript 适用于浏览器的 AWS SDK
<a name="how-hls-ex1-import"></a>

在网页中，添加以下脚本标签以将 JavaScript v2 版 AWS SDK 导入到项目中。

```
<script src="https://cdnjs.cloudflare.com/ajax/libs/aws-sdk/2.490.0/aws-sdk.min.js"></script>
```

有关更多信息，请参阅 S [AWS DK](https://docs.aws.amazon.com//sdk-for-javascript/v2/developer-guide/loading-the-jssdk.html) 中的 JavaScript文档。

### 设置 Kinesis Video Streams 客户端
<a name="how-hls-ex1-setup"></a>

要使用 HLS 访问流媒体视频，请先创建和配置 Kinesis Video Streams 客户端。有关其他身份验证方法[，请参阅在 Web 浏览器中设置凭据](https://docs.aws.amazon.com//sdk-for-javascript/v2/developer-guide/setting-credentials-browser.html)。

```
const clientConfig = {
    accessKeyId: 'YourAccessKey',
    secretAccessKey: 'YourSecretKey',
    region: 'us-west-2'
};
const kinesisVideoClient = new AWS.KinesisVideo(clientConfig);
```

该应用程序将从 HTML 页面上的输入框检索必要值。

### 检索 HLS 播放的端点
<a name="how-hls-ex1-endpoint"></a>

使用 Kinesis Video Streams 客户端调用 [GetDataEndpoint](API_GetDataEndpoint.md) API 来检索端点。

```
const getDataEndpointOptions = {
    StreamName: 'YourStreamName',
    APIName: 'GET_HLS_STREAMING_SESSION_URL'
};
const getDataEndpointResponse = await kinesisVideoClient
    .getDataEndpoint(getDataEndpointOptions)
    .promise();
const hlsDataEndpoint = getDataEndpointResponse.DataEndpoint;
```

此代码将端点存储在`hlsDataEndpoint`变量中。

### 设置 Kinesis Video Streams 存档媒体客户端
<a name="how-hls-ex1-session"></a>

在 Kinesis Video Streams 存档媒体客户端的客户端配置中，指定您在上一步中获得的终端节点。

```
const archivedMediaClientConfig = {
    accessKeyId: 'YourAccessKey',
    secretAccessKey: 'YourSecretKey',
    region: 'us-west-2',
    endpoint: hlsDataEndpoint
};
const kinesisVideoArchivedMediaClient = new AWS.KinesisVideoArchivedMedia(archivedMediaClientConfig);
```

### 检索 HLS 直播会话网址
<a name="how-hls-ex1-retrieve-url"></a>

使用 Kinesis Video Streams 存档媒体客户端调用 [GetHLSStreamingSessionURL](API_reader_GetHLSStreamingSessionURL.md) API 来检索 HLS 播放网址。

```
const getHLSStreamingSessionURLOptions = {
    StreamName: 'YourStreamName',
    PlaybackMode: 'LIVE'
};
const getHLSStreamingSessionURLResponse = await kinesisVideoArchivedMediaClient
    .getHLSStreamingSessionURL(getHLSStreamingSessionURLOptions)
    .promise();
const hlsUrl = getHLSStreamingSessionURLResponse.HLSStreamingSessionURL;
```

### 在网页上显示 HLS 直播
<a name="how-hls-ex1-display"></a>

当您具有 HLS 流会话 URL 时，请将其提供到视频播放器。向视频播放器提供 URL 的方法是特定于所使用的播放器的。

------
#### [ Video.js ]

执行以下操作[将 Video.js](https://github.com/videojs/video.js/) 及其 CSS 类导入到我们的浏览器脚本中：

```
<link rel="stylesheet" href="https://vjs.zencdn.net/6.6.3/video-js.css">
<script src="https://vjs.zencdn.net/6.6.3/video.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.14.1/videojs-contrib-hls.js"></script>
```

创建一个 `video` HTML 元素来显示视频：

```
<video id="videojs" class="player video-js vjs-default-skin" controls autoplay></video>
```

将 HLS 网址设置为 HTML 视频元素的来源：

```
const playerElement = document.getElementById('videojs');
const player = videojs(playerElement);
player.src({
    src: hlsUrl,
    type: 'application/x-mpegURL'
});
player.play();
```

------
#### [ Shaka ]

执行以下操作将 [Google Shaka 播放器](https://github.com/shaka-project/shaka-player)导入我们的浏览器脚本：

```
<script src="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/2.4.1/shaka-player.compiled.js"></script>
```

创建一个 `video` HTML 元素来显示视频：

```
<video id="shaka" class="player" controls autoplay></video>
```

创建一个指定视频元素的 Shaka 播放器并调用 load 方法：

```
const playerElement = document.getElementById('shaka');
const player = new shaka.Player(playerElement);
player.load(hlsUrl);
```

------
#### [ hls.js ]

执行以下操作将 [hls.js](https://github.com/video-dev/hls.js/) 导入我们的浏览器脚本：

```
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
```

创建一个 `video` HTML 元素来显示视频：

```
<video id="hlsjs" class="player" controls autoplay></video>
```

创建一个 hls.js 播放器，给它一个 HLS 网址，然后叫它玩：

```
const playerElement = document.getElementById('hlsjs');
const player = new Hls();
player.loadSource(hlsUrl);
player.attachMedia(playerElement);
player.on(Hls.Events.MANIFEST_PARSED, function() {
    video.play();
});
```

------

## HLS 问题疑难解答
<a name="how-hls-ex1-ts"></a>

本节介绍在 Kinesis Video Streams 中使用 HTTP 直播 (HLS) 时可能遇到的问题。

**Topics**
+ [检索 HLS 流会话 URL 成功，但在视频播放器中播放失败](#troubleshooting-hls-playback)
+ [创建者与播放器之间的延迟过高](#troubleshooting-hls-latency)

### 检索 HLS 流会话 URL 成功，但在视频播放器中播放失败
<a name="troubleshooting-hls-playback"></a>

当使用 `GetHLSStreamingSessionURL` 可以成功检索 HLS 流会话 URL，但将该 URL 提供给视频播放器后视频无法播放时，就会出现这种情况。

要排查这种情况，请尝试以下操作：
+ 确定视频流是否在 Kinesis Video Streams 控制台中播放。考虑控制台显示的任何错误。
+ 如果片段持续时间少于 1 秒，则增加到 1 秒。如果片段持续时间太短，则该服务可能会限制播放器，因为它过于频繁地请求视频片段。
+ 验证每个 HLS 流会话 URL 是否在被唯一的用户使用。如果多个播放器正在使用单个 HLS 流会话 URL，服务可能会收到过多的请求并限制这些播放器。
+ 确认您的播放器支持您为 HLS 直播会话指定的所有选项。为以下参数尝试其他值组合：
  + `ContainerFormat`
  + `PlaybackMode`
  + `FragmentSelectorType`
  + `DiscontinuityMode`
  + `MaxMediaPlaylistFragmentResults`

  某些媒体播放器（例如 HTML5 和移动播放器）通常仅支持 f MP4 容器格式的 HLS。其他媒体播放器（例如 Flash 和自定义播放器）可能只支持 MPEG TS 容器格式的 HLS。我们建议尝试使用`ContainerFormat`参数来开始故障排除。
+ 验证每个片段是否具有一致的轨道数。验证流中的片段在同时具有音频和视频轨道与只有视频轨道之间没有变化。另外，请确认每个轨道的片段之间的编码器设置（分辨率和帧速率）没有变化。

### 创建者与播放器之间的延迟过高
<a name="troubleshooting-hls-latency"></a>

当捕获视频与在视频播放器中播放视频之间的延迟过高时，就会出现这种情况。

视频通过 HLS 逐个片段地播放。因此，延迟不能小于片段持续时间。延迟还包含缓冲和传输数据所需的时间。如果您的解决方案需要的延迟不到一秒，请考虑改用 `GetMedia` API。

您可以调整以下参数来减少总体延迟，但调整这些参数也可能降低视频质量或提高再缓冲率。
+ **片段持续时间**-片段持续时间是视频流中各分段之间的视频量，由视频编码器生成的关键帧频率控制。推荐值为 1 秒。具有较短的片段持续时间意味着在将视频数据传输到服务之前等待片段完成的时间会更少。较短的片段还有助于提高服务的处理速度。但是，如果片段持续时间过短，则可能增加播放器耗尽内容且必须停止和缓冲内容的可能性。如果片段持续时间短于 500 毫秒，创建者可能会创建过多请求，从而导致服务对其进行限制。
+ **比特率** — 比特率较低的视频流读取、写入和传输所需的时间更少。但是，比特率较低的视频流通常具有较低的视频质量。
+ **媒体播放列表中的片段数** — 对延迟敏感的播放器只能加载媒体播放列表中的最新片段。大多数玩家改为从最早的片段开始。通过减少播放列表中的片段数量，可以缩短先前片段和新片段之间的时间间隔。如果播放列表大小较小，则在向播放列表添加新片段时出现延迟，或者如果玩家获取更新的播放列表出现延迟，则在播放过程中可能会跳过片段。我们建议使用 3—5 个片段，并使用配置为仅加载播放列表中最新片段的播放器。
+ **播放器缓冲区大小** — 大多数视频播放器都有可配置的最小缓冲持续时间，默认值通常为 10 秒。要最大程度地减少延迟，您可以将此值设置为 0 秒。但是，这样做意味着如果有任何延迟生成片段，则玩家会拒绝缓冲，因为玩家没有缓冲区来吸收延迟。
+ **播放器 “catch up”** — 如果缓冲区已满，视频播放器通常不会自动将播放捕捉到视频缓冲区前面，比如延迟的片段导致片段积压播放。自定义播放器可通过删除帧或提高播放速度（例如，提高到 1.1 倍）以赶到缓冲区的前面来避免这一点。这会导致播放器赶上时出现震荡或加速，并且由于缓冲区大小被保持在较小水平，重新缓冲可能会更频繁。

# 使用 MPEG-DASH 播放视频
<a name="dash-playback"></a>

[要使用 MPEG-DASH 查看 Kinesis 视频流，请先使用 Get SessionURL 创建直播会话。DASHStreaming](https://docs.aws.amazon.com/kinesisvideostreams/latest/dg/API_reader_GetDASHStreamingSessionURL.html)此操作将返回用于访问 MPEG-DASH 会话的 URL（包含会话令牌）。您随后可以使用媒体播放器或独立应用程序中的 URL 来显示流。

Amazon Kinesis 视频流在通过 MPEG-DASH 提供视频时需要满足以下要求：
+ 有关流式视频播放曲目的要求，请参阅[获取DASHStreaming会话网址要求](video-playback-requirements.md#requirements-getdash)。
+ 数据保留必须大于 0。
+ 对于 H.264 格式的高级视频编码 (AVC) 和 H.265 格式的 HEVC，各个片段的视频轨道必须包含编解码器专用数据。有关更多信息，请参阅 [MPEG-4 规范 ISO/IEC 14496-15](https://www.iso.org/standard/55980.html)。有关使流数据适应给定格式的信息，请参阅 [NAL 适应标志](https://docs.aws.amazon.com/kinesisvideostreams/latest/dg/producer-reference-nal.html)。
+ [每个片段的音轨（如果存在）必须包含 AAC 格式（A [AC 规范 ISO/IEC 13818-7](https://www.iso.org/standard/43345.html)）或 MS Wave 格式的编解码器私有数据。](https://www-mmsp.ece.mcgill.ca/Documents/AudioFormats/WAVE/WAVE.html)

## 示例：在 HTML 中使用 MPEG-DASH 和 JavaScript
<a name="dash-examp1e"></a>

以下示例说明如何检索 Kinesis 视频流的 MPEG-DASH 直播会话并在网页中播放。该示例演示了如何在以下播放器中播放视频：
+ [Google Shaka Player](https://github.com/google/shaka-player)
+ [dash.js](https://github.com/Dash-Industry-Forum/dash.js/wiki)

**Topics**
+ [设置 Kinesis Video Streams 客户端以便播放 MPEG-DASH](#dash-example-setup)
+ [检索 Kinesis Video Streams 存档内容端点以便播放 MPEG-DASH](#dash-example-endpoint)
+ [检索 MPEG-DASH 直播会话网址](#dash-example-session)
+ [使用 MPEG-DASH 播放功能显示流媒体视频](#dash-example-display)
+ [已完成的示例](#dash-example-complete)

### 设置 Kinesis Video Streams 客户端以便播放 MPEG-DASH
<a name="dash-example-setup"></a>

要使用 MPEG-DASH 访问流媒体视频，请先创建并配置 Kinesis Video Streams 客户端（用于检索服务端点）和存档媒体客户端（用于检索 MPEG-DASH 直播会话）。该应用程序将从 HTML 页面上的输入框检索必要值。

```
var streamName = $('#streamName').val();

// Step 1: Configure SDK Clients
var options = {
    accessKeyId: $('#accessKeyId').val(),
    secretAccessKey: $('#secretAccessKey').val(),
    sessionToken: $('#sessionToken').val() || undefined,
    region: $('#region').val(),
    endpoint: $('#endpoint').val() || undefined
    }
var kinesisVideo = new AWS.KinesisVideo(options);
var kinesisVideoArchivedContent = new AWS.KinesisVideoArchivedMedia(options);
```

### 检索 Kinesis Video Streams 存档内容端点以便播放 MPEG-DASH
<a name="dash-example-endpoint"></a>

启动客户端后，检索 Kinesis Video Streams 存档内容端点，以便您可以按如下方式检索 MPEG-DASH 直播会话网址：

```
 // Step 2: Get a data endpoint for the stream
console.log('Fetching data endpoint');
kinesisVideo.getDataEndpoint({
    StreamName: streamName,
    APIName: "GET_DASH_STREAMING_SESSION_URL" 
}, function(err, response) {
    if (err) { return console.error(err); }
    console.log('Data endpoint: ' + response.DataEndpoint);
    kinesisVideoArchivedContent.endpoint = new AWS.Endpoint(response.DataEndpoint);
```

### 检索 MPEG-DASH 直播会话网址
<a name="dash-example-session"></a>

有了存档内容端点后，请调用 Ge [t DASHStreaming SessionURL](https://docs.aws.amazon.com/kinesisvideostreams/latest/dg/API_reader_GetDASHStreamingSessionURL.html) API 来检索 MPEG-DASH 直播会话网址，如下所示：

```
// Step 3: Get a Streaming Session URL
var consoleInfo = 'Fetching ' + protocol + ' Streaming Session URL';
console.log(consoleInfo);

if (protocol === 'DASH') {
    kinesisVideoArchivedContent.getDASHStreamingSessionURL({
        StreamName: streamName,
        PlaybackMode: $('#playbackMode').val(),
        DASHFragmentSelector: {
            FragmentSelectorType: $('#fragmentSelectorType').val(),
            TimestampRange: $('#playbackMode').val() === "LIVE" ? undefined : {
                StartTimestamp: new Date($('#startTimestamp').val()),
                EndTimestamp: new Date($('#endTimestamp').val())
            }
        },
        DisplayFragmentTimestamp: $('#displayFragmentTimestamp').val(),
        DisplayFragmentNumber: $('#displayFragmentNumber').val(),
        MaxManifestFragmentResults: parseInt($('#maxResults').val()),
        Expires: parseInt($('#expires').val())
    }, function(err, response) {
        if (err) { return console.error(err); }
        console.log('DASH Streaming Session URL: ' + response.DASHStreamingSessionURL);
```

### 使用 MPEG-DASH 播放功能显示流媒体视频
<a name="dash-example-display"></a>

当您具有 MPEG-DASH 流会话 URL 时，请将其提供到视频播放器。向视频播放器提供 URL 的方法特定于您使用的播放器。

以下代码示例演示如何将流会话 URL 提供给 [Google Shaka](https://github.com/google/shaka-player) 播放器：

```
// Step 4: Give the URL to the video player.

//Shaka Player elements 
<video id="shaka" class="player" controls autoplay></video>
<script src="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/2.4.1/shaka-player.compiled.js">
</script>
...

var playerName = $('#player').val();

if (playerName === 'Shaka Player') {
    var playerElement = $('#shaka');
    playerElement.show();

    var player = new shaka.Player(playerElement[0]);
    console.log('Created Shaka Player');

    player.load(response.DASHStreamingSessionURL).then(function() {
        console.log('Starting playback');
    });
    console.log('Set player source');
}
```

以下代码示例说明如何将流会话 URL 提供给 [dash.js](https://github.com/Dash-Industry-Forum/dash.js/wiki) 播放器：

```
<!-- dash.js Player elements -->
<video id="dashjs" class="player" controls autoplay=""></video>
<script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>

...

var playerElement = $('#dashjs');
playerElement.show();

var player = dashjs.MediaPlayer().create();
console.log('Created DASH.js Player');

player.initialize(document.querySelector('#dashjs'), response.DASHStreamingSessionURL, true);
console.log('Starting playback');
console.log('Set player source');
}
```

### 已完成的示例
<a name="dash-example-complete"></a>

您可以在上[下载或查看已完成的示例代码](https://github.com/aws-samples/amazon-kinesis-video-streams-hls-viewer/blob/master/index.html) GitHub。