Skip to content

Instantly share code, notes, and snippets.

@cho2
Last active July 20, 2025 04:37
Show Gist options
  • Save cho2/bde95b35805c5d7f3dde2cccddee6712 to your computer and use it in GitHub Desktop.
Save cho2/bde95b35805c5d7f3dde2cccddee6712 to your computer and use it in GitHub Desktop.
m3u8 in html iframe
<!DOCTYPE html>
<html>
<body>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video controls width=100% id="video"></video>
<script>
if(Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('http://URL/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 throught the `src` property.
// This is using the built-in support of the plain video element, without using hls.js.
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = 'http://URL/index.m3u8';
video.addEventListener('canplay',function() {
video.play();
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment