翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# MPEG-DASH による動画再生
<a name="dash-playback"></a>

MPEG-DASH を使用して Kinesis のビデオストリーム を表示するには、まず [GetDASHStreamingSessionURL](https://docs.aws.amazon.com/kinesisvideostreams/latest/dg/API_reader_GetDASHStreamingSessionURL.html) を使用してストリーミングセッションを作成します。このアクションにより、MPEG-DASH セッションにアクセスするための URL (セッショントークンを含む) が返されます。次に、この URL をメディアプレーヤーまたはスタンドアロンアプリケーションで使用してストリームを表示できます。

Amazon Kinesis のビデオストリームでは、MPEG-DASH を介して動画を提供する場合、以下が要件となります。
+ ストリーミングビデオ再生トラックの要件については、「」を参照してください[GetDASHStreamingSessionURL の要件](video-playback-requirements.md#requirements-getdash)。
+ データの保持期間が 0 より大きい。
+ 各フラグメントの動画トラックに、AVC (Advanced Video Coding) のコーデックプライベートデータが H.264 形式で、および HEVC のコーデックプライベートデータが H.265 形式で含まれている必要があります。詳細については、「[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 形式 ([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)
+ [MPEG-DASH 再生用の Kinesis Video Streams アーカイブコンテンツエンドポイントを取得する](#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);
```

### MPEG-DASH 再生用の Kinesis Video Streams アーカイブコンテンツエンドポイントを取得する
<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>

アーカイブ済みコンテンツエンドポイントがある場合は、次のように [GetHLSStreamingSessionURL](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)できます。