Scribd
Upload
34 views6 pages

Live TV Code File by BSM

This document is an HTML template for a live TV streaming website, featuring a video player and a dynamic channel list. It includes scripts for video playback and channel loading, as well as styling for a user-friendly interface. The site allows users to watch live sports without a cable subscription and provides a visually appealing layout for channel selection.

Uploaded by

skrhtv
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
34 views6 pages

Live TV Code File by BSM

This document is an HTML template for a live TV streaming website, featuring a video player and a dynamic channel list. It includes scripts for video playback and channel loading, as well as styling for a user-friendly interface. The site allows users to watch live sports without a cable subscription and provides a visually appealing layout for channel selection.

Uploaded by

skrhtv
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

<!

DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live TV Stream</title>
<meta name="description" content="FREE LIVE TV">
<meta name="keywords" content="Watch live sports streaming online, including
football, basketball, baseball, hockey, and more. Stream your favorite sports teams
and events in HD, with no cable subscription required.">
<meta name="author" content="Live TV Stream">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="shortcut icon" type="image/x-icon"
href="https://i.postimg.cc/66FbnPJF/20241012-185622.png">

<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/plyr.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/plyr.min.js"></
script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/hls.min.js"></
script>
<meta name='google-adsense-platform-domain' content='blogspot.com' />
</head>

<body>

<!-- Video Player Section -->


<div class="video-player"> <div id="videoLoading" class="loading"> <p>Loading
video...</p> </div>

<video id="videoPlayer" controls crossorigin playsinline unmuted autoplay>


<source id="videoSource" type="application/vnd.apple.mpegurl" src=""> </video> <div
class="col-md-12">
<style>
.notice-movies{margin-
top:3px;background:#ff0000;color:white;position:relative;padding:10px;overflow:hidd
en;font-family:var(--font-secondary);border-radius:7px}.notice-
movies::before{content:'';position:absolute;border-left:17px solid var(--
black);border-bottom:17px solid var(--black);border-top:17px solid
transparent;border-right:17px solid transparent;left:98px;top:0;z-index:1}.notice-
movies::after{content:'Notice:';position:absolute;height:100%;padding:0 6px;line-
height:43px;background:Green;color:white;font-family:var(--font-primary);font-
weight:600;left:0;top:0} </style>

<center> <marquee class="notice-movies" scrollamount="4">আমাদের সাথে থাকার


জন্য ধন্যবাদ।</marquee>
</center>
</div>
</div>
<h2> CHANNEL LIST</h2>

<div id="channelLoading" class="loading"> <p>Loading channels...</p>


</div>
<div class="channel-buttons" id="channelList" style="display: none;"> <!--
Channels will be dynamically loaded here --> </div>

<script>
const video = document.getElementById('videoPlayer');
const videoLoading = document.getElementById('videoLoading');
const channelLoading = document.getElementById('channelLoading');
const channelList = document.getElementById('channelList');

// Display video loading animation


video.addEventListener('waiting', function () {
videoLoading.style.display = 'block';
});

video.addEventListener('playing', function () {
videoLoading.style.display = 'none';
});

// Load demo video when the page loads


document.addEventListener('DOMContentLoaded', function () {
const demoVideoUrl =
'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
loadVideo(demoVideoUrl);

// Fetch and load channels


loadChannels();
});

function loadVideo(sourceUrl) {
if (Hls.isSupported()) {
if (window.hls) {
window.hls.destroy();
}
var hls = new Hls();
hls.loadSource(sourceUrl);
hls.attachMedia(video);
window.hls = hls;
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = sourceUrl;
}
video.play();
}

function loadChannels() {
// Simulate delay for loading channels
setTimeout(() => {
fetch('https://raw.githubusercontent.com/blackshadow9933/JSZ/refs/
heads/main/blackshadow.m3u')
.then(response => response.text())
.then(data => {
const lines = data.split('\n');
let channels = [];
let currentChannel = {};

lines.forEach(line => {
if (line.startsWith('#EXTINF')) {
const logoMatch = line.match(/tvg-logo="(.*?)"/);
const nameMatch = line.match(/,(.*)/);
if (logoMatch && nameMatch) {
currentChannel.logo = logoMatch[1];
currentChannel.name = nameMatch[1];
}
} else if (line.startsWith('http')) {
currentChannel.url = line.trim();
channels.push(currentChannel);
currentChannel = {};
}
});

channels.forEach(channel => {
const channelButton = document.createElement('a');
channelButton.href = "#";
channelButton.classList.add('channel-link');
channelButton.setAttribute('data-link', channel.url);

const logoImg = document.createElement('img');


logoImg.src = channel.logo;
logoImg.alt = channel.name + ' Logo';

channelButton.appendChild(logoImg);
channelList.appendChild(channelButton);
});

// Display channels after loading


channelLoading.style.display = 'none';
channelList.style.display = 'flex';

// Add event listeners to channel links


document.querySelectorAll('.channel-link').forEach(function
(link) {
link.addEventListener('click', function (event) {
event.preventDefault();
const newSource = this.getAttribute('data-link');
loadVideo(newSource);
});
});
});
}, 2000); // Simulating a delay for demonstration
}
</script>

<style>
body {
font-family: 'Poppins', sans-serif;
background-color: #181818;
color: #fff;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

/* Custom Text Styling */


.custom-text {
margin-top: 20px;
text-align: center;
}

.custom-text h1 {
font-size: 2rem;
color: #4CAF50;
background-color: #222;
padding: 10px;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.video-player {
padding: 20px;
border-radius: 15px;
margin: 20px 0;
background-color: #1a1a1a;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
width: 100%;
max-width: 900px;
text-align: center;
position: sticky;
top: 0;
z-index: 1000;
}

.video-player h2 {
background-color: #4CAF50;
color: white;
padding: 10px;
border-radius: 5px;
margin-bottom: 20px;
}

.video-player video {
width: 100%;
height: auto;
border-radius: 10px;
border: 2px solid #4CAF50;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}

.loading {
font-size: 18px;
color: white;
background-color: rgba(0, 0, 0, 0.8);
padding: 10px;
border-radius: 10px;
display: block;
text-align: center;
}

.channel-list {
background-color: #2b2b2b;
padding: 20px;
border-radius: 10px;
width: 100%;
max-width: 900px;
text-align: center;
}

.channel-list h2 {
background-color: #4CAF50;
color: white;
padding: 10px;
border-radius: 5px;
margin-bottom: 20px;
}

.channel-buttons {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin-top: 20px;
}

.channel-buttons a {
background-color: #333;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
margin: 10px;
transition: background-color 0.3s ease;
text-decoration: none;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.channel-buttons a img {
width: 80px;
height: 80px;
border-radius: 50%;
}

.channel-buttons a:hover {
background-color: #4CAF50;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {


.video-player,
.channel-list {
width: 100%;
padding: 10px;
}

.channel-buttons a {
width: 80px;
height: 80px;
}

.channel-buttons a img {
width: 60px;
height: 60px;
}
}

</style>

<footer>

<div style="text-align: center;">


<span style="font-family: arial;"><span style="color: #ffffff;">©️
2024 Live
TV Stream।</span> <span style="color:sky;">All Rights Reseved</span>
</div>
</ul>
</footer>
</body>
</html>

You might also like