Amazon Web Services 文档中描述的 Amazon Web Services 服务或功能可能因区域而异。要查看适用于中国区域的差异，请参阅 中国的 Amazon Web Services 服务入门 (PDF)。

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

使用 HLS 播放视频

要使用 HLS 观看 Kinesis 视频直播，请先使用 get StreamingSession HLS URL 创建直播会话。此操作将返回用于访问 HLS 会话的 URL（包含会话令牌）。您随后可以使用媒体播放器或独立应用程序中的 URL 来显示流。

要通过 HLS 提供视频，Amazon Kinesis 视频流有以下要求：

示例：在 HTML 中使用 HLS 和 JavaScript

以下示例说明如何检索 Kinesis 视频流的 HLS 流媒体会话并在网页中播放。该示例演示了如何在以下播放器中播放视频：

设置 Kinesis Video Streams 客户端进行 HLS 播放

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

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

var protocol = $('#protocol').val();
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);
            

检索用于 HLS 播放的 Kinesis Video Streams 存档内容端点

启动客户端后，检索 Kinesis Video Streams 存档内容端点以检索 HLS 直播会话 URL：

// Step 2: Get a data endpoint for the stream
console.log('Fetching data endpoint');
kinesisVideo.getDataEndpoint({
    StreamName: streamName,
    APIName: "GET_HLS_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);

检索 HLS 直播会话网址

当你有存档内容终端节点时，调用 getHLS StreamingSession URL API 来检索 HLS 直播会话 URL：

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

else {
    kinesisVideoArchivedContent.getHLSStreamingSessionURL({
        StreamName: streamName,
        PlaybackMode: $('#playbackMode').val(),
        HLSFragmentSelector: {
            FragmentSelectorType: $('#fragmentSelectorType').val(),
            TimestampRange: $('#playbackMode').val() === "LIVE" ? undefined : {
                StartTimestamp: new Date($('#startTimestamp').val()),
                EndTimestamp: new Date($('#endTimestamp').val())
                }
            },
            ContainerFormat: $('#containerFormat').val(),
            DiscontinuityMode: $('#discontinuityMode').val(),
            DisplayFragmentTimestamp: $('#displayFragmentTimestamp').val(),
            MaxMediaPlaylistFragmentResults: parseInt($('#maxResults').val()),
            Expires: parseInt($('#expires').val())
        }, function(err, response) {
            if (err) { return console.error(err); }
            console.log('HLS Streaming Session URL: ' + response.HLSStreamingSessionURL);    
                

使用 HLS 播放功能显示流媒体视频

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

以下代码示例演示如何将流会话 URL 提供给 Video.js 播放器：

// VideoJS elements
<video id="videojs" class="player video-js vjs-default-skin" controls autoplay></video>
<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>
...

else if (playerName === 'VideoJS') {
var playerElement = $('#videojs');
playerElement.show();
var player = videojs('videojs');
console.log('Created VideoJS Player');
player.src({
    src: response.HLSStreamingSessionURL,
    type: 'application/x-mpegURL'
});
console.log('Set player source');
player.play();
console.log('Starting playback');

以下代码示例演示如何将流会话 URL 提供给 Google Shaka 播放器：

// 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>

...

else if (playerName === 'Shaka Player') {
var playerElement = $('#shaka');
playerElement.show();
var player = new shaka.Player(playerElement[0]);
console.log('Created Shaka Player');
player.load(response.HLSStreamingSessionURL).then(function() {
    console.log('Starting playback');
});
console.log('Set player source');

以下代码示例说明如何将流会话 URL 提供给 hls.js 播放器：

// HLS.js elements
<video id="hlsjs" class="player" controls autoplay></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

...

var playerName = $('#player').val();
if (playerName == 'HLS.js') {
    var playerElement = $('#hlsjs');
    playerElement.show();
    var player = new Hls();
    console.log('Created HLS.js Player');
    player.loadSource(response.HLSStreamingSessionURL);
    player.attachMedia(playerElement[0]);
    console.log('Set player source');
    player.on(Hls.Events.MANIFEST_PARSED, function() {
        video.play();
        console.log('Starting playback');
    });
}

排查 HRS 问题

如果视频流无法正确播放，请参见对 HLS 问题进行故障排除。

HLS 播放的完整示例

您可以下载或查看完整的示例代码。