本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

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

若要使用 MPEG-DASH 檢視 Kinesis 影片串流，請先使用 [GetDASHStreamingSessionURL](https://docs.aws.amazon.com/kinesisvideostreams/latest/dg/API_reader_GetDASHStreamingSessionURL.html) 建立串流工作階段。這個動作會傳回一個 URL (包含工作階段字符) 以存取 MPEG-DASH 工作階段。然後您可以使用媒體播放器的 URL 或獨立應用程式來顯示串流。

Amazon Kinesis 影片串流對於透過 MPEG-DASH 提供影片有下列需求：
+ 如需串流影片播放軌跡需求，請參閱 [GetDASHStreamingSessionURL 要求](video-playback-requirements.md#requirements-getdash)。
+ 資料保留必須大於 0。
+ 每個片段的影片軌道必須針對視訊媒體的 H.264 格式的進階視訊編碼 (AVC)，以及針對 H.265 格式的 HEVC 中包含轉碼器私有資料。如需詳細資訊，請參閱 [MPEG-4 specification ISO/IEC 14496-15](https://www.iso.org/standard/55980.html)。如需將串流資料轉換為特定格式的相關資訊，請參閱 [NAL Adaptation Flags](https://docs.aws.amazon.com/kinesisvideostreams/latest/dg/producer-reference-nal.html)。
+ 每個片段的音訊軌道 (如果有) 必須包含 AAC 格式的編碼器私有資料 ([AAC 規格 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 和 JavaScript 使用 MPEG-DASH
<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**
+ [為 MPEG-DASH 播放設定 Kinesis Video Streams 用戶端](#dash-example-setup)
+ [擷取 Kinesis Video Streams 封存的內容端點以進行 MPEG-DASH 播放](#dash-example-endpoint)
+ [擷取 MPEG-DASH 串流工作階段 URL](#dash-example-session)
+ [使用 MPEG-DASH 播放顯示串流影片](#dash-example-display)
+ [已完成的範例](#dash-example-complete)

### 為 MPEG-DASH 播放設定 Kinesis Video Streams 用戶端
<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 串流工作階段 URL，如下所示：

```
 // 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 串流工作階段 URL
<a name="dash-example-session"></a>

當您有封存的內容端點時，請呼叫 [GetDASHStreamingSessionURL](https://docs.aws.amazon.com/kinesisvideostreams/latest/dg/API_reader_GetDASHStreamingSessionURL.html) API 以擷取 MPEG-DASH 串流工作階段 URL，如下所示：

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

您可以在 GitHub [下載或檢視完整的範例程式碼](https://github.com/aws-samples/amazon-kinesis-video-streams-hls-viewer/blob/master/index.html)。