Created
January 6, 2020 23:26
-
-
Save CyberCyclone/a34a0caf2b3a2599de5a2828141ea2ed to your computer and use it in GitHub Desktop.
HTML / JavaScript "Video On Demand" example.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> | |
<!-- Or if you want a more recent canary version --> | |
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@canary"></script> --> | |
<video id="video" class="center" style="width:75%; margin:0 auto; display:block;" controls></video> | |
<script> | |
var video = document.getElementById('video'); | |
if(Hls.isSupported()) { | |
var hls = new Hls(); | |
hls.loadSource('https://e20604ef07e8336ff0929ea8d86cd342.egress.mediapackage-vod.us-east-1.amazonaws.com/out/v1/355b7150bcf14b9983768d087dfd291c/31cd178ecba441c9b76145a0305fd05c/8d904062595a47f09f4cec8d4e4009b6/index.m3u8'); | |
hls.attachMedia(video); | |
hls.on(Hls.Events.MANIFEST_PARSED,function() { | |
video.play(); | |
}); | |
} | |
// hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled. | |
// When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element through the `src` property. | |
// This is using the built-in support of the plain video element, without using hls.js. | |
// Note: it would be more normal to wait on the 'canplay' event below however on Safari (where you are most likely to find built-in HLS support) the video.src URL must be on the user-driven | |
// white-list before a 'canplay' event will be emitted; the last video event that can be reliably listened-for when the URL is not on the white-list is 'loadedmetadata'. | |
else if (video.canPlayType('application/vnd.apple.mpegurl')) { | |
video.src = 'https://e20604ef07e8336ff0929ea8d86cd342.egress.mediapackage-vod.us-east-1.amazonaws.com/out/v1/355b7150bcf14b9983768d087dfd291c/31cd178ecba441c9b76145a0305fd05c/8d904062595a47f09f4cec8d4e4009b6/index.m3u8'; | |
video.addEventListener('loadedmetadata',function() { | |
video.play(); | |
}); | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment