Multi Tab Video Streaming Samehadaku

Yosh, kali ini saya akan membagikan bagaimana cara membuat Multi Tab Video Streaming seperti Web Samehadaku.

Multi Tab Samehadaku ini mempunyai fitur pergantian server, mode gelap, dan tombol bagikan sekaligus bookmark. Langsung saja cara nya dibawah.

Multi Tab Video Streaming Samehadaku
Dagruel

Cara Membuat Multi Tab Video Streaming seperti Web Samehadaku

Tambahkan CSS

.DagTo{margin-bottom:25px;width:100%;background:#f1f1f1;border-radius:2px;padding-bottom:0}.DagPlaArea{width:100%;transition:width .2s;position:relative;padding:0;overflow:hidden;line-height:20px}#server{overflow:hidden;margin-bottom:14px;text-align:center;margin-top:14px}#server ul{list-style-type:none;margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}#server ul li{display:inline-block;margin:5px;width:23%}#server .DagPlayOpt{width:auto;background:#fff;padding:7px 12px;font-weight:400;cursor:pointer;font-size:14px;border-radius:2px}#server .DagPlayOpt.on{color:#fff;background:#3c97f3}.DagPlayOpt.on:before{content:'';background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8,5.14V19.14L19,12.14L8,5.14Z' fill='%23fff'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center center;display:inline-block;padding-right:6px;vertical-align:middle;min-width:20px;min-height:20px}.video-content{background:#000;overflow:hidden}#embed_holder,#pembed,.video-content{position:relative}#pembed{max-width:100%;height:0;padding-bottom:56.25%}.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}@keyframes playerload{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}@-webkit-keyframes playerload{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}#embed_holder embed,#embed_holder iframe{z-index:1;position:absolute;border:none;width:100%;height:100%;top:0;left:0;margin:0;padding:0}.video-nav{text-align:center;position:relative;overflow:hidden;font-size:.85em;color:#888;padding:7px 10px}.itemleft{overflow:hidden;font-weight:300;float:left}.itemleft .icon{display:inline-block;margin-right:5px;padding:5px;font-size:14px;cursor:pointer}.itemleft .icon.turnedOff{color:#fff;z-index:999999;position:relative;background:#fff}.itemleft .icon svg,span.light:before{color:#3c97f3;vertical-align:middle;border-radius:10px}.itemleft .icon svg{width:24px;height:24px;font-size:14px;padding:4px;margin-right:3px}.itemleft .icon span{line-height:20px;color:#222d34;font-weight:400}span.light:before{content:'';background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M11,18H13V15.87C14.73,15.43 16,13.86 16,12A4,4 0 0,0 12,8A4,4 0 0,0 8,12C8,13.86 9.27,15.43 11,15.87V18Z' fill='%233c97f3'/%3E%3C/svg%3E") center/20px no-repeat;display:inline-block;margin-right:7px;min-width:20px;min-height:20px}.PlayShare{overflow:hidden;width:100%;padding-top:0;line-height:20px}#shadow,.PlayShare.None{display:none;transition:.5s}.ShareSection{overflow:hidden;padding:7px}.ShareSection b{color:#222d34;font-size:16px;margin-right:5px;line-height:22px;border-right:2px solid #fff;padding-right:10px;font-weight:500}.ShareSection b,.sosmed,.sosmed a{display:inline-block}.sosmed a{width:auto;height:auto;font-size:12px;color:#fff!important;border-radius:4px;background:#444;margin:6px;padding:3px 15px}a.shrFB{background:#1877f2}a.shrTW{background:#1da1f2}#shadow{position:fixed;left:0;top:0;bottom:0;background:rgba(0,0,0,.93);width:100%;height:100%;z-index:1;transition:all .5s ease}.DaBlock,.DaNone{display:none;transition:.5s}.DaBlock{display:block!important}

Tambahkan HTML

<div id="shadow"></div>
<div class="DagPlaArea DagTo">
  <div class="server_option">
    <div id="server">
      <ul>
        <!--Server1-->
        <!--Server2-->
        <!--Server3-->
      </ul>
    </div>
  </div>
  <div id="PlayVideo" class="video-content">
    <div id="embed_holder">
      <div class="player-embed" id="pembed">
        <div class="playerload"></div>
        <div id="player_embed">
          <div class="pframe"><iframe src="" frameborder="0" marginwidth="0" marginheight="0" scrolling="NO" width="100%" height="100%" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" name="search_iframe"></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="video-nav">
    <div class="itemleft">
      <div class="icon DagLight">
        <svg viewBox="0 0 24 24">
          <path fill="currentColor"
            d="M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M11,18H13V15.87C14.73,15.43 16,13.86 16,12A4,4 0 0,0 12,8A4,4 0 0,0 8,12C8,13.86 9.27,15.43 11,15.87V18Z" />
        </svg>
        <span>Turn on Light</span>
      </div>
      <div class="icon DagShre">
        <svg viewBox="0 0 24 24">
          <path fill="currentColor"
            d="M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z" />
        </svg>
        <span>Bagikan</span>
      </div>
      <div class="icon DagCom">
        <svg viewBox="0 0 24 24">
          <path fill="currentColor" d="M12,23A1,1 0 0,1 11,22V19H7A2,2 0 0,1 5,17V7A2,2 0 0,1 7,5H21A2,2 0 0,1 23,7V17A2,2 0 0,1 21,19H16.9L13.2,22.71C13,22.89 12.76,23 12.5,23H12M3,15H1V3A2,2 0 0,1 3,1H19V3H3V15Z" />
        </svg>
        <a href="#comments"><span>Komentar</span></a>
      </div>
      <div class="icon DagMark">
        <svg viewBox="0 0 24 24">
          <path fill="currentColor" d="M12 20C16.4 20 20 16.4 20 12S16.4 4 12 4 4 7.6 4 12 7.6 20 12 20M12 2C17.5 2 22 6.5 22 12S17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2M12.5 7V13H7V11.5H11V7H12.5Z" />
        </svg>
        <span id='bookmark-this'>Tonton Nanti</span>
      </div>
    </div>
  </div>
</div>
<div class="PlayShare DagTo DaNone">
  <div class="ShareSection">
    <center> <b>Bagikan ke teman Anda!</b>
      <div class="sosmed">
        <a href="Link Facebook" class='shrFB'><span>Facebook</span></a>
        <a href="Link Twitter" class='shrTW'><span>Twiter</span></a>
      </div>
    </center>
  </div>
</div>
Ganti tulisan <!--Server1--> dan seterusnya dengan HTML dibawah, sisanya ganti sesuai keterangan nya.
<li>
  <a href="Link Embed Youtube atau Lainnya" target="search_iframe">
    <div id="DagPlay-1" class="DagPlayOpt" onclick="openPlay(event, 'Server1')"><span>Server 1</span> </div>
  </a>
</li>
pada tag DagPlay-1 dan Server1 ganti angka nya menjadi 2 jika menambahkan sever kedua maupun ketigan menjadi angka 3 contoh dibawah.
<li>
  <a href="Link Embed Youtube atau Lainnya" target="search_iframe">
    <div id="DagPlay-1" class="DagPlayOpt" onclick="openPlay(event, 'Server1')"><span>Server 1</span> </div>
  </a>
</li>
<li>
  <a href="Link Embed Youtube atau Lainnya" target="search_iframe">
    <div id="DagPlay-2" class="DagPlayOpt" onclick="openPlay(event, 'Server2')"><span>Server 2</span> </div>
  </a>
</li>
<li>
  <a href="Link Embed Youtube atau Lainnya" target="search_iframe">
    <div id="DagPlay-3" class="DagPlayOpt" onclick="openPlay(event, 'Server3')"><span>Server 3</span> </div>
  </a>
</li>

Tambahkan Javascript

Javascript dibawah menggunakan jQuery jadi harus pasang JQuery nya dulu.

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script>
//<![CDATA[
  function openPlay(e,t){var a,n;for(n=document.getElementsByClassName("DagPlayOpt"),a=0;a<n.length;a++)n[a].className=n[a].className.replace(" on","");e.currentTarget.className+=" on"}document.getElementById("DagPlay-1").click(),$(document).ready(function(){$("#shadow").css("height",$(document).height()).hide(),$(".DagLight").click(function(){$("#shadow").toggle(),$("#shadow").is(":hidden")?$(this).html("<span class='light'>Turn on Light</span>").removeClass("turnedOff"):$(this).html("<span class='light'>Turn off Light</span>").addClass("turnedOff")}),$(".DagShre").click(function(){$(".DaNone").toggleClass("DaBlock")})}),jQuery(function(e){e("#bookmark-this").click(function(t){var a=document.title,n=window.location.href;if("addToHomescreen"in window&&addToHomescreen.isCompatible)addToHomescreen({autostart:!1,startDelay:0}).show(!0);else if(/CriOS\//.test(navigator.userAgent))alert('To add to Home Screen, launch this website in Safari, then tap the Share button and select "Add to Home Screen".');else if(window.sidebar&&window.sidebar.addPanel)window.sidebar.addPanel(a,n,"");else{if(window.sidebar&&/Firefox/i.test(navigator.userAgent)&&!Object.fromEntries||window.opera&&window.print)return e(this).attr({href:n,title:a,rel:"sidebar"}).off(t),!0;window.external&&"AddFavorite"in window.external?window.external.AddFavorite(n,a):alert("Press "+(/Mac/i.test(navigator.platform)?"Cmd":"Ctrl")+"+D to bookmark this page.")}return!1})});
//]]>
</script>

Selesai sudah, silahkan cek apakah kalian berhasil menggunakan nya. Sampai Jumpa lain waktu.

https://samehadaku.vip/
https://www.thewebflash.com/

Comments