<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/hls.min.js"></script>
<style>
video {
width: 640px;
height: 360px;
}
</style>
</head>
<body>
<video id="video"></video>
<script>
if (Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('https://example.com/path/to/your.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
video.play();
});
}
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = 'https://example.com/path/to/your.m3u8';
video.addEventListener('loadedmetadata', function () {
video.play();
});
}
</script>
</body>
</html>
In this example, we’ve included the HLS.js library in the head section of our HTML file. We’ve also added some CSS to style the video element.
In the body section, we’ve added a video element with an ID of video.
In the script section, we’ve first checked if HLS is supported in the browser using the Hls.isSupported() function. If it is, we’ve created a new Hls instance, loaded the M3U8 URL using the loadSource() method, attached the video element using the attachMedia() method, and played the video once the manifest is parsed using the Hls.Events.MANIFEST_PARSED event.
If HLS is not supported in the browser, we’ve checked if the video element can play the application/vnd.apple.mpegurl MIME type natively. If it can, we’ve set the src attribute to the M3U8 URL and played the video once the metadata is loaded using the loadedmetadata event.
You can copy and paste this code into a new HTML file and replace the M3U8 URL with your own URL to test it out. Note that if you’re using a self-hosted HLS.js file instead of the CDN, you’ll need to adjust the file path accordingly.