Scrip html Live TV blogger

<style>

body {

  margin:0;

  font-family: Arial, sans-serif;

  background:#ffffff;

  color:#ffffff;

}

#player-container {

  position:relative;

  width:100%;

  height:220px;

  background:#000;

  border-bottom:2px solid #e5e7eb;

}

#player-frame {

  width:100%;

  height:100%;

  border:none;

}

#loading {

  position:absolute;

  top:0;left:0;

  width:100%;height:100%;

  display:flex;

  align-items:center;

  justify-content:center;

  background:#000;

  font-size:14px;

  opacity:0.8;

}

.channel-list {

  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:10px;

  padding:10px;

}

.v-item {

  background:#111827;

  padding:12px;

  border-radius:10px;

  text-align:center;

  cursor:pointer;

  transition:0.3s;

  color:#fff;

}

.v-item:hover {

  background:#22c55e;

  color:#000;

  transform:scale(1.05);

}

</style>

<div id="player-container">

  <div id="loading">🔄 Loading stream...</div>

  <iframe id="player-frame" allowfullscreen></iframe>

</div>

<div class="channel-list">

  <div class="v-item" onclick="playYT('gCNeDWCI0vo')">🌍 DW News</div>

  <div class="v-item" onclick="playYT('bNyUyrR0PHo')">📡 Al Jazeera</div>

  <div class="v-item" onclick="playYT('UBEBkz6SKTk')">📡 SRB TV</div>

  <div class="v-item" onclick="playAutoChannel('UC6yc_7U3tDizf5-x_ZonxRA')">🔴 Metro TV</div>

  <div class="v-item" onclick="playURL('https://www.cnnindonesia.com/tv/embed?ref=transmedia')">🔵 CNN Indo</div>

  <div class="v-item" onclick="playURL('https://20.detik.com/watch/livestreaming-trans7')">🔵 Trans 7</div>

  <div class="v-item" onclick="playURL('https://20.detik.com/watch/livestreaming-transtv')">🔵 Trans TV</div>

  <div class="v-item" onclick="playURL('https://sindikasi.inews.id/embed/video/YWdlbnQ9ZGVza3RvcCZ1cmw9aHR0cHMlM0ElMkYlMkZlbWJlZC5yY3RpcGx1cy5jb20lMkZsaXZlJTJGcmN0aSUyRmluZXdzaWQ=')">🔴 RCTI</div>

  <div class="v-item" onclick="playURL('https://sindikasi.inews.id/embed/video/YWdlbnQ9ZGVza3RvcCZ1cmw9aHR0cHMlM0ElMkYlMkZlbWJlZC5yY3RpcGx1cy5jb20lMkZsaXZlJTJGZ3R2JTJGaW5ld3NpZC=')">🔴 GTV</div>

  <div class="v-item" onclick="playURL('https://sindikasi.inews.id/embed/video/YWdlbnQ9ZGVza3RvcCZ1cmw9aHR0cHMlM0ElMkYlMkZlbWJlZC5yY3RpcGx1cy5jb20lMkZsaXZlJTJGbW5jdHYlMkZpbmV3c2lk')">🔴 MNCTV</div>

</div>

<script>

let player = document.getElementById("player-frame");

let loading = document.getElementById("loading");

let retryTimeout;

function showLoading(){

  loading.style.display="flex";

}

function hideLoading(){

  loading.style.display="none";

}

function autoRecover(src){

  clearTimeout(retryTimeout);

  retryTimeout = setTimeout(()=>{

    player.src = src;

  },10000);

}

function playYT(id){

  let src = "https://www.youtube.com/embed/"+id+"?autoplay=1";

  showLoading();

  player.src = src;

  autoRecover(src);

}

function playAutoChannel(channelId){

  let src = "https://www.youtube.com/embed/live_stream?channel="+channelId+"&autoplay=1";

  showLoading();

  player.src = src;

  autoRecover(src);

}

function playURL(url){

  showLoading();

  player.src = url;

  autoRecover(url);

}

player.onload = ()=>{

  hideLoading();

}

// default autoplay (Metro TV)

playAutoChannel('UC6yc_7U3tDizf5-x_ZonxRA');

</script>