8K IPTV Player<\/title>\r\n\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/hls.js@latest\"><\/script>\r\n\r\n<style>\r\n*{\r\n box-sizing:border-box;\r\n}\r\n\r\nbody{\r\n margin:0;\r\n background:#05090d;\r\n color:#fff;\r\n font-family:Arial,Helvetica,sans-serif;\r\n}\r\n\r\n.player-page{\r\n max-width:1400px;\r\n margin:auto;\r\n padding:30px 18px 50px;\r\n}\r\n\r\n\/* HEADER *\/\r\n.player-header{\r\n text-align:center;\r\n margin-bottom:25px;\r\n}\r\n\r\n.player-header h1{\r\n margin:0;\r\n font-size:34px;\r\n font-weight:800;\r\n letter-spacing:.5px;\r\n}\r\n\r\n.player-header h1 span{\r\n color:#d8a52d;\r\n}\r\n\r\n.player-header p{\r\n color:#8d999f;\r\n margin:8px 0 0;\r\n}\r\n\r\n\/* LOADER *\/\r\n.playlist-box{\r\n max-width:900px;\r\n margin:0 auto 28px;\r\n background:linear-gradient(145deg,#101a21,#080e13);\r\n border:1px solid rgba(216,165,45,.25);\r\n border-radius:18px;\r\n padding:22px;\r\n box-shadow:0 15px 45px rgba(0,0,0,.35);\r\n}\r\n\r\n.playlist-title{\r\n font-size:15px;\r\n font-weight:700;\r\n margin-bottom:10px;\r\n color:#ddd;\r\n}\r\n\r\n.url-row{\r\n display:flex;\r\n gap:10px;\r\n}\r\n\r\n.url-row input{\r\n flex:1;\r\n height:50px;\r\n background:#070d12;\r\n border:1px solid #30404a;\r\n border-radius:10px;\r\n padding:0 15px;\r\n color:#fff;\r\n outline:none;\r\n}\r\n\r\n.url-row input:focus{\r\n border-color:#d8a52d;\r\n}\r\n\r\n.gold-btn{\r\n height:50px;\r\n border:0;\r\n border-radius:10px;\r\n padding:0 25px;\r\n background:linear-gradient(180deg,#e3b13b,#bc8515);\r\n color:#111;\r\n font-weight:800;\r\n cursor:pointer;\r\n}\r\n\r\n.gold-btn:hover{\r\n filter:brightness(1.08);\r\n}\r\n\r\n.upload-row{\r\n margin-top:13px;\r\n text-align:center;\r\n}\r\n\r\n.upload-label{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:8px;\r\n color:#d8a52d;\r\n border:1px dashed #5b6670;\r\n padding:11px 18px;\r\n border-radius:9px;\r\n cursor:pointer;\r\n font-size:13px;\r\n}\r\n\r\n.upload-label input{\r\n display:none;\r\n}\r\n\r\n.status{\r\n text-align:center;\r\n min-height:20px;\r\n margin-top:12px;\r\n color:#8d999f;\r\n font-size:13px;\r\n}\r\n\r\n\/* PLAYER *\/\r\n.video-wrapper{\r\n max-width:1100px;\r\n margin:0 auto 28px;\r\n background:#000;\r\n border-radius:16px;\r\n overflow:hidden;\r\n border:1px solid #202e35;\r\n box-shadow:0 15px 50px rgba(0,0,0,.5);\r\n}\r\n\r\n#video{\r\n display:block;\r\n width:100%;\r\n height:auto;\r\n min-height:300px;\r\n max-height:650px;\r\n background:#000;\r\n}\r\n\r\n\/* CONTROLS AREA *\/\r\n.player-info{\r\n padding:13px 16px;\r\n background:#0b1319;\r\n border-top:1px solid #202e35;\r\n}\r\n\r\n#currentChannel{\r\n font-size:16px;\r\n font-weight:700;\r\n}\r\n\r\n#currentGroup{\r\n color:#78858c;\r\n font-size:12px;\r\n margin-top:4px;\r\n}\r\n\r\n\/* SEARCH *\/\r\n.library{\r\n max-width:1200px;\r\n margin:auto;\r\n}\r\n\r\n.library-tools{\r\n display:flex;\r\n gap:10px;\r\n margin-bottom:14px;\r\n}\r\n\r\n#search{\r\n flex:1;\r\n height:46px;\r\n background:#0b151c;\r\n border:1px solid #2c3d46;\r\n color:white;\r\n border-radius:10px;\r\n padding:0 14px;\r\n outline:none;\r\n}\r\n\r\n#search:focus{\r\n border-color:#d8a52d;\r\n}\r\n\r\n#category{\r\n width:220px;\r\n background:#0b151c;\r\n border:1px solid #2c3d46;\r\n color:#fff;\r\n border-radius:10px;\r\n padding:0 12px;\r\n outline:none;\r\n}\r\n\r\n\/* CHANNELS *\/\r\n.channels{\r\n display:grid;\r\n grid-template-columns:repeat(auto-fill,minmax(180px,1fr));\r\n gap:12px;\r\n}\r\n\r\n.channel{\r\n background:linear-gradient(145deg,#111d24,#091117);\r\n border:1px solid #24353e;\r\n border-radius:13px;\r\n overflow:hidden;\r\n transition:.2s;\r\n}\r\n\r\n.channel:hover{\r\n border-color:#d8a52d;\r\n transform:translateY(-2px);\r\n}\r\n\r\n.channel-logo{\r\n height:105px;\r\n background:#070c10;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n}\r\n\r\n.channel-logo img{\r\n width:72px;\r\n height:72px;\r\n object-fit:contain;\r\n}\r\n\r\n.channel-content{\r\n padding:10px;\r\n}\r\n\r\n.channel-name{\r\n font-size:13px;\r\n font-weight:700;\r\n white-space:nowrap;\r\n overflow:hidden;\r\n text-overflow:ellipsis;\r\n}\r\n\r\n.channel-group{\r\n font-size:11px;\r\n color:#78858c;\r\n margin-top:4px;\r\n white-space:nowrap;\r\n overflow:hidden;\r\n text-overflow:ellipsis;\r\n}\r\n\r\n.play-channel{\r\n width:100%;\r\n height:34px;\r\n margin-top:9px;\r\n border:0;\r\n border-radius:7px;\r\n background:#d8a52d;\r\n color:#111;\r\n font-weight:800;\r\n cursor:pointer;\r\n}\r\n\r\n.empty{\r\n grid-column:1\/-1;\r\n text-align:center;\r\n padding:50px;\r\n color:#75828a;\r\n}\r\n\r\n\/* RESPONSIVE *\/\r\n@media(max-width:700px){\r\n\r\n .player-page{\r\n padding:20px 10px 40px;\r\n }\r\n\r\n .player-header h1{\r\n font-size:27px;\r\n }\r\n\r\n .url-row{\r\n flex-direction:column;\r\n }\r\n\r\n .url-row .gold-btn{\r\n width:100%;\r\n }\r\n\r\n #video{\r\n min-height:220px;\r\n }\r\n\r\n .library-tools{\r\n flex-direction:column;\r\n }\r\n\r\n #category{\r\n width:100%;\r\n height:46px;\r\n }\r\n\r\n .channels{\r\n grid-template-columns:repeat(2,1fr);\r\n gap:8px;\r\n }\r\n\r\n .channel-logo{\r\n height:85px;\r\n }\r\n\r\n .channel-logo img{\r\n width:55px;\r\n height:55px;\r\n }\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div class=\"player-page\">\r\n\r\n <div class=\"player-header\">\r\n <h1><span>8K<\/span> IPTV PLAYER<\/h1>\r\n <p>Load your M3U playlist and start watching<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"playlist-box\">\r\n\r\n <div class=\"playlist-title\">\r\n M3U PLAYLIST URL\r\n <\/div>\r\n\r\n <div class=\"url-row\">\r\n <input\r\n type=\"text\"\r\n id=\"m3uUrl\"\r\n placeholder=\"https:\/\/example.com\/playlist.m3u\"\r\n >\r\n\r\n <button class=\"gold-btn\" id=\"loadUrl\">\r\n LOAD PLAYLIST\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"upload-row\">\r\n\r\n <label class=\"upload-label\">\r\n \ud83d\udcc1 Upload M3U File\r\n\r\n <input\r\n type=\"file\"\r\n id=\"m3uFile\"\r\n accept=\".m3u,.m3u8,.txt\"\r\n >\r\n\r\n <\/label>\r\n\r\n <\/div>\r\n\r\n <div class=\"status\" id=\"status\"><\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n <div class=\"video-wrapper\">\r\n\r\n <video\r\n id=\"video\"\r\n controls\r\n playsinline\r\n preload=\"metadata\">\r\n <\/video>\r\n\r\n <div class=\"player-info\">\r\n\r\n <div id=\"currentChannel\">\r\n No channel selected\r\n <\/div>\r\n\r\n <div id=\"currentGroup\">\r\n Load a playlist to start\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n <div class=\"library\">\r\n\r\n <div class=\"library-tools\">\r\n\r\n <input\r\n id=\"search\"\r\n type=\"text\"\r\n placeholder=\"\ud83d\udd0e Search channels...\"\r\n >\r\n\r\n <select id=\"category\">\r\n <option value=\"ALL\">\r\n All Categories\r\n <\/option>\r\n <\/select>\r\n\r\n <\/div>\r\n\r\n <div\r\n id=\"channels\"\r\n class=\"channels\">\r\n\r\n <div class=\"empty\">\r\n Load an M3U playlist to display channels.\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<script>\r\n\r\nlet playlist = [];\r\n\r\nlet hls = null;\r\n\r\nconst video = document.getElementById(\"video\");\r\n\r\nconst statusBox =\r\n document.getElementById(\"status\");\r\n\r\nconst channelsBox =\r\n document.getElementById(\"channels\");\r\n\r\nconst category =\r\n document.getElementById(\"category\");\r\n\r\nconst search =\r\n document.getElementById(\"search\");\r\n\r\nconst currentChannel =\r\n document.getElementById(\"currentChannel\");\r\n\r\nconst currentGroup =\r\n document.getElementById(\"currentGroup\");\r\n\r\n\r\n\/* =========================\r\n PARSE M3U\r\n========================= *\/\r\n\r\nfunction parseM3U(text){\r\n\r\n const lines =\r\n text.replace(\/\\r\/g,\"\").split(\"\\n\");\r\n\r\n const result = [];\r\n\r\n let info = null;\r\n\r\n for(let line of lines){\r\n\r\n line = line.trim();\r\n\r\n if(!line)\r\n continue;\r\n\r\n\r\n if(line.startsWith(\"#EXTINF\")){\r\n\r\n const comma =\r\n line.indexOf(\",\");\r\n\r\n const attributes =\r\n comma >= 0\r\n ? line.substring(0,comma)\r\n : line;\r\n\r\n const name =\r\n comma >= 0\r\n ? line.substring(comma+1).trim()\r\n : \"Unknown Channel\";\r\n\r\n\r\n function getAttribute(name){\r\n\r\n const regex =\r\n new RegExp(\r\n name + '=\"([^\"]*)\"',\r\n \"i\"\r\n );\r\n\r\n const match =\r\n attributes.match(regex);\r\n\r\n return match\r\n ? match[1]\r\n : \"\";\r\n }\r\n\r\n\r\n info = {\r\n\r\n name:\r\n name ||\r\n getAttribute(\"tvg-name\") ||\r\n \"Unknown\",\r\n\r\n logo:\r\n getAttribute(\"tvg-logo\"),\r\n\r\n group:\r\n getAttribute(\"group-title\") ||\r\n \"Other\"\r\n\r\n };\r\n\r\n }\r\n\r\n else if(\r\n !line.startsWith(\"#\") &&\r\n info\r\n ){\r\n\r\n result.push({\r\n\r\n name:info.name,\r\n\r\n logo:info.logo,\r\n\r\n group:info.group,\r\n\r\n url:line\r\n\r\n });\r\n\r\n info = null;\r\n\r\n }\r\n\r\n }\r\n\r\n return result;\r\n}\r\n\r\n\r\n\/* =========================\r\n LOAD URL\r\n========================= *\/\r\n\r\ndocument\r\n.getElementById(\"loadUrl\")\r\n.addEventListener(\"click\",async()=>{\r\n\r\n const url =\r\n document\r\n .getElementById(\"m3uUrl\")\r\n .value\r\n .trim();\r\n\r\n\r\n if(!url){\r\n\r\n showStatus(\r\n \"Please enter an M3U URL.\",\r\n true\r\n );\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n showStatus(\r\n \"Loading playlist...\"\r\n );\r\n\r\n\r\n try{\r\n\r\n const response =\r\n await fetch(url);\r\n\r\n\r\n if(!response.ok){\r\n\r\n throw new Error(\r\n \"Server returned HTTP \" +\r\n response.status\r\n );\r\n\r\n }\r\n\r\n\r\n const text =\r\n await response.text();\r\n\r\n\r\n loadPlaylist(text);\r\n\r\n }\r\n\r\n catch(error){\r\n\r\n showStatus(\r\n \"Could not load playlist: \" +\r\n error.message,\r\n true\r\n );\r\n\r\n }\r\n\r\n});\r\n\r\n\r\n\/* =========================\r\n LOAD FILE\r\n========================= *\/\r\n\r\ndocument\r\n.getElementById(\"m3uFile\")\r\n.addEventListener(\"change\",event=>{\r\n\r\n const file =\r\n event.target.files[0];\r\n\r\n\r\n if(!file)\r\n return;\r\n\r\n\r\n showStatus(\r\n \"Reading playlist...\"\r\n );\r\n\r\n\r\n const reader =\r\n new FileReader();\r\n\r\n\r\n reader.onload = e => {\r\n\r\n loadPlaylist(\r\n e.target.result\r\n );\r\n\r\n };\r\n\r\n\r\n reader.onerror = () => {\r\n\r\n showStatus(\r\n \"Could not read file.\",\r\n true\r\n );\r\n\r\n };\r\n\r\n\r\n reader.readAsText(file);\r\n\r\n});\r\n\r\n\r\n\/* =========================\r\n LOAD PLAYLIST\r\n========================= *\/\r\n\r\nfunction loadPlaylist(text){\r\n\r\n const parsed =\r\n parseM3U(text);\r\n\r\n\r\n if(!parsed.length){\r\n\r\n showStatus(\r\n \"No channels found. Make sure this is a valid M3U playlist.\",\r\n true\r\n );\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n playlist = parsed;\r\n\r\n\r\n buildCategories();\r\n\r\n renderChannels();\r\n\r\n\r\n showStatus(\r\n playlist.length +\r\n \" channels loaded.\"\r\n );\r\n\r\n}\r\n\r\n\r\n\/* =========================\r\n CATEGORIES\r\n========================= *\/\r\n\r\nfunction buildCategories(){\r\n\r\n category.innerHTML =\r\n '<option value=\"ALL\">All Categories<\/option>';\r\n\r\n\r\n const groups =\r\n [...new Set(\r\n playlist.map(\r\n channel =>\r\n channel.group\r\n )\r\n )].sort();\r\n\r\n\r\n groups.forEach(group=>{\r\n\r\n const option =\r\n document.createElement(\r\n \"option\"\r\n );\r\n\r\n option.value = group;\r\n\r\n option.textContent = group;\r\n\r\n category.appendChild(\r\n option\r\n );\r\n\r\n });\r\n\r\n}\r\n\r\n\r\n\/* =========================\r\n RENDER\r\n========================= *\/\r\n\r\nfunction renderChannels(){\r\n\r\n const query =\r\n search.value\r\n .toLowerCase()\r\n .trim();\r\n\r\n\r\n const selectedCategory =\r\n category.value;\r\n\r\n\r\n const filtered =\r\n playlist.filter(channel=>{\r\n\r\n const matchesSearch =\r\n channel.name\r\n .toLowerCase()\r\n .includes(query);\r\n\r\n\r\n const matchesCategory =\r\n selectedCategory === \"ALL\" ||\r\n channel.group === selectedCategory;\r\n\r\n\r\n return (\r\n matchesSearch &&\r\n matchesCategory\r\n );\r\n\r\n });\r\n\r\n\r\n channelsBox.innerHTML = \"\";\r\n\r\n\r\n if(!filtered.length){\r\n\r\n channelsBox.innerHTML =\r\n '<div class=\"empty\">No channels found.<\/div>';\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n filtered.forEach(channel=>{\r\n\r\n const card =\r\n document.createElement(\r\n \"div\"\r\n );\r\n\r\n card.className =\r\n \"channel\";\r\n\r\n\r\n const logo =\r\n document.createElement(\r\n \"div\"\r\n );\r\n\r\n logo.className =\r\n \"channel-logo\";\r\n\r\n\r\n const img =\r\n document.createElement(\r\n \"img\"\r\n );\r\n\r\n\r\n img.src =\r\n channel.logo ||\r\n \"https:\/\/via.placeholder.com\/100?text=TV\";\r\n\r\n\r\n img.onerror = () => {\r\n\r\n img.src =\r\n \"https:\/\/via.placeholder.com\/100?text=TV\";\r\n\r\n };\r\n\r\n\r\n logo.appendChild(img);\r\n\r\n\r\n const content =\r\n document.createElement(\r\n \"div\"\r\n );\r\n\r\n content.className =\r\n \"channel-content\";\r\n\r\n\r\n const name =\r\n document.createElement(\r\n \"div\"\r\n );\r\n\r\n name.className =\r\n \"channel-name\";\r\n\r\n name.textContent =\r\n channel.name;\r\n\r\n\r\n const group =\r\n document.createElement(\r\n \"div\"\r\n );\r\n\r\n group.className =\r\n \"channel-group\";\r\n\r\n group.textContent =\r\n channel.group;\r\n\r\n\r\n const button =\r\n document.createElement(\r\n \"button\"\r\n );\r\n\r\n button.className =\r\n \"play-channel\";\r\n\r\n button.textContent =\r\n \"\u25b6 PLAY\";\r\n\r\n\r\n button.onclick = () => {\r\n\r\n playChannel(channel);\r\n\r\n };\r\n\r\n\r\n content.appendChild(name);\r\n\r\n content.appendChild(group);\r\n\r\n content.appendChild(button);\r\n\r\n\r\n card.appendChild(logo);\r\n\r\n card.appendChild(content);\r\n\r\n\r\n channelsBox.appendChild(card);\r\n\r\n });\r\n\r\n}\r\n\r\n\r\n\/* =========================\r\n PLAY CHANNEL\r\n========================= *\/\r\n\r\nfunction playChannel(channel){\r\n\r\n currentChannel.textContent =\r\n channel.name;\r\n\r\n currentGroup.textContent =\r\n channel.group;\r\n\r\n\r\n if(hls){\r\n\r\n hls.destroy();\r\n\r\n hls = null;\r\n\r\n }\r\n\r\n\r\n video.pause();\r\n\r\n video.removeAttribute(\r\n \"src\"\r\n );\r\n\r\n\r\n const url =\r\n channel.url;\r\n\r\n\r\n \/*\r\n HLS\r\n *\/\r\n\r\n if(\r\n url.includes(\".m3u8\") &&\r\n Hls.isSupported()\r\n ){\r\n\r\n hls =\r\n new Hls({\r\n enableWorker:true\r\n });\r\n\r\n\r\n hls.loadSource(url);\r\n\r\n hls.attachMedia(video);\r\n\r\n\r\n hls.on(\r\n Hls.Events.MANIFEST_PARSED,\r\n ()=>{\r\n video.play().catch(()=>{});\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n \/*\r\n Native HLS\r\n Safari \/ supported browsers\r\n *\/\r\n\r\n else if(\r\n video.canPlayType(\r\n \"application\/vnd.apple.mpegurl\"\r\n )\r\n ){\r\n\r\n video.src = url;\r\n\r\n video.play().catch(()=>{});\r\n\r\n }\r\n\r\n\r\n \/*\r\n Normal video\r\n *\/\r\n\r\n else{\r\n\r\n video.src = url;\r\n\r\n video.play().catch(()=>{\r\n\r\n showStatus(\r\n \"This stream format cannot be played by your browser.\",\r\n true\r\n );\r\n\r\n });\r\n\r\n }\r\n\r\n\r\n window.scrollTo({\r\n top:0,\r\n behavior:\"smooth\"\r\n });\r\n\r\n}\r\n\r\n\r\n\/* =========================\r\n SEARCH\r\n========================= *\/\r\n\r\nsearch.addEventListener(\r\n \"input\",\r\n renderChannels\r\n);\r\n\r\n\r\ncategory.addEventListener(\r\n \"change\",\r\n renderChannels\r\n);\r\n\r\n\r\n\/* =========================\r\n STATUS\r\n========================= *\/\r\n\r\nfunction showStatus(\r\n message,\r\n error=false\r\n){\r\n\r\n statusBox.textContent =\r\n message;\r\n\r\n statusBox.style.color =\r\n error\r\n ? \"#ff6666\"\r\n : \"#8d999f\";\r\n\r\n}\r\n\r\n\r\n\/* =========================\r\n SAVE URL\r\n========================= *\/\r\n\r\nconst saved =\r\n localStorage.getItem(\r\n \"8k_m3u_url\"\r\n );\r\n\r\n\r\nif(saved){\r\n\r\n document\r\n .getElementById(\"m3uUrl\")\r\n .value = saved;\r\n\r\n}\r\n\r\n\r\ndocument\r\n.getElementById(\"m3uUrl\")\r\n.addEventListener(\r\n \"change\",\r\n function(){\r\n\r\n localStorage.setItem(\r\n \"8k_m3u_url\",\r\n this.value\r\n );\r\n\r\n }\r\n);\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>8K IPTV Player 8K IPTV PLAYER Load your M3U playlist and start watching M3U PLAYLIST URL LOAD PLAYLIST \ud83d\udcc1 Upload M3U File No channel selected Load a playlist to start All Categories Load an M3U playlist to display channels.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6031","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/8kiptv.org\/service\/wp-json\/wp\/v2\/pages\/6031","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/8kiptv.org\/service\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/8kiptv.org\/service\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/8kiptv.org\/service\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/8kiptv.org\/service\/wp-json\/wp\/v2\/comments?post=6031"}],"version-history":[{"count":4,"href":"https:\/\/8kiptv.org\/service\/wp-json\/wp\/v2\/pages\/6031\/revisions"}],"predecessor-version":[{"id":6035,"href":"https:\/\/8kiptv.org\/service\/wp-json\/wp\/v2\/pages\/6031\/revisions\/6035"}],"wp:attachment":[{"href":"https:\/\/8kiptv.org\/service\/wp-json\/wp\/v2\/media?parent=6031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\n8K IPTV Player<\/title>\r\n\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/hls.js@latest\"><\/script>\r\n\r\n<style>\r\n*{\r\n box-sizing:border-box;\r\n}\r\n\r\nbody{\r\n margin:0;\r\n background:#05090d;\r\n color:#fff;\r\n font-family:Arial,Helvetica,sans-serif;\r\n}\r\n\r\n.player-page{\r\n max-width:1400px;\r\n margin:auto;\r\n padding:30px 18px 50px;\r\n}\r\n\r\n\/* HEADER *\/\r\n.player-header{\r\n text-align:center;\r\n margin-bottom:25px;\r\n}\r\n\r\n.player-header h1{\r\n margin:0;\r\n font-size:34px;\r\n font-weight:800;\r\n letter-spacing:.5px;\r\n}\r\n\r\n.player-header h1 span{\r\n color:#d8a52d;\r\n}\r\n\r\n.player-header p{\r\n color:#8d999f;\r\n margin:8px 0 0;\r\n}\r\n\r\n\/* LOADER *\/\r\n.playlist-box{\r\n max-width:900px;\r\n margin:0 auto 28px;\r\n background:linear-gradient(145deg,#101a21,#080e13);\r\n border:1px solid rgba(216,165,45,.25);\r\n border-radius:18px;\r\n padding:22px;\r\n box-shadow:0 15px 45px rgba(0,0,0,.35);\r\n}\r\n\r\n.playlist-title{\r\n font-size:15px;\r\n font-weight:700;\r\n margin-bottom:10px;\r\n color:#ddd;\r\n}\r\n\r\n.url-row{\r\n display:flex;\r\n gap:10px;\r\n}\r\n\r\n.url-row input{\r\n flex:1;\r\n height:50px;\r\n background:#070d12;\r\n border:1px solid #30404a;\r\n border-radius:10px;\r\n padding:0 15px;\r\n color:#fff;\r\n outline:none;\r\n}\r\n\r\n.url-row input:focus{\r\n border-color:#d8a52d;\r\n}\r\n\r\n.gold-btn{\r\n height:50px;\r\n border:0;\r\n border-radius:10px;\r\n padding:0 25px;\r\n background:linear-gradient(180deg,#e3b13b,#bc8515);\r\n color:#111;\r\n font-weight:800;\r\n cursor:pointer;\r\n}\r\n\r\n.gold-btn:hover{\r\n filter:brightness(1.08);\r\n}\r\n\r\n.upload-row{\r\n margin-top:13px;\r\n text-align:center;\r\n}\r\n\r\n.upload-label{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:8px;\r\n color:#d8a52d;\r\n border:1px dashed #5b6670;\r\n padding:11px 18px;\r\n border-radius:9px;\r\n cursor:pointer;\r\n font-size:13px;\r\n}\r\n\r\n.upload-label input{\r\n display:none;\r\n}\r\n\r\n.status{\r\n text-align:center;\r\n min-height:20px;\r\n margin-top:12px;\r\n color:#8d999f;\r\n font-size:13px;\r\n}\r\n\r\n\/* PLAYER *\/\r\n.video-wrapper{\r\n max-width:1100px;\r\n margin:0 auto 28px;\r\n background:#000;\r\n border-radius:16px;\r\n overflow:hidden;\r\n border:1px solid #202e35;\r\n box-shadow:0 15px 50px rgba(0,0,0,.5);\r\n}\r\n\r\n#video{\r\n display:block;\r\n width:100%;\r\n height:auto;\r\n min-height:300px;\r\n max-height:650px;\r\n background:#000;\r\n}\r\n\r\n\/* CONTROLS AREA *\/\r\n.player-info{\r\n padding:13px 16px;\r\n background:#0b1319;\r\n border-top:1px solid #202e35;\r\n}\r\n\r\n#currentChannel{\r\n font-size:16px;\r\n font-weight:700;\r\n}\r\n\r\n#currentGroup{\r\n color:#78858c;\r\n font-size:12px;\r\n margin-top:4px;\r\n}\r\n\r\n\/* SEARCH *\/\r\n.library{\r\n max-width:1200px;\r\n margin:auto;\r\n}\r\n\r\n.library-tools{\r\n display:flex;\r\n gap:10px;\r\n margin-bottom:14px;\r\n}\r\n\r\n#search{\r\n flex:1;\r\n height:46px;\r\n background:#0b151c;\r\n border:1px solid #2c3d46;\r\n color:white;\r\n border-radius:10px;\r\n padding:0 14px;\r\n outline:none;\r\n}\r\n\r\n#search:focus{\r\n border-color:#d8a52d;\r\n}\r\n\r\n#category{\r\n width:220px;\r\n background:#0b151c;\r\n border:1px solid #2c3d46;\r\n color:#fff;\r\n border-radius:10px;\r\n padding:0 12px;\r\n outline:none;\r\n}\r\n\r\n\/* CHANNELS *\/\r\n.channels{\r\n display:grid;\r\n grid-template-columns:repeat(auto-fill,minmax(180px,1fr));\r\n gap:12px;\r\n}\r\n\r\n.channel{\r\n background:linear-gradient(145deg,#111d24,#091117);\r\n border:1px solid #24353e;\r\n border-radius:13px;\r\n overflow:hidden;\r\n transition:.2s;\r\n}\r\n\r\n.channel:hover{\r\n border-color:#d8a52d;\r\n transform:translateY(-2px);\r\n}\r\n\r\n.channel-logo{\r\n height:105px;\r\n background:#070c10;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n}\r\n\r\n.channel-logo img{\r\n width:72px;\r\n height:72px;\r\n object-fit:contain;\r\n}\r\n\r\n.channel-content{\r\n padding:10px;\r\n}\r\n\r\n.channel-name{\r\n font-size:13px;\r\n font-weight:700;\r\n white-space:nowrap;\r\n overflow:hidden;\r\n text-overflow:ellipsis;\r\n}\r\n\r\n.channel-group{\r\n font-size:11px;\r\n color:#78858c;\r\n margin-top:4px;\r\n white-space:nowrap;\r\n overflow:hidden;\r\n text-overflow:ellipsis;\r\n}\r\n\r\n.play-channel{\r\n width:100%;\r\n height:34px;\r\n margin-top:9px;\r\n border:0;\r\n border-radius:7px;\r\n background:#d8a52d;\r\n color:#111;\r\n font-weight:800;\r\n cursor:pointer;\r\n}\r\n\r\n.empty{\r\n grid-column:1\/-1;\r\n text-align:center;\r\n padding:50px;\r\n color:#75828a;\r\n}\r\n\r\n\/* RESPONSIVE *\/\r\n@media(max-width:700px){\r\n\r\n .player-page{\r\n padding:20px 10px 40px;\r\n }\r\n\r\n .player-header h1{\r\n font-size:27px;\r\n }\r\n\r\n .url-row{\r\n flex-direction:column;\r\n }\r\n\r\n .url-row .gold-btn{\r\n width:100%;\r\n }\r\n\r\n #video{\r\n min-height:220px;\r\n }\r\n\r\n .library-tools{\r\n flex-direction:column;\r\n }\r\n\r\n #category{\r\n width:100%;\r\n height:46px;\r\n }\r\n\r\n .channels{\r\n grid-template-columns:repeat(2,1fr);\r\n gap:8px;\r\n }\r\n\r\n .channel-logo{\r\n height:85px;\r\n }\r\n\r\n .channel-logo img{\r\n width:55px;\r\n height:55px;\r\n }\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div class=\"player-page\">\r\n\r\n <div class=\"player-header\">\r\n <h1><span>8K<\/span> IPTV PLAYER<\/h1>\r\n <p>Load your M3U playlist and start watching<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"playlist-box\">\r\n\r\n <div class=\"playlist-title\">\r\n M3U PLAYLIST URL\r\n <\/div>\r\n\r\n <div class=\"url-row\">\r\n <input\r\n type=\"text\"\r\n id=\"m3uUrl\"\r\n placeholder=\"https:\/\/example.com\/playlist.m3u\"\r\n >\r\n\r\n <button class=\"gold-btn\" id=\"loadUrl\">\r\n LOAD PLAYLIST\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"upload-row\">\r\n\r\n <label class=\"upload-label\">\r\n \ud83d\udcc1 Upload M3U File\r\n\r\n <input\r\n type=\"file\"\r\n id=\"m3uFile\"\r\n accept=\".m3u,.m3u8,.txt\"\r\n >\r\n\r\n <\/label>\r\n\r\n <\/div>\r\n\r\n <div class=\"status\" id=\"status\"><\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n <div class=\"video-wrapper\">\r\n\r\n <video\r\n id=\"video\"\r\n controls\r\n playsinline\r\n preload=\"metadata\">\r\n <\/video>\r\n\r\n <div class=\"player-info\">\r\n\r\n <div id=\"currentChannel\">\r\n No channel selected\r\n <\/div>\r\n\r\n <div id=\"currentGroup\">\r\n Load a playlist to start\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n <div class=\"library\">\r\n\r\n <div class=\"library-tools\">\r\n\r\n <input\r\n id=\"search\"\r\n type=\"text\"\r\n placeholder=\"\ud83d\udd0e Search channels...\"\r\n >\r\n\r\n <select id=\"category\">\r\n <option value=\"ALL\">\r\n All Categories\r\n <\/option>\r\n <\/select>\r\n\r\n <\/div>\r\n\r\n <div\r\n id=\"channels\"\r\n class=\"channels\">\r\n\r\n <div class=\"empty\">\r\n Load an M3U playlist to display channels.\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<script>\r\n\r\nlet playlist = [];\r\n\r\nlet hls = null;\r\n\r\nconst video = document.getElementById(\"video\");\r\n\r\nconst statusBox =\r\n document.getElementById(\"status\");\r\n\r\nconst channelsBox =\r\n document.getElementById(\"channels\");\r\n\r\nconst category =\r\n document.getElementById(\"category\");\r\n\r\nconst search =\r\n document.getElementById(\"search\");\r\n\r\nconst currentChannel =\r\n document.getElementById(\"currentChannel\");\r\n\r\nconst currentGroup =\r\n document.getElementById(\"currentGroup\");\r\n\r\n\r\n\/* =========================\r\n PARSE M3U\r\n========================= *\/\r\n\r\nfunction parseM3U(text){\r\n\r\n const lines =\r\n text.replace(\/\\r\/g,\"\").split(\"\\n\");\r\n\r\n const result = [];\r\n\r\n let info = null;\r\n\r\n for(let line of lines){\r\n\r\n line = line.trim();\r\n\r\n if(!line)\r\n continue;\r\n\r\n\r\n if(line.startsWith(\"#EXTINF\")){\r\n\r\n const comma =\r\n line.indexOf(\",\");\r\n\r\n const attributes =\r\n comma >= 0\r\n ? line.substring(0,comma)\r\n : line;\r\n\r\n const name =\r\n comma >= 0\r\n ? line.substring(comma+1).trim()\r\n : \"Unknown Channel\";\r\n\r\n\r\n function getAttribute(name){\r\n\r\n const regex =\r\n new RegExp(\r\n name + '=\"([^\"]*)\"',\r\n \"i\"\r\n );\r\n\r\n const match =\r\n attributes.match(regex);\r\n\r\n return match\r\n ? match[1]\r\n : \"\";\r\n }\r\n\r\n\r\n info = {\r\n\r\n name:\r\n name ||\r\n getAttribute(\"tvg-name\") ||\r\n \"Unknown\",\r\n\r\n logo:\r\n getAttribute(\"tvg-logo\"),\r\n\r\n group:\r\n getAttribute(\"group-title\") ||\r\n \"Other\"\r\n\r\n };\r\n\r\n }\r\n\r\n else if(\r\n !line.startsWith(\"#\") &&\r\n info\r\n ){\r\n\r\n result.push({\r\n\r\n name:info.name,\r\n\r\n logo:info.logo,\r\n\r\n group:info.group,\r\n\r\n url:line\r\n\r\n });\r\n\r\n info = null;\r\n\r\n }\r\n\r\n }\r\n\r\n return result;\r\n}\r\n\r\n\r\n\/* =========================\r\n LOAD URL\r\n========================= *\/\r\n\r\ndocument\r\n.getElementById(\"loadUrl\")\r\n.addEventListener(\"click\",async()=>{\r\n\r\n const url =\r\n document\r\n .getElementById(\"m3uUrl\")\r\n .value\r\n .trim();\r\n\r\n\r\n if(!url){\r\n\r\n showStatus(\r\n \"Please enter an M3U URL.\",\r\n true\r\n );\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n showStatus(\r\n \"Loading playlist...\"\r\n );\r\n\r\n\r\n try{\r\n\r\n const response =\r\n await fetch(url);\r\n\r\n\r\n if(!response.ok){\r\n\r\n throw new Error(\r\n \"Server returned HTTP \" +\r\n response.status\r\n );\r\n\r\n }\r\n\r\n\r\n const text =\r\n await response.text();\r\n\r\n\r\n loadPlaylist(text);\r\n\r\n }\r\n\r\n catch(error){\r\n\r\n showStatus(\r\n \"Could not load playlist: \" +\r\n error.message,\r\n true\r\n );\r\n\r\n }\r\n\r\n});\r\n\r\n\r\n\/* =========================\r\n LOAD FILE\r\n========================= *\/\r\n\r\ndocument\r\n.getElementById(\"m3uFile\")\r\n.addEventListener(\"change\",event=>{\r\n\r\n const file =\r\n event.target.files[0];\r\n\r\n\r\n if(!file)\r\n return;\r\n\r\n\r\n showStatus(\r\n \"Reading playlist...\"\r\n );\r\n\r\n\r\n const reader =\r\n new FileReader();\r\n\r\n\r\n reader.onload = e => {\r\n\r\n loadPlaylist(\r\n e.target.result\r\n );\r\n\r\n };\r\n\r\n\r\n reader.onerror = () => {\r\n\r\n showStatus(\r\n \"Could not read file.\",\r\n true\r\n );\r\n\r\n };\r\n\r\n\r\n reader.readAsText(file);\r\n\r\n});\r\n\r\n\r\n\/* =========================\r\n LOAD PLAYLIST\r\n========================= *\/\r\n\r\nfunction loadPlaylist(text){\r\n\r\n const parsed =\r\n parseM3U(text);\r\n\r\n\r\n if(!parsed.length){\r\n\r\n showStatus(\r\n \"No channels found. Make sure this is a valid M3U playlist.\",\r\n true\r\n );\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n playlist = parsed;\r\n\r\n\r\n buildCategories();\r\n\r\n renderChannels();\r\n\r\n\r\n showStatus(\r\n playlist.length +\r\n \" channels loaded.\"\r\n );\r\n\r\n}\r\n\r\n\r\n\/* =========================\r\n CATEGORIES\r\n========================= *\/\r\n\r\nfunction buildCategories(){\r\n\r\n category.innerHTML =\r\n '<option value=\"ALL\">All Categories<\/option>';\r\n\r\n\r\n const groups =\r\n [...new Set(\r\n playlist.map(\r\n channel =>\r\n channel.group\r\n )\r\n )].sort();\r\n\r\n\r\n groups.forEach(group=>{\r\n\r\n const option =\r\n document.createElement(\r\n \"option\"\r\n );\r\n\r\n option.value = group;\r\n\r\n option.textContent = group;\r\n\r\n category.appendChild(\r\n option\r\n );\r\n\r\n });\r\n\r\n}\r\n\r\n\r\n\/* =========================\r\n RENDER\r\n========================= *\/\r\n\r\nfunction renderChannels(){\r\n\r\n const query =\r\n search.value\r\n .toLowerCase()\r\n .trim();\r\n\r\n\r\n const selectedCategory =\r\n category.value;\r\n\r\n\r\n const filtered =\r\n playlist.filter(channel=>{\r\n\r\n const matchesSearch =\r\n channel.name\r\n .toLowerCase()\r\n .includes(query);\r\n\r\n\r\n const matchesCategory =\r\n selectedCategory === \"ALL\" ||\r\n channel.group === selectedCategory;\r\n\r\n\r\n return (\r\n matchesSearch &&\r\n matchesCategory\r\n );\r\n\r\n });\r\n\r\n\r\n channelsBox.innerHTML = \"\";\r\n\r\n\r\n if(!filtered.length){\r\n\r\n channelsBox.innerHTML =\r\n '<div class=\"empty\">No channels found.<\/div>';\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n filtered.forEach(channel=>{\r\n\r\n const card =\r\n document.createElement(\r\n \"div\"\r\n );\r\n\r\n card.className =\r\n \"channel\";\r\n\r\n\r\n const logo =\r\n document.createElement(\r\n \"div\"\r\n );\r\n\r\n logo.className =\r\n \"channel-logo\";\r\n\r\n\r\n const img =\r\n document.createElement(\r\n \"img\"\r\n );\r\n\r\n\r\n img.src =\r\n channel.logo ||\r\n \"https:\/\/via.placeholder.com\/100?text=TV\";\r\n\r\n\r\n img.onerror = () => {\r\n\r\n img.src =\r\n \"https:\/\/via.placeholder.com\/100?text=TV\";\r\n\r\n };\r\n\r\n\r\n logo.appendChild(img);\r\n\r\n\r\n const content =\r\n document.createElement(\r\n \"div\"\r\n );\r\n\r\n content.className =\r\n \"channel-content\";\r\n\r\n\r\n const name =\r\n document.createElement(\r\n \"div\"\r\n );\r\n\r\n name.className =\r\n \"channel-name\";\r\n\r\n name.textContent =\r\n channel.name;\r\n\r\n\r\n const group =\r\n document.createElement(\r\n \"div\"\r\n );\r\n\r\n group.className =\r\n \"channel-group\";\r\n\r\n group.textContent =\r\n channel.group;\r\n\r\n\r\n const button =\r\n document.createElement(\r\n \"button\"\r\n );\r\n\r\n button.className =\r\n \"play-channel\";\r\n\r\n button.textContent =\r\n \"\u25b6 PLAY\";\r\n\r\n\r\n button.onclick = () => {\r\n\r\n playChannel(channel);\r\n\r\n };\r\n\r\n\r\n content.appendChild(name);\r\n\r\n content.appendChild(group);\r\n\r\n content.appendChild(button);\r\n\r\n\r\n card.appendChild(logo);\r\n\r\n card.appendChild(content);\r\n\r\n\r\n channelsBox.appendChild(card);\r\n\r\n });\r\n\r\n}\r\n\r\n\r\n\/* =========================\r\n PLAY CHANNEL\r\n========================= *\/\r\n\r\nfunction playChannel(channel){\r\n\r\n currentChannel.textContent =\r\n channel.name;\r\n\r\n currentGroup.textContent =\r\n channel.group;\r\n\r\n\r\n if(hls){\r\n\r\n hls.destroy();\r\n\r\n hls = null;\r\n\r\n }\r\n\r\n\r\n video.pause();\r\n\r\n video.removeAttribute(\r\n \"src\"\r\n );\r\n\r\n\r\n const url =\r\n channel.url;\r\n\r\n\r\n \/*\r\n HLS\r\n *\/\r\n\r\n if(\r\n url.includes(\".m3u8\") &&\r\n Hls.isSupported()\r\n ){\r\n\r\n hls =\r\n new Hls({\r\n enableWorker:true\r\n });\r\n\r\n\r\n hls.loadSource(url);\r\n\r\n hls.attachMedia(video);\r\n\r\n\r\n hls.on(\r\n Hls.Events.MANIFEST_PARSED,\r\n ()=>{\r\n video.play().catch(()=>{});\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n \/*\r\n Native HLS\r\n Safari \/ supported browsers\r\n *\/\r\n\r\n else if(\r\n video.canPlayType(\r\n \"application\/vnd.apple.mpegurl\"\r\n )\r\n ){\r\n\r\n video.src = url;\r\n\r\n video.play().catch(()=>{});\r\n\r\n }\r\n\r\n\r\n \/*\r\n Normal video\r\n *\/\r\n\r\n else{\r\n\r\n video.src = url;\r\n\r\n video.play().catch(()=>{\r\n\r\n showStatus(\r\n \"This stream format cannot be played by your browser.\",\r\n true\r\n );\r\n\r\n });\r\n\r\n }\r\n\r\n\r\n window.scrollTo({\r\n top:0,\r\n behavior:\"smooth\"\r\n });\r\n\r\n}\r\n\r\n\r\n\/* =========================\r\n SEARCH\r\n========================= *\/\r\n\r\nsearch.addEventListener(\r\n \"input\",\r\n renderChannels\r\n);\r\n\r\n\r\ncategory.addEventListener(\r\n \"change\",\r\n renderChannels\r\n);\r\n\r\n\r\n\/* =========================\r\n STATUS\r\n========================= *\/\r\n\r\nfunction showStatus(\r\n message,\r\n error=false\r\n){\r\n\r\n statusBox.textContent =\r\n message;\r\n\r\n statusBox.style.color =\r\n error\r\n ? \"#ff6666\"\r\n : \"#8d999f\";\r\n\r\n}\r\n\r\n\r\n\/* =========================\r\n SAVE URL\r\n========================= *\/\r\n\r\nconst saved =\r\n localStorage.getItem(\r\n \"8k_m3u_url\"\r\n );\r\n\r\n\r\nif(saved){\r\n\r\n document\r\n .getElementById(\"m3uUrl\")\r\n .value = saved;\r\n\r\n}\r\n\r\n\r\ndocument\r\n.getElementById(\"m3uUrl\")\r\n.addEventListener(\r\n \"change\",\r\n function(){\r\n\r\n localStorage.setItem(\r\n \"8k_m3u_url\",\r\n this.value\r\n );\r\n\r\n }\r\n);\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>8K IPTV Player 8K IPTV PLAYER Load your M3U playlist and start watching M3U PLAYLIST URL LOAD PLAYLIST \ud83d\udcc1 Upload M3U File No channel selected Load a playlist to start All Categories Load an M3U playlist to display channels.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6031","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/8kiptv.org\/service\/wp-json\/wp\/v2\/pages\/6031","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/8kiptv.org\/service\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/8kiptv.org\/service\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/8kiptv.org\/service\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/8kiptv.org\/service\/wp-json\/wp\/v2\/comments?post=6031"}],"version-history":[{"count":4,"href":"https:\/\/8kiptv.org\/service\/wp-json\/wp\/v2\/pages\/6031\/revisions"}],"predecessor-version":[{"id":6035,"href":"https:\/\/8kiptv.org\/service\/wp-json\/wp\/v2\/pages\/6031\/revisions\/6035"}],"wp:attachment":[{"href":"https:\/\/8kiptv.org\/service\/wp-json\/wp\/v2\/media?parent=6031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}