Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@rahul-yr

rahul-yr/index.js

Created September 9, 2022 05:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rahul-yr/5d96a53949687d7b8586f9d000a12dfd to your computer and use it in GitHub Desktop.
Save rahul-yr/5d96a53949687d7b8586f9d000a12dfd to your computer and use it in GitHub Desktop.
Download ZIP
Stream HLS Videos using plain HTML - Along with custom request headers to Video.js
Raw
index.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<title>Document</title>
</head>
<body>
<video id="video" width="640" height="400" controls="controls"></video>
<script>
if (Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls({
xhrSetup: xhr => {
xhr.setRequestHeader('x-custom-access-token', "21232f297a57a5a743894a0e4a801fc3");
}
});
var url2 = 'http://localhost:8080/media/hls/vimeo.m3u8';
hls.loadSource(url2);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
video.play();
});
} else {
console.log("HLS not supported");
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment