Codepelajar – Multi tab video streaming merujuk pada kemampuan untuk menonton lebih dari satu video secara bersamaan melalui tab yang berbeda di peramban web Anda. Dalamhal ini, Anda dapat membuka beberapa tab dan mengakses situs web streaming yang berbeda untuk menonton video secara paralel. Teknologi ini memungkinkan andamenikmati berbagai macam konten video tanpa harus beralih antara tab atau siti singatan.
Jenis Multi Tab Video Streaming
Kode yang akan Codepelajar bagikan kali ini terbagi menjadi 3 dimana masing-masing kode memiliki kelebihan mereka sendiri, jadi silahkan untuk menggunakan salah satu.
– Tanpa Episode dan tanpa CSS
Untuk kode kali ini dia tidak memakai CSS dan tentu ini dapat juga dipasang dihalaman tanpa perlu lagi mengedit tema, untuk kodenya dapat disalin dibawah ini:
HTML
<div id='multitab-video'>
<div id="movie-player">
<iframe src="EMBED URL VIDEO" frameborder="0" webkitAllowFullScreen="" mozallowfullscreen="" allowFullScreen="" name="search_iframe"></iframe>
</div>
<div id="server-list">
<div class="server-item" title="NAMA SERVER">
<a href="EMBED URL VIDEO" target="search_iframe">SD 360p</a>
<a href="EMBED URL VIDEO" target="search_iframe">SD 480p</a>
<a href="EMBED URL VIDEO" target="search_iframe">HD 720p</a>
<a href="EMBED URL VIDEO" target="search_iframe">HD 1080p</a>
</div>
– Tanpa Episode dan dengan CSS
Memiliki tampilan lebih responsive dan enak dipandang, kode ini memberikan pengalaman yang baik kepada pengguna jika ditempatkan pada halaman blog. Untuk kodenya dapat disalin dibawah ini:
HTML
<div id='multitab-video'>
<div id="movie-player">
<iframe src="EMBED URL VIDEO" frameborder="0" webkitAllowFullScreen="" mozallowfullscreen="" allowFullScreen="" name="search_iframe"></iframe>
</div>
<div id="server-list">
<div class="server-item" title="NAMA SERVER">
<a href="EMBED URL VIDEO" target="search_iframe">SD 360p</a>
<a href="EMBED URL VIDEO" target="search_iframe">SD 480p</a>
<a href="EMBED URL VIDEO" target="search_iframe">HD 720p</a>
<a href="EMBED URL VIDEO" target="search_iframe">HD 1080p</a>
</div>
CSS
<style type="text/css">
/*CSS Multi Tab Video */
#multitab-video{position:relative;box-sizing:border-box;margin:0 auto;line-height:2em;font-size:15px!important;width:100%}
#multitab-video #movie-player{position:relative;padding-bottom:56.25%;padding-top:1.66666666666667em;height:0}
#multitab-video #movie-player iframe{position:absolute;top:0;left:0;width:100%;height:100%}
#multitab-video #server-list{position:relative;background:#fafafa;display:block}
#multitab-video #server-list .server-item:before{content:attr(title);width:9.93333333333333em;display:inline-block;padding-left:0.933333333333333em}
.server-item{border-bottom:1px solid #c8c8cb}
#multitab-video #server-list a{color:#334;text-decoration:none;border:1px solid #443;padding:0.333333333333333em 0.666666666666667em;display:inline-block;margin:0.333333333333333em;box-sizing:border-box}
a:active{background-color:yellow}
</style>
– Dengan Episode dan CSS
Cocok untuk website anime atau film, kode ini dapat ditempatkan pada berbagai macam CMS baik Blogspot atau WordPress. Untuk kodenya dapat disalin dibawah ini:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Streaming Multi Tab</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="tabs">
<button class="tablinks" onclick="openTab(event, 'episode1')">Episode 1</button>
<button class="tablinks" onclick="openTab(event, 'episode2')">Episode 2</button>
<button class="tablinks" onclick="openTab(event, 'episode3')">Episode 3</button>
<button class="tablinks" onclick="openTab(event, 'episode4')">Episode 4</button>
<button class="tablinks" onclick="openTab(event, 'episode5')">Episode 5</button>
<button class="tablinks" onclick="openTab(event, 'episode6')">Episode 6</button>
</div>
<div id="episode1" class="tabcontent">
<h3>Episode 1</h3>
<select id="player1">
<option value="https://player2.com/episode1">Player 1</option>
<option value="https://player2.com/episode1">Player 2</option>
<option value="https://sbrapid.com/e/7zapy7l4og3p.html">Player 3</option>
</select>
<iframe id="iframe1" src="https://sbrapid.com/e/7zapy7l4og3p.html"></iframe>
</div>
<div id="episode2" class="tabcontent">
<h3>Episode 2</h3>
<select id="player2">
<option value="https://sbrapid.com/e/7zapy7l4og3p.html">Player 1</option>
<option value="https://player2.com/episode2">Player 2</option>
<option value="https://sbrapid.com/e/7zapy7l4og3p.html">Player 3</option>
</select>
<iframe id="iframe2" src="https://player1.com/episode2"></iframe>
</div>
<div id="episode3" class="tabcontent">
<h3>Episode 3</h3>
<select id="player3">
<option value="https://player1.com/episode3">Player 1</option>
<option value="https://player2.com/episode3">Player 2</option>
<option value="https://player3.com/episode3">Player 3</option>
</select>
<iframe id="iframe3" src="https://player1.com/episode3"></iframe>
</div>
<div id="episode4" class="tabcontent">
<h3>Episode 4</h3>
<select id="player4">
<option value="https://player1.com/episode4">Player 1</option>
<option value="https://player2.com/episode4">Player 2</option>
<option value="https://player3.com/4">Player 3</option>
</select>
<iframe id="iframe4" src="https://player1.com/episode4"></iframe>
</div>
<div id="episode5" class="tabcontent">
<h3>Episode 5</h3>
<select id="player5">
<option value="https://player1.com/episode5">Player 1</option>
<option value="https://player2.com/episode5">Player 2</option>
<option value="https://player3.com/episode5">Player 3</option>
</select>
<iframe id="iframe5" src="https://player1.com/episode5"></iframe>
</div>
<div id="episode6" class="tabcontent">
<h3>Episode 6</h3>
<select id="player6">
<option value="https://player1.com/episode6">Player 1</option>
<option value="https://player2.com/episode6">Player 2</option>
<option value="https://player3.com/episode6">Player 3</option>
</select>
<iframe id="iframe6" src="https://player1.com/episode6"></iframe>
</div>
</div>
<footer> by Ryushui </footer>
<script src="script.js"></script>
</body>
</html>
CSS
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.tabs {
overflow: hidden;
border: 1 solid #ccc;
background-color: #f1f1f1;
}
.tablinks {
background-color: #ddd;
float: left;
border: 1px solid #ccc;
border-right: none;
cursor: pointer;
padding: 10px;
}
.tablinks:hover {
background-color: #bbb;
}
.tabcontent {
display: none;
padding: 20px;
border: 1px solid #ccc;
border-top: none;
}
iframe {
display: block;
margin: 20px 0;
width: 100%;
height: 500px;
border: none;
}
footer{
text-align:center;
}
JavaScript
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
Cara Pemasangannya
Setiap kode memiliki cara pemasangan yang sama yaitu:
HTML
Tempelkan kode ini dipostingan atau halaman yang akan dimuat.
CSS
Pasang kode ini di atas kode ]]></b:skin> atau di atas kode </style> namun jika memakai wordpress silahkan pasang pada CSS.
JavaScript
Pasang pada bagian di atas kode </body> atau Footer.
Selesai dan silahkan tampilkan, secara otomatis script akan berjalan dan Anda dapat memuat video didalamnya.
Terimakasih sudah membaca artikel dari Codepelajar semoga bermanfaat.
Yang versi terakhir ga berubah saat di klik option/server nya