Membuat Multi Tab Streaming versi Samehadaku

Kali ini saya akan membagikan versi remake dari postingan multi tab streaming samehadaku yang sudah pernah di posting di blog sebelumnya yaitu "Blog Dagruel".

Dalam versi remake ini terdapat penambahan fitur baru yaitu menampilkan iklan gambar dan iklan video sebelum memulai video asli. Jadi langsung saja berikut cara nya.

Memasang script

Pasang script berikut ke dalam template blogger kalian tepat nya di atas tag </body>.

<script type='text/javascript'>/*<![CDATA[*/
let settingIframe={
  ads:true,
  url:"https://www.google.com/",
  video:"https://www.w3schools.com/html/mov_bbb.mp4",
  adsImage:{
    pakai:true,
    title:"Iklan",
    gambar:"https://sasanadigital.com/wp-content/uploads/2021/05/Mengenal-4-Fase-Digital-Ads-Mulai-dari-Tayang-Hingga-Jenuh-e1620572784211.png",
    link:"https://www.google.com"
  }
};
!function(a){var b=document.querySelectorAll(".east_player_option");if(0==b.length)return!1;var e=this;this.timer,this.c=!0,b.forEach(function(c){c.addEventListener("click",function(f){var c,d,g,h="<div class='pframe'><iframe src='".concat(f.currentTarget.dataset.iframe,"' frameborder='0' marginwidth='0' marginheight='0' width='100%' height='100%' scrolling='NO' allowfullscreen='true' webkitallowfullscreen='true' mozallowfullscreen='true'/></div>");document.getElementById("player_embed").innerHTML=h,b.forEach(function(a){return a.classList.remove("on")}),f.currentTarget.classList.add("on"),e.c&&(e.c=!1,c=document.getElementById("myVideo"),d=document.getElementById("skipbtn"),g=document.getElementById("playVideo"),a.ads?(c.innerHTML="<source style='z-index:1;' src='".concat(a.video,"' type='video/mp4'/>Your browser does not support HTML5 video."),c.addEventListener("click",function(){window.open(a.url,"_blank")}),g.addEventListener("click",function(){c.onplay=function(){(function(){var a=5;this.timer=setInterval(function(){document.querySelector("#skipbtn span").innerHTML=--a,a<=0&&(clearInterval(e.timer),document.querySelector("#skipbtn span").innerHTML=">>",document.getElementById("skipbtn").disabled=!1)},1e3)})()},c.onended=function(){c.style.visibility="hidden",d.style.visibility="hidden",document.getElementById("loadingplayer").style.visibility="visible",document.getElementById("player_embed").style.visibility="visible"},c.play(),g.style.visibility="hidden",d.style.visibility="visible"}),d.addEventListener("click",function(){c.style.visibility="hidden",d.style.visibility="hidden",c.pause(),document.getElementById("loadingplayer").style.visibility="visible",document.getElementById("player_embed").style.visibility="visible"})):(c.remove(),d.remove(),document.getElementById("loadingplayer").style.visibility="visible",document.getElementById("player_embed").style.visibility="visible"))})}),document.getElementById("skipbtn").style.visibility="hidden",a.ads?(document.getElementById("loadingplayer").style.visibility="hidden",document.getElementById("player_embed").style.visibility="hidden"):(document.getElementById("loadingplayer").style.visibility="visible",document.getElementById("player_embed").style.visibility="visible"),b[0].click();var c=document.getElementById("overplay");if(a.adsImage.pakai){var d='<div class="chain" align="center"><div id="close-button" style="cursor:pointer;">Close</div><a title="'.concat(a.adsImage.title,'" href="').concat(a.adsImage.link,'" target="_blank" rel="noopener"><div class="gambarku"><img src="').concat(a.adsImage.gambar,'"></div></a></div>');c.innerHTML=d,document.getElementById("close-button").onclick=function(){return c.remove()}}else c.remove()}(settingIframe)
/*]]>*/</script>

Bagian yang di tandai silahkan kalian ganti.

key	Desc
`ads`	true jika memakai ads dengan video, false jika tidak.
`url`	link tempat iklan yang di tuju.
`video`	video iklan (harus berformat mp4 atau video tidak bisa embed youtube. Contoh di akhir link nya terdapat "`.mp4`").
`adsImage: pakai`	true jika memakai ads dengan gambar, false jika tidak.
`adsImage: title`	Judul Iklan
`adsImage: link`	link tempat iklan yang di tuju.
`adsImage: gambar`	Gambar iklan.

Memasang css

Masih di dalam template pasang css berikut di atas tag ]]></b:skin>

@keyframes playerload{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.plarea{padding:0;width:100%;-webkit-transition:width .2s;-moz-transition:width .2s;transition:width .2s}#server{overflow:hidden;margin-bottom:14px;text-align:center;margin-top:14px}#server ul{list-style:none;margin:0;padding:0}#server ul li{display:inline-block;width:23%;margin:5px}#server .east_player_option{width:auto;background:#eceff5;padding:7px 12px;font-weight:400;cursor:pointer;font-size:14px;border-radius:2px}#server .east_player_option.on{background:#30e877}.video-content{background:#000;overflow:hidden;position:relative}#overplay{position:absolute;z-index:200;width:100%;height:100%;display:flex;justify-content:center;align-items:center}#overplay .chain{width:100%;max-width:450px;margin:auto;padding-top:0}#close-button{cursor:pointer;width:30%;margin:auto;padding:6px 10px;background:red;font-size:11px;color:#fff}.gambarku img{max-width:450px;max-height:450px}#embed_holder{position:relative;z-index:102}#pembed{position:relative;max-width:100%;height:0;padding-bottom:56.25%}#playVideo{background:url(https://www.gstatic.com/images/icons/material/system/1x/play_arrow_white_48dp.png);background-repeat:no-repeat;width:50%;height:100%;position:absolute;left:0;right:0;margin:auto;background-position:center;cursor:pointer;display:block;z-index:20}#skipbtn{float:right;height:60px;position:relative;background-color:#000;background-repeat:no-repeat;border:none;cursor:pointer;overflow:hidden;outline:0;opacity:.5;color:#fff;z-index:20;margin-top:-100px;margin-right:20px;font-weight:700;padding-left:5px;padding-right:5px;font-size:16px}.playerload{width:80px;height:80px;border-radius:150px;border:15px solid #fff;border-top-color:rgba(0,0,0,.3);box-sizing:border-box;position:absolute;top:50%;left:50%;margin-top:-38px;margin-left:-38px;animation:playerload 1.2s linear infinite;-webkit-animation:playerload 1.2s linear infinite}#embed_holder embed,#embed_holder iframe{z-index:102;position:absolute;border:none;width:100%;height:100%;top:0;left:0;margin:0;padding:0}@media only screen and (max-width:920px){.plarea{width:100%}#server ul li{margin-bottom:10px;width:45%}}

Memasang html

Sekarang memasang html nya di dalam postingan.

<div class='plarea'>
  <div class='server_option'>
    <div id='server'>
      <ul>
        <li>
          <div data-iframe='https://www.youtube.com/embed/hiHwoITyuPg' class='east_player_option'>
            <span>Server 1 480p</span>
          </div>
        </li>
        <li>
          <div data-iframe='https://www.youtube.com/embed/ctcMylqea4Q' class='east_player_option'>
            <span>Server 2 720p</span>
          </div>
        </li>
        <li>
          <div data-iframe='https://www.youtube.com/embed/Bo4A4yA4HgM' class='east_player_option'>
            <span>Server 3 1080p</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class='video-content'>
    <div id='overplay'></div>
    <div id='embed_holder'>
      <div class='player-embed' id='pembed'>
        <div id='playVideo'></div>
        <video width='100%' height='auto' id='myVideo'></video>
        <button id='skipbtn' disabled='disabled'>SKIP ADS <span>5</span></button>
        <div class='playerload' id='loadingplayer'></div>
        <div id='player_embed'></div>
      </div>
    </div>
  </div>
</div>

Bagian yang di tandai adalah url iframe dan Nama server nya silahkan kalian ganti. Sampai sini sudah selesai selamat menggunakan.

Demo

Update v2

let settingIframe= {
  ads: true,
  url: "https://www.google.com/",
  video: "https://www.w3schools.com/html/mov_bbb.mp4",
  playAgain: true,
  adsImage: {
    pakai: true,
    title: "Iklan",
    gambar: "https://sasanadigital.com/wp-content/uploads/2021/05/Mengenal-4-Fase-Digital-Ads-Mulai-dari-Tayang-Hingga-Jenuh-e1620572784211.png",
    link: "https://www.google.com"
  }
};
(function(e){function i(){let e=5;this.timer=setInterval(function(){document.querySelector("#skipbtn span").innerHTML=--e,e<=0&&(clearInterval(s.timer),document.querySelector("#skipbtn span").innerHTML=">>",document.getElementById("skipbtn").disabled=!1)},1e3)}function t(){d.forEach(e=>{e.addEventListener("click",e=>{let i=`<div class='pframe'><iframe src='${e.currentTarget.dataset.iframe}' frameborder='0' marginwidth='0' marginheight='0' width='100%' height='100%' scrolling='NO' allowfullscreen='true' webkitallowfullscreen='true' mozallowfullscreen='true'/></div>`;document.getElementById("player_embed").innerHTML=i,d.forEach(e=>e.classList.remove("on")),e.currentTarget.classList.add("on"),s.c&&l(),n()})}),document.getElementById("skipbtn").style.visibility="hidden",e.ads?(document.getElementById("loadingplayer").style.visibility="hidden",document.getElementById("player_embed").style.visibility="hidden"):(document.getElementById("loadingplayer").style.visibility="visible",document.getElementById("player_embed").style.visibility="visible"),d[0].click()}function l(){s.c=!1;let t=document.getElementById("myVideo"),l=document.getElementById("skipbtn"),n=document.getElementById("playVideo");e.ads?(t.innerHTML=`<source style='z-index:1;' src='${e.video}' type='video/mp4'/>Your browser does not support HTML5 video.`,t.addEventListener("click",()=>{window.open(e.url,"_blank")}),n.addEventListener("click",()=>{t.onplay=function(){i()},t.onended=function(){t.style.visibility="hidden",l.style.visibility="hidden",document.getElementById("loadingplayer").style.visibility="visible",document.getElementById("player_embed").style.visibility="visible"},t.play(),n.style.visibility="hidden",l.style.visibility="visible"}),l.addEventListener("click",()=>{t.style.visibility="hidden",l.style.visibility="hidden",t.pause(),document.getElementById("loadingplayer").style.visibility="visible",document.getElementById("player_embed").style.visibility="visible"})):(t.remove(),l.remove(),document.getElementById("loadingplayer").style.visibility="visible",document.getElementById("player_embed").style.visibility="visible")}function n(){let i=document.getElementById("myVideo");i&&e.playAgain&&(clearInterval(s.timer),i.pause(),i.currentTime=0,document.getElementById("loadingplayer").style.visibility="hidden",document.getElementById("player_embed").style.visibility="hidden",document.querySelector("#skipbtn span").innerHTML="",document.getElementById("skipbtn").disabled=!0,document.getElementById("playVideo").style.visibility="visible",i.style.visibility="visible")}let d=document.querySelectorAll(".east_player_option");if(0==d.length)return!1;let s=this;this.timer,this.c=!0,t();let a=document.getElementById("overplay");if(e.adsImage.pakai){let i=`<div class="chain" align="center"><div id="close-button" style="cursor:pointer;">Close</div><a title="${e.adsImage.title}" href="${e.adsImage.link}" target="_blank" rel="noopener"><div class="gambarku"><img src="${e.adsImage.gambar}"></div></a></div>`;a.innerHTML=i,document.getElementById("close-button").onclick=(()=>a.remove())}else a.remove()})(settingIframe);

Pada update v2 kalian hanya perlu ganti script nya saja dengan yang baru html nya tak perlu.

Terdapat penambahan fitur memutar kembali iklan video saat ganti server video.

Beri Komentar Parse Kode

Menulis kode gunakan kode (kode harus di parse)
Menulis dalam syntax highlighter gunakan kode panjang (kode harus di-parse)
Menyisipkan gambar gunakan URL GAMBAR (ekstensi .jpg, .png, .gif, .webp, .ico)
Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.

Dayat

Membuat Multi Tab Streaming versi Samehadaku

Memasang script

Memasang css

Memasang html

Update v2

Artikel Terkait

11 komentar