Are you trying to play an m3u8 file in an HTML video player, but your browser doesn’t support the HLS protocol? In this tutorial, we’ll show you how to use JavaScript to play m3u8 files in any browser.
We’ll cover the basics of the HTML video element and introduce you to the HLS.js library, which makes it easy to add HLS support to your web applications. Whether you’re a beginner or an experienced developer, this tutorial has something for you. Follow along and learn how to play m3u8 files in HTML video players using JavaScript!.
I have posted many videos and articles before related to the JavaScript project, now this the something new that we are going to build.
Video Tutorial of How to play m3u8 file in html video player using JavaScript
Play m3u8 file in html video player using JavaScript | Free Source Code
To create this program (Play m3u8 file in html video player). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.
In the first place, make a HTML document with the name of index.html and paste the given codes in your HTML record. Keep in mind, you’ve to make a document with .html extension.
<!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">
<title>Play .m3u8 File in HTML5 video player</title>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Include the hls.js library -->
<!-- Create a video element -->
<video id="video" controls></video>
<!-- Use hls.js to create a player and load the .m3u8 file -->
<script>
var video = document.getElementById('video');
if(Hls.isSupported()) {
var hls = new Hls();
hls.loadSource('https://arydigital.aryzap.com/ff5f087d60a78eea3940b58f17985e49/63b2655f/v1/0183ea2408f90b8ed5941a38bc72/0183ea24302d0b8ed5941a38bc75/ARYDigitalHDh264_1080p.m3u8');
hls.attachMedia(video);
video.play();
}
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = 'https://arydigital.aryzap.com/ff5f087d60a78eea3940b58f17985e49/63b2655f/v1/0183ea2408f90b8ed5941a38bc72/0183ea24302d0b8ed5941a38bc75/ARYDigitalHDh264_1080p.m3u8';
video.addEventListener('loadedmetadata',function() {
video.play();
});
}
</script>
</body>
</html>
Second, make a CSS record with the name of style.css and paste the given codes in your CSS document. Keep in mind, you’ve to make a record with .css extension.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background: #222;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
body #video {
width: 600px;
height: 100%;
border-radius: 10px;
box-shadow:
0px 0px 10.4px rgba(0, 0, 0, 0.045),
0px 0px 25.1px rgba(0, 0, 0, 0.065),
0px 0px 47.2px rgba(0, 0, 0, 0.08),
0px 0px 84.2px rgba(0, 0, 0, 0.095),
0px 0px 157.5px rgba(0, 0, 0, 0.115),
0px 0px 377px rgba(0, 0, 0, 0.16);
}
Click on the following download button to download all source code files.
Thanks for magnificent info I was looking for this information for my mission.
Is there a way to make the player react?
When embedding a player like YouTube, width 100% and height 100%
The code as it is today is not responsive
Yes you can make player using ReactJs.
But there is also a trick to make iframe players (like Youtube) responsive. I will publish a blog soon that will explain how to make iframe responsive.