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
As you have seen on the given video tutorial of How to play m3u8 file in html video player using JavaScript,
If you are feeling bored watching the given video tutorial of How to play m3u8 file in html video player using JavaScriptthen you can copy or download the given codes below:
Play m3u8 file in html video player using JavaScript | Free Source Code
<!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>* {
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);
}
Post a Comment
How can I help you