Cara Membuat Multi Tab Video Streaming Ala Samehadaku
HiiroDev - Hallo temen - temen di artikel kali ini saya akan membagikan cara membuat video player streaming dengan menggunakan multi tab dan tampilannya ala - ala seperti samehadaku gitu.
Oke langsung aja ke Langkah - langkahnya :
Cara Membuat Multi Tab Video Streaming Seperti Website Samehadaku
1. Letakkan css di bawah ini tepat di atas kode </style>
.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;
}
#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;
position: relative;
}
#embed_holder {
position: relative;
}
#pembed {
position: relative;
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)
}
100% {
transform: rotate(360deg)
}
}
@-webkit-keyframes playerload {
0% {
-webkit-transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(360deg)
}
}
#embed_holder iframe,
#embed_holder embed {
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 {
width: 24px;
height: 24px;
font-size: 14px;
border-radius: 10px;
color: #3c97f3;
margin-right: 3px;
padding: 4px;
vertical-align: middle;
}
.itemleft .icon span {
line-height: 20px;
color: #222d34;
font-weight: 400;
}
span.light:before {
content: '';
background: transparent 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;
color: #3c97f3;
display: inline-block;
margin-right: 7px;
min-width: 20px;
min-height: 20px;
vertical-align: middle;
border-radius: 10px;
}
.PlayShare {
overflow: hidden;
width: 100%;
padding-top: 0;
line-height: 20px;
}
.PlayShare.None {
display: none;
transition: .5s;
}
.ShareSection {
overflow: hidden;
padding: 7px;
}
.ShareSection b {
color: #222d34;
font-size: 16px;
margin-right: 5px;
display: inline-block;
line-height: 22px;
border-right: 2px solid #fff;
padding-right: 10px;
font-weight: 500;
}
.sosmed {
display: inline-block;
}
.sosmed a {
width: auto;
height: auto;
font-size: 12px;
padding: 3px;
color: #fff !important;
display: inline-block;
border-radius: 4px;
background: #444;
margin: 6px;
padding-right: 15px;
padding-left: 15px;
}
a.shrFB {
background: #1877f2;
}
a.shrTW {
background: #1da1f2;
}
#shadow {
display: none;
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;
}
.DaNone {
display: none;
transition: .5s;
}
.DaBlock {
display: block !important;
transition: .5s;
}2. Lalu letakkan Kode JQuery di bawah ini tepat di atas kode <head>
<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>3. Setelah itu letakkan kode Javascript dibawah ini tepat di atas kode </head>
<script>
//Script Untuk Server
function openPlay(evt, playName) {
var i, tablinks;
tablinks = document.getElementsByClassName("DagPlayOpt");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" on", "");
}
evt.currentTarget.className += " on";
}
document.getElementById("DagPlay-1").click(); //Video Default Yang muncul ganti angka 1 dengan angka server berapa yang akan muncul duluan
//jQuery Script untuk Tombol Lampu dan Tombol Bagikan
$(document).ready(function() {
$("#shadow").css("height", $(document).height()).hide();
$(".DagLight").click(function() {
$("#shadow").toggle();
if ($("#shadow").is(":hidden")) {
$(this).html("<span class='light'>Turn on Light</span>").removeClass("turnedOff")
} else {
$(this).html("<span class='light'>Turn off Light</span>").addClass("turnedOff")
}
});
$(".DagShre").click(function() {
$(".DaNone").toggleClass("DaBlock")
})
});
//jQuery Script untuk Tab Bookmark
jQuery(function($) {
$('#bookmark-this').click(function(e) {
var bookmarkTitle = document.title;
var bookmarkUrl = window.location.href;
if ('addToHomescreen' in window && addToHomescreen.isCompatible) {
// Mobile browsers
addToHomescreen({
autostart: false,
startDelay: 0
}).show(true);
} else if (/CriOS\//.test(navigator.userAgent)) {
// Chrome for iOS
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) {
// Firefox <=22
window.sidebar.addPanel(bookmarkTitle, bookmarkUrl, '');
} else if ((window.sidebar && /Firefox/i.test(navigator.userAgent) && !Object.fromEntries) || (window.opera && window.print)) {
// Firefox 23-62 and Opera <=14
$(this).attr({
href: bookmarkUrl,
title: bookmarkTitle,
rel: 'sidebar'
}).off(e);
return true;
} else if (window.external && ('AddFavorite' in window.external)) {
// IE Favorites
window.external.AddFavorite(bookmarkUrl, bookmarkTitle);
} else {
// Other browsers (Chrome, Safari, Firefox 63+, Opera 15+)
alert('Press ' + (/Mac/i.test(navigator.platform) ? 'Cmd' : 'Ctrl') + '+D to bookmark this page.');
}
return false;
});
});
</script>4. Yang terakhir buat sebuah postingan lalu atur ke mode HTML, setelah itu copypaste-kan kode di bawah ini
<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>Mungkin itu saja yang bisa saya share, jangan lupa pantengin trus web mimin ya, akan ada artikel - artikel menarik buat kalian..
Posting Komentar untuk "Cara Membuat Multi Tab Video Streaming Ala Samehadaku"