<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>US IPTV Channels</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1 class="text-center my-5">US IPTV Channels</h1>
<div class="row">
<div class="col-12">
<video id="hls-player" controls playsinline class="w-100" poster="https://source.unsplash.com/featured/?television">
<source src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8" type="application/x-mpegURL">
</video>
</div>
</div>
<div class="row">
<div class="col-12 my-5">
<h2>Channel List</h2>
<ul id="channel-list">
<li>Loading channels...</li>
</ul>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
<!-- Hls.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
// Create a new instance of hls.js player
var hlsPlayer = new Hls();
// Attach the video element to hls.js player
hlsPlayer.attachMedia(document.getElementById('hls-player'));
// Load the m3u8 playlist
hlsPlayer.loadSource('https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8');
// When the hls.js player is ready, start playback
hlsPlayer.on(Hls.Events.MANIFEST_PARSED, function() {
document.getElementById('hls-player').play();
});
// Fetch the channel list and populate the ul element
fetch('https://iptv-org.github.io/iptv/countries/us.m3u')
.then(response => response.text())
.then(data => {
// Remove the "Loading channels..." li element
document.getElementById('channel-list').innerHTML = '';
// Parse the m3u playlist
const channels = data.split('#EXTINF:-1');
// Loop through each channel and append a new li element to the ul element
for (let i = 1; i < channels.length; i++) {
const channel = channels[i].split('\n')[0];
const li = document.createElement('li');
li.innerText = channel;
document.getElementById('channel-list').appendChild(li);
}
})
.catch(error => {
// Display an error message in the ul element
document.getElementById('channel-list').innerHTML = `<li>Error: ${error.message}</li>`;
});
</script>
</body>
</html>
