Live TV Player: Easily add live streaming to websites

Live TV streaming is very popular in today's digital age. If you want to add live channels to your website or blog, then this Live TV Player tool is for you. It easily supports HLS (HTTP Live Streaming) format, which works on modern browsers and mobiles.

Why do you need a Live TV Player?

✅ You can broadcast online TV channels.
✅ You can add live events or sports streaming to your website.
✅ Simple and responsive design.
✅ Streaming is easier using the HLS.js library.

Features:

🔹 Responsive design – Will work equally well on mobile and desktop.
🔹 Loading indicator – Will keep the user updated when the stream is loading.
🔹 Error handling – If the stream is not loading, it will notify the user.
🔹 Simple code – Very easy to customize.

Live TV Player Source Code

Below is the complete HTML, CSS and JavaScript code that you can use directly on your website: Click Here To download this code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live TV Player</title>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<style>
body { text-align: center; font-family: Arial, sans-serif; background-color: #f4f4f4; padding: 20px; }
.container { max-width: 900px; margin: auto; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
h2 { color: #333; }
.buttons { margin: 15px 0; }
.buttons button { padding: 10px 15px; margin: 5px; font-size: 16px; cursor: pointer; border: none; border-radius: 5px; background-color: #007bff; color: white; transition: 0.3s; }
.buttons button:hover { background-color: #0056b3; }
#videoContainer { display: none; margin-top: 20px; }
video { width: 100%; max-width: 800px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
#loading { display: none; font-size: 18px; color: #007bff; margin-top: 10px; }
</style>
</head>
<body>
<div class="container">
<h2>Live TV Channels</h2>
<div class="buttons">
<button onclick="playStream('https://example.com/stream1.m3u8')">Channel 1</button>
<button onclick="playStream('https://example.com/stream2.m3u8')">Channel 2</button>
<button onclick="playStream('https://example.com/stream3.m3u8')">Channel 3</button>
</div>
<div id="loading">Loading Stream...</div>
<div id="videoContainer">
<video id="video" controls></video>
</div>
</div>
<script>
function playStream(url) {
const video = document.getElementById('video');
const container = document.getElementById('videoContainer');
const loading = document.getElementById('loading');

container.style.display = 'none';
loading.style.display = 'block';

if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(url);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
loading.style.display = 'none';
container.style.display = 'block';
video.play();
});
hls.on(Hls.Events.ERROR, function () {
alert("Error loading the stream. Please try again later.");
loading.style.display = 'none';
});
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = url;
video.play();
loading.style.display = 'none';
container.style.display = 'block';
} else {
alert("Your browser does not support this stream.");
loading.style.display = 'none';
}
}
</script>
</body>
</html>

How to use?

1️⃣ Save the above code as an HTML file.
2️⃣ Insert your own stream link (m3u8 URL).
3️⃣ Upload to the website and watch the live stream! 🎥

Conclusion

This Live TV Player code is a great way to easily add live streaming to your website. It is fully responsive and supports HLS.js technology. If you want more customizations with the Live TV Player, don't forget to let us know in the comments! 😊

👉 Give us your feedback! How did you like this project? What changes need to be made to make it better? Your feedback will inspire us! 🚀

Live TV Player: Easily add live streaming to websites