視頻播放 MPEG-DASH

若要使用 MPEG-檢視 Kinesis 視訊串流DASH，請先使用 G 工作階段建立串流工作etDASHStreaming階段URL。此動作會傳回用於存取 MPEG-工作階段的 URL (包含工作DASH階段權杖)。然後，您可以URL在媒體播放器或獨立應用程式中使用來顯示串流。

Amazon Kinesis 影片串流必須符合下列要求，才能透過MPEG以下方式提供視訊：DASH

• 如需串流視訊播放曲目的需求，請參閱G etDASHStreaming 工作階段URL要求。

• 資料保留必須大於 0。

• 每個片段的視訊軌道必須包含 H.264 格式和 HEVC H.265 格式的「進階視訊編碼」(AVC) 中的編解碼器私人資料。如需詳細資訊，請參閱 MPEG-4 規格ISO/IEC14496-15。如需將串流資料調整為指定格式的相關資訊，請參閱NAL調整旗標。

• 每個片段的音軌（如果存在）必須包含AAC格式（AAC規格ISO/IEC13818-7）或 MS Wave 格式的編解碼器私有數據。

範例：使用 MPEG-DASH in HTML 和 JavaScript

下列範例顯示如何擷取 MPEG Kinesis 視訊DASH串流的串流工作階段，並在網頁中播放。本範例說明如何在下列播放器播放影片：

• Google Shaka Player

• dash.js

設定 Kinesis Video Streams 用戶端以進MPEG行DASH播放

若要使用 MPEG-存取串流視訊DASH，請先建立並設定 Kinesis Video Streams 用戶端 (以擷取服務端點) 和封存的媒體用戶端 (以擷取MPEGDASH串流工作階段)。應用程式會從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

啟動用戶端之後，擷取 Kinesis Video Streams 封存的內容端點，以便您可以擷取串DASH流工作階段，URL如下所示：MPEG

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

當您擁有封存的內容端點時，請呼叫 G etDASHStreaming 工作階段URLAPI以擷取 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 播放

當您有 MPEG-DASH 串流工作階段時URL，請將其提供給視訊播放器。提供URL給視頻播放器的方法是特定於您使用的播放器。

以下代碼示例演示瞭如何將流式會話提供URL給 Google Saka 播放器：

// 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 播放程式：

<!-- 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');
}

完成範例

您可以在上下載或檢視已完成的範例程式碼 GitHub。