Real Iptv Pro Web Player Real Iptv Pro Web Player Home About Contact Categories Category 1 Category 2 Category 3 Load File Your browser does not support the video tag. Customize the theme according to your requirements:Script Real Iptv Pro Web Player<p><br /></p><p><div></p><p><br /></p><p> <style></p><p> body {</p><p> margin: 0;</p><p> font-family: Arial, sans-serif;</p><p> background: linear-gradient(to bottom right, #f0f0f0, #ffffff);</p><p> color: #000;</p><p> }</p><p><br /></p><p> .tbody {</p><p> margin: 0;</p><p> background-color: #ffffff;</p><p> height: auto;</p><p> width: 90%;</p><p> max-width: auto;</p><p> display: flex;</p><p> flex-direction: column;</p><p> align-items: center;</p><p> padding: 20px;</p><p> box-sizing: border-box;</p><p> border: 2px solid #cccccc;</p><p> border-radius: 12px;</p><p> box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);</p><p> transition: background-color 0.3s, color 0.3s;</p><p> }</p><p><br /></p><p> nav {</p><p> width: 100%;</p><p> background: linear-gradient(to right, #0056b3, #003d7a);</p><p> overflow: hidden;</p><p> border-bottom: 2px solid #003d7a;</p><p> margin-bottom: 20px;</p><p> }</p><p><br /></p><p> .nav-link {</p><p> float: left;</p><p> display: block;</p><p> color: #ffffff;</p><p> text-align: center;</p><p> padding: 16px 20px;</p><p> text-decoration: none;</p><p> font-size: 16px;</p><p> transition: background-color 0.3s;</p><p> }</p><p><br /></p><p> .nav-link:hover {</p><p> background-color: #003d7a;</p><p> }</p><p><br /></p><p> .dropdown {</p><p> float: left;</p><p> overflow: hidden;</p><p> }</p><p><br /></p><p> .dropdown .dropbtn {</p><p> font-size: 16px;</p><p> border: none;</p><p> outline: none;</p><p> color: white;</p><p> padding: 16px 20px;</p><p> background-color: #0056b3;</p><p> cursor: pointer;</p><p> transition: background-color 0.3s;</p><p> }</p><p><br /></p><p> .dropdown .dropbtn:hover {</p><p> background-color: #003d7a;</p><p> }</p><p><br /></p><p> .dropdown-content {</p><p> display: none;</p><p> position: absolute;</p><p> background-color: #ffffff;</p><p> min-width: 160px;</p><p> box-shadow: 0px 8px 16px rgba(0,0,0,0.2);</p><p> border-radius: 8px;</p><p> z-index: 1;</p><p> border: 1px solid #ddd;</p><p> }</p><p><br /></p><p> .dropdown-content a {</p><p> float: none;</p><p> color: black;</p><p> padding: 12px 16px;</p><p> text-decoration: none;</p><p> display: block;</p><p> text-align: left;</p><p> transition: background-color 0.3s;</p><p> }</p><p><br /></p><p> .dropdown-content a:hover {</p><p> background-color: #f0f0f0;</p><p> }</p><p><br /></p><p> .dropdown:hover .dropdown-content {</p><p> display: block;</p><p> }</p><p><br /></p><p> .dropdown:hover .dropbtn {</p><p> background-color: #003d7a;</p><p> }</p><p><br /></p><p> video {</p><p> width: 100%;</p><p> height: auto;</p><p> margin: 20px 0;</p><p> border-radius: 8px;</p><p> box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);</p><p> }</p><p><br /></p><p> .channel-list {</p><p> display: flex;</p><p> flex-wrap: wrap;</p><p> gap: 10px;</p><p> justify-content: center;</p><p> background: #ffffff;</p><p> border: 1px solid #ddd;</p><p> padding: 10px;</p><p> box-sizing: border-box;</p><p> overflow: scroll;</p><p> height: 500px;</p><p> border-radius: 8px;</p><p> box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);</p><p> }</p><p><br /></p><p> .channel-item {</p><p> display: flex;</p><p> flex-direction: column;</p><p> align-items: center;</p><p> text-decoration: none;</p><p> color: #333;</p><p> border: 1px solid gray;</p><p> border-radius: 8px;</p><p> overflow: hidden;</p><p> transition: transform 0.3s, box-shadow 0.3s;</p><p> background: #fff;</p><p> width: 80px;</p><p> height: 80px;</p><p> box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);</p><p> }</p><p><br /></p><p> .channel-item img {</p><p> width: 100%;</p><p> height: 70%;</p><p> border-radius: 10%;</p><p> object-fit: cover;</p><p> }</p><p><br /></p><p> .channel-item span {</p><p> padding: 0px;</p><p> text-align: center;</p><p> font-size: 0px;</p><p> background: transparent;</p><p> }</p><p><br /></p><p> .channel-item:hover {</p><p> transform: scale(1.05);</p><p> box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);</p><p> }</p><p><br /></p><p> input[type="file"] {</p><p> margin-bottom: 10px;</p><p> }</p><p><br /></p><p> .dropdown-btn {</p><p> background-color: #0056b3;</p><p> color: #fff;</p><p> padding: 10px 20px;</p><p> margin: 0;</p><p> font-size: 16px;</p><p> border: 2px solid #003d7a;</p><p> border-radius: 8px;</p><p> cursor: pointer;</p><p> box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);</p><p> transition: background-color 0.3s, color 0.3s;</p><p> }</p><p><br /></p><p> .dropdown-btn:hover {</p><p> background-color: #003d7a;</p><p> color: #fff;</p><p> }</p><p><br /></p><p> @media (max-width: 600px) {</p><p> .channel-item {</p><p> width: 60px;</p><p> height: 60px;</p><p> }</p><p><br /></p><p> .dropdown-btn {</p><p> padding: 8px 16px;</p><p> font-size: 14px;</p><p> }</p><p><br /></p><p> video {</p><p> margin: 5px 0;</p><p> }</p><p> }</p><p><br /></p><p> @media (max-width: 400px) {</p><p> .channel-item {</p><p> width: 50px;</p><p> height: 50px;</p><p> }</p><p><br /></p><p> .dropdown-btn {</p><p> padding: 6px 12px;</p><p> font-size: 12px;</p><p> }</p><p><br /></p><p> video {</p><p> margin: 5px 0;</p><p> }</p><p> }</p><p> </style></p><p><br /></p><p> <div class="tbody"></p><p> <nav></p><p> <a href="#" class="nav-link">Home</a></p><p> <a href="#" class="nav-link">About</a></p><p> <div class="dropdown"></p><p> <button class="dropbtn">Categories</button></p><p> <div class="dropdown-content"></p><p> <a href="#">Category 1</a></p><p> <a href="#">Category 2</a></p><p> <a href="#">Category 3</a></p><p> </div></p><p> </div></p><p> <a href="#" class="nav-link">Contact</a></p><p> </nav></p><p><br /></p><p> <h1>IPTV Player</h1></p><p> <input type="file" id="fileInput" accept=".m3u,.txt,.m3u8" /></p><p> <button class="dropdown-btn" id="loadFile">Load File</button></p><p> <video controls="" id="videoPlayer"></p><p> Your browser does not support the video tag.</p><p> </video></p><p> <div class="container1"></p><p> <div class="channel-list" id="channelList"></div></p><p> </div></p><p> </div></p><p><br /></p><p> <script></p><p> document.addEventListener('DOMContentLoaded', () => {</p><p> const videoPlayer = document.getElementById('videoPlayer');</p><p> const channelList = document.getElementById('channelList');</p><p> const fileInput = document.getElementById('fileInput');</p><p> const loadFileButton = document.getElementById('loadFile');</p><p><br /></p><p> // Default M3U URL</p><p> const defaultM3UUrl = 'https://iptv-org.github.io/iptv/languages/ara.m3u';</p><p><br /></p><p> const parseM3U = async (data) => {</p><p> const lines = data.split('\n');</p><p> const channels = [];</p><p> let channel = {};</p><p><br /></p><p> lines.forEach(line => {</p><p> if (line.startsWith('#EXTINF')) {</p><p> const nameMatch = line.match(/tvg-name="([^"]+)"/);</p><p> const logoMatch = line.match(/tvg-logo="([^"]+)"/);</p><p> </p><p> channel = {</p><p> name: nameMatch ? nameMatch[1] : 'Unknown',</p><p> logo: logoMatch ? logoMatch[1] : '',</p><p> url: null</p><p> };</p><p> } else if (line.startsWith('http')) {</p><p> if (channel) {</p><p> channel.url = line;</p><p> channels.push(channel);</p><p> }</p><p> }</p><p> });</p><p><br /></p><p> // Setup channel list</p><p> channelList.innerHTML = ''; // Clear current channels</p><p> channels.forEach(channel => {</p><p> const channelItem = document.createElement('a');</p><p> channelItem.href = '#';</p><p> channelItem.className = 'channel-item';</p><p> channelItem.innerHTML = `</p><p> ${channel.logo ? `<img src="${channel.logo}" alt="${channel.name}"/>` : `<div style="width: 100%; height: 70%; background: #ddd;"/>`}</p><p> <span>${channel.name}</span></p><p> `;</p><p> channelItem.addEventListener('click', (e) => {</p><p> e.preventDefault();</p><p> videoPlayer.src = channel.url;</p><p> videoPlayer.play(); // Play video on click</p><p> });</p><p> channelList.appendChild(channelItem);</p><p> });</p><p> };</p><p><br /></p><p> const fetchDefaultPlaylist = async () => {</p><p> try {</p><p> const response = await fetch</p><p><br /></p><p>(defaultM3UUrl);</p><p> const data = await response.text();</p><p> await parseM3U(data);</p><p> } catch (error) {</p><p> console.error('Error fetching default M3U playlist:', error);</p><p> }</p><p> };</p><p><br /></p><p> fetchDefaultPlaylist();</p><p><br /></p><p> loadFileButton.addEventListener('click', () => {</p><p> const file = fileInput.files[0];</p><p> if (file) {</p><p> const reader = new FileReader();</p><p> reader.onload = async (event) => {</p><p> const data = event.target.result;</p><p> await parseM3U(data);</p><p> };</p><p> reader.readAsText(file);</p><p> } else {</p><p> alert('Please select a file first.');</p><p> }</p><p> });</p><p> });</p><p> </script></p><p><br /> Copy
