Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

# Lecture vidéo avec MPEG-DASH
<a name="dash-playback"></a>

[Pour visionner un flux vidéo Kinesis à l'aide de MPEG-DASH, vous devez d'abord créer une session de streaming à l'aide de Get SessionURL. DASHStreaming](https://docs.aws.amazon.com/kinesisvideostreams/latest/dg/API_reader_GetDASHStreamingSessionURL.html) Cette action renvoie une URL (contenant un jeton de session) qui permet d’accéder à la session MPEG-DASH. Vous pouvez alors utiliser cette URL dans un lecteur multimédia ou une application autonome pour afficher le flux. 

Un flux vidéo Amazon Kinesis doit répondre aux exigences suivantes pour fournir de la vidéo via MPEG-DASH :
+ Pour connaître les exigences relatives à la lecture de pistes de lecture vidéo en streaming, voir[Obtenir les exigences relatives DASHStreaming à l'URL de session](video-playback-requirements.md#requirements-getdash).
+ La conservation des données doit être supérieure à 0.
+ La piste vidéo de chaque fragment doit contenir des données privées de codec en Advanced Video Coding (AVC) pour le format H.264 et en HEVC pour le format H.265. Pour plus d'informations, consultez la [spécification ISO/IEC MPEG-4 14496-15](https://www.iso.org/standard/55980.html). Pour plus d'informations sur l'adaptation des données de flux à un format donné, voir [Indicateurs d'adaptation NAL](https://docs.aws.amazon.com/kinesisvideostreams/latest/dg/producer-reference-nal.html).
+ [La piste audio (le cas échéant) de chaque fragment doit contenir des données privées du codec au format AAC ([spécification AAC ISO/IEC 13818-7](https://www.iso.org/standard/43345.html)) ou au format MS Wave.](https://www-mmsp.ece.mcgill.ca/Documents/AudioFormats/WAVE/WAVE.html)

## Exemple : utilisation de MPEG-DASH en HTML et JavaScript
<a name="dash-examp1e"></a>

L'exemple suivant montre comment récupérer une session de streaming MPEG-DASH pour un flux vidéo Kinesis et la lire sur une page Web. Cet exemple montre comment lire la vidéo dans les lecteurs suivants :
+ [Google Shaka Player](https://github.com/google/shaka-player)
+ [dash.js](https://github.com/Dash-Industry-Forum/dash.js/wiki)

**Topics**
+ [Configuration du client Kinesis Video Streams pour la lecture MPEG-DASH](#dash-example-setup)
+ [Récupérez le point de terminaison de contenu archivé Kinesis Video Streams pour le lire au format MPEG-DASH](#dash-example-endpoint)
+ [Récupérez l'URL de la session de streaming MPEG-DASH](#dash-example-session)
+ [Afficher la vidéo en streaming avec lecture MPEG-DASH](#dash-example-display)
+ [Exemple terminé](#dash-example-complete)

### Configuration du client Kinesis Video Streams pour la lecture MPEG-DASH
<a name="dash-example-setup"></a>

Pour accéder au streaming vidéo avec MPEG-DASH, créez et configurez d'abord le client Kinesis Video Streams (pour récupérer le point de terminaison du service) et le client multimédia archivé (pour récupérer la session de streaming MPEG-DASH). L'application récupère les valeurs nécessaires à partir des zones de saisie sur la page 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);
```

### Récupérez le point de terminaison de contenu archivé Kinesis Video Streams pour le lire au format MPEG-DASH
<a name="dash-example-endpoint"></a>

Une fois les clients initialisés, récupérez le point de terminaison de contenu archivé Kinesis Video Streams afin de pouvoir récupérer l'URL de la session de streaming MPEG-DASH comme suit :

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

### Récupérez l'URL de la session de streaming MPEG-DASH
<a name="dash-example-session"></a>

Lorsque vous disposez du point de terminaison du contenu archivé, appelez l'API [Get DASHStreaming SessionURL](https://docs.aws.amazon.com/kinesisvideostreams/latest/dg/API_reader_GetDASHStreamingSessionURL.html) pour récupérer l'URL de la session de streaming MPEG-DASH comme suit :

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

### Afficher la vidéo en streaming avec lecture MPEG-DASH
<a name="dash-example-display"></a>

Lorsque vous disposez de l'URL de la session de streaming MPEG-DASH, indiquez-la au lecteur vidéo. La méthode pour fournir l'URL au lecteur vidéo est spécifique au lecteur utilisé.

L'exemple de code suivant montre comment fournir l'URL de la session de streaming à un lecteur [Google Shaka Player](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');
}
```

L'exemple de code suivant montre comment fournir l'URL de session de streaming à un lecteur [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');
}
```

### Exemple terminé
<a name="dash-example-complete"></a>

Vous pouvez [télécharger ou consulter l'exemple de code complet](https://github.com/aws-samples/amazon-kinesis-video-streams-hls-viewer/blob/master/index.html) sur GitHub.