diff --git a/index.html b/index.html old mode 100644 new mode 100755 index b06caa4..fe0eb36 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ - + Amazon Kinesis Video Streams HLS Viewer @@ -17,7 +17,8 @@

Amazon Kinesis Video Streams HLS Viewer

@@ -73,6 +74,13 @@

Amazon Kinesis Video Streams HLS Viewer

+
+ + +
+
+ + +
@@ -93,6 +108,10 @@

Amazon Kinesis Video Streams HLS Viewer

+ + + + @@ -149,7 +168,9 @@

Logs

EndTimestamp: new Date($('#endTimestamp').val()) } }, + ContainerFormat: $('#containerFormat').val(), DiscontinuityMode: $('#discontinuityMode').val(), + DisplayFragmentTimestamp: $('#displayFragmentTimestamp').val(), MaxMediaPlaylistFragmentResults: parseInt($('#maxMediaPlaylistFragmentResults').val()), Expires: parseInt($('#expires').val()) }, function(err, response) { @@ -158,7 +179,21 @@

Logs

// Step 4: Give the URL to the video player. var playerName = $('#player').val(); - if (playerName === 'VideoJS') { + 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'); + }); + } else if (playerName === 'VideoJS') { var playerElement = $('#videojs'); playerElement.show(); var player = videojs('videojs'); @@ -203,7 +238,9 @@

Logs

'startTimestamp', 'endTimestamp', 'fragmentSelectorType', + 'containerFormat', 'discontinuityMode', + 'displayFragmentTimestamp', 'maxMediaPlaylistFragmentResults', 'expires' ].forEach(function(field) {