Membuat Multi Tab Streaming versi Samehadaku

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.

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.

Artikel Terkait

9 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>

Emoticon

  • teler
    13 Juli 2022 19.48
    Profil: https://www.blogger.com/profile/09951441794935262228
    min ini memang tidak menggunakan css kah?
    • Шош. Сом
      13 Juli 2022 20.13
      Profil: https://www.blogger.com/profile/11131198046075365419
      sorry lupa, sdh di tambahkan
    • teler
      13 Juli 2022 20.18
      Profil: https://www.blogger.com/profile/09951441794935262228
      terimakasih berhasil di pasang min
  • Berkas Kita
    13 Juli 2022 19.52
    Profil: https://www.blogger.com/profile/05392949523370725401
    demo nya invited only bang..
    • Шош. Сом
      13 Juli 2022 20.13
      Profil: https://www.blogger.com/profile/11131198046075365419
      sdh
  • teler
    13 Juli 2022 21.22
    Profil: https://www.blogger.com/profile/09951441794935262228
    min ternyata gak bisa di pasang di ninestream. mungkin karena ninestream tidak menggunakan halaman episode
  • teler
    14 Juli 2022 08.38
    Profil: https://www.blogger.com/profile/09951441794935262228
    min gimana cara kalau pindah server frame iklannya ke load lagi
    • Шош. Сом
      21 Juli 2022 16.45
      Profil: https://www.blogger.com/profile/11131198046075365419
      sudah di update silahkan ganti script nya dengan yang baru.
  • Royale Scans ID
    4 Agustus 2022 12.03
    Profil: https://www.blogger.com/profile/11907097503416968996
    Kak, Multi Tap Streaming Versi KumaStream, BisaKah