Simple m3u8 player in HTML

In today’s digital landscape, streaming video content has become an integral part of user experience on the web. Whether it’s for educational purposes, entertainment, or live events, providing a seamless way to play video is essential. One popular format for streaming video is the M3U8 playlist format, which is commonly used with HLS (HTTP Live Streaming). In this blog post, we will walk through the steps to create a simple M3U8 video player using HTML, CSS, and JavaScript.

What is M3U8?

M3U8 is a file format that contains a playlist of multimedia files. It is typically used for streaming video over the internet. This format is widely supported across various devices and platforms, making it a go-to choice for developers looking to implement video streaming solutions.

Benefits of Using M3U8:

Adaptive Bitrate Streaming: Automatically adjusts the quality of the video based on the user’s bandwidth, providing a better viewing experience.
Cross-Platform Compatibility: Works seamlessly across different browsers and devices.
Live Streaming Support: Enables the streaming of live events.

Project Overview

In this project, we will create a simple web page that allows users to input an M3U8 URL and play the video directly in their browser. We will use the following technologies:

HTML for the structure of our web page.
CSS for styling.
JavaScript to handle video playback using the HLS.js library.

Setting Up the HTML Structure

First, we’ll create a simple HTML structure. This includes an input field for the M3U8 URL, a button to load the video, and a video player to display the content.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>M3U8 Video Player</title>
    <style>
        /* CSS styles */
    </style>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
</head>
<body>
    <div class="container">
        <h1>M3U8 Video Player</h1>
        <input type="text" id="m3u8-url" placeholder="Enter M3U8 URL" />
        <button id="load-btn">Load Video</button>
        <video id="video-player" controls></video>
    </div>
    <script>
        // JavaScript for video playback
    </script>
</body>
</html>

Styling with CSS

Next, let’s add some basic styling to make our player visually appealing. We will center our elements, add padding, and style the video player.

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 20px;
}
.container {
    max-width: 600px;
    margin: auto;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
    text-align: center;
}
input {
    width: calc(100% - 22px);
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
}
button {
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
}
button:hover {
    background-color: #0056b3;
}
video {
    width: 100%;
    margin-top: 20px;
    border-radius: 4px;
    background: black;
}

Implementing Video Playback with JavaScript

Now, let’s write the JavaScript that will enable the video playback functionality. We will use the HLS.js library, which is specifically designed for handling M3U8 streams in browsers that do not natively support HLS.

document.getElementById('load-btn').addEventListener('click', function() {
    const url = document.getElementById('m3u8-url').value;
    const videoPlayer = document.getElementById('video-player');

    if (url) {
        if (Hls.isSupported()) {
            const hls = new Hls();
            hls.loadSource(url);
            hls.attachMedia(videoPlayer);
            hls.on(Hls.Events.MANIFEST_PARSED, function() {
                videoPlayer.play();
            });
        } else if (videoPlayer.canPlayType('application/vnd.apple.mpegurl')) {
            // For Safari
            videoPlayer.src = url;
            videoPlayer.addEventListener('loadedmetadata', function() {
                videoPlayer.play();
            });
        } else {
            alert('Your browser does not support M3U8 playback.');
        }
    } else {
        alert('Please enter a valid M3U8 URL.');
    }
});

How It Works

User Input: The user enters an M3U8 URL in the input field and clicks the “Load Video” button.
HLS.js Integration: The script checks if the HLS.js library is supported by the browser.
Video Loading: If supported, it creates an instance of HLS, loads the provided URL, and attaches it to the video player.
Playback: Once the video manifest is parsed, playback begins automatically. If the browser is Safari, it handles the stream directly using the native capabilities.

Conclusion

Congratulations! You have successfully created a simple yet functional M3U8 video player using HTML, CSS, and JavaScript. This player can handle adaptive streaming, making it suitable for various scenarios, such as live broadcasts or video-on-demand services.

Future Enhancements

To take this project further, consider implementing features like:

Error Handling: Provide more robust feedback for different types of errors (e.g., network issues).
Styling Improvements: Enhance the user interface with modern design principles.
Playlist Support: Allow users to input multiple M3U8 URLs and switch between them seamlessly.

With these enhancements, you can create a more versatile and user-friendly video streaming application. Happy coding!

For code you can visit my github repo:

https://github.com/saurav-z/m3u8-video-player.git

TrachitZ - Youtube

These are some recent videos in my YouTube channel. You can visit my channel to watch similar videos.