 |
| Tampilan Pemutar Video Popup Sederhana |
Setelah membuat progress bar dan spin loader sederhana untuk loading web, kali ini penulis tertarik untuk membuat pemutar video tetapi berupa pop-up (pemutar muncul ketika kita menekan tombol atau tautan tampa harus berpindah halaman) menggunakan JavaScript. Sebenarnya ada dua metode dalam membuat pemutar video pop-up menggunakan JavaScript ini, yaitu:
- Metode pertama, yaitu menggunakan YouTube iFrame API apabila video yang akan anda putar bersumber dari YouTube dan tampilannya dikontrol menggunakan JavaScript.
- Metode kedua, yaitu menggunakan pemutar video internal dari peramban tetapi tampilannya dikontrol menggunakan JavaScript.
Dalam membuat pemutar video ini, penulis memilih cara kedua. Kenapa memilih cara kedua? Alasannya sebagai berikut:
- Pertama, tidak membebani server anda apabila memutar video, karena berkas video akan diunduh terlebih dahulu oleh peramban client kemudian baru diputar.
- Kedua, bila menggunakan metode pertama, maka video yang akan diputar terlebih dahulu harus diunggah ke YouTube, sehingga apabila kita mau mengubah content video, maka harus menggunggah video tersebut ke YouTube dan mengubah kode untuk menautkan dengan alamat video anda di YouTube. Apabila menggunakan metode pertama, cara praktis anda tinggal mengubah nama video tersebut sesuai nama video lama dan menimpa video lama anda tanpa harus mengubah kode.
Sebenarnya kode pemutar video pop-up ini bukan murni buatan penulis,
tetapi penulis mengambil dari forum di Internet tetapi penulis ubah
sehingga lebih mudah digunakan. Tanpa panjang lebar lagi, mari kita
buat pemutar video pop-up sederhana ini...
Pertama, sisipkan kode CSS (Cascading Style Sheet) ini setelah tag <title> didalam <head>, berikut ini potongan kodenya untuk desain pemutar video pop-up:
<style>
#fade {
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
#light {
display: none;
position: absolute;
top: 50%;
left: 50%;
max-width: 640px;
max-height: 360px;
margin-left: -300px;
margin-top: -180px;
border: 2px solid #FFF;
background: #FFF;
z-index: 1002;
overflow: visible;
}
#boxclose {
float: right;
cursor: pointer;
color: #fff;
border: 1px solid #AEAEAE;
border-radius: 3px;
background: #222222;
font-family: Cursive;
font-size: 16px;
font-weight: bold;
display: inline-block;
line-height: 0px;
padding: 10px 3px;
position: absolute;
right: 2px;
top: 2px;
z-index: 1002;
opacity: 0.9;
}
.boxclose:before {
content: "X";
}
#fade:hover ~ #boxclose {
display: none;
}
</style>
#fade {
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
#light {
display: none;
position: absolute;
top: 50%;
left: 50%;
max-width: 640px;
max-height: 360px;
margin-left: -300px;
margin-top: -180px;
border: 2px solid #FFF;
background: #FFF;
z-index: 1002;
overflow: visible;
}
#boxclose {
float: right;
cursor: pointer;
color: #fff;
border: 1px solid #AEAEAE;
border-radius: 3px;
background: #222222;
font-family: Cursive;
font-size: 16px;
font-weight: bold;
display: inline-block;
line-height: 0px;
padding: 10px 3px;
position: absolute;
right: 2px;
top: 2px;
z-index: 1002;
opacity: 0.9;
}
.boxclose:before {
content: "X";
}
#fade:hover ~ #boxclose {
display: none;
}
</style>
Warna merah pada kode CSS diatas adalah ukuran tampilan pop-up-nya, bisa anda sesuaikan sendiri sesuai keinginan anda.
Kedua, sisipkan kode JavaScript setelah tag <body>, berikut ini potongan kodenya untuk mengendalikan pemutar video pop-up:
<script>
window.document.onkeydown = function(e) {
if (!e) {
e = event;
}
if (e.keyCode == 27) {
lightbox_close();
}
}
function lightbox_open() {
var lightBoxVideo = document.getElementById("PopUpVideo");
window.scrollTo(0, 0);
document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block';
lightBoxVideo.play();
}
function lightbox_close() {
var lightBoxVideo = document.getElementById("PopUpVideo");
document.getElementById('light').style.display = 'none';
document.getElementById('fade').style.display = 'none';
lightBoxVideo.pause();
}
</script>
window.document.onkeydown = function(e) {
if (!e) {
e = event;
}
if (e.keyCode == 27) {
lightbox_close();
}
}
function lightbox_open() {
var lightBoxVideo = document.getElementById("PopUpVideo");
window.scrollTo(0, 0);
document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block';
lightBoxVideo.play();
}
function lightbox_close() {
var lightBoxVideo = document.getElementById("PopUpVideo");
document.getElementById('light').style.display = 'none';
document.getElementById('fade').style.display = 'none';
lightBoxVideo.pause();
}
</script>
Ketiga, sisipkan kode HTML setelah tag <body>, berikut ini potongan kodenya untuk menampilkan pemutar video pop-up:
<h1>Pemutar Video Pop Up</h1>
<div id="light">
<a class="boxclose" id="boxclose" onclick="lightbox_close();"></a>
<video id="PopUpVideo" width="640" controls>
<source src="PopUpPlayVideo.mp4" type="video/mp4">
<!--Browser does not support <video> tag -->
</video>
</div>
<div id="fade" onClick="lightbox_close();"></div>
<div>
<a href="#" onclick="lightbox_open();">Klik untuk menampilkan video</a>
</div>
<div id="light">
<a class="boxclose" id="boxclose" onclick="lightbox_close();"></a>
<video id="PopUpVideo" width="640" controls>
<source src="PopUpPlayVideo.mp4" type="video/mp4">
<!--Browser does not support <video> tag -->
</video>
</div>
<div id="fade" onClick="lightbox_close();"></div>
<div>
<a href="#" onclick="lightbox_open();">Klik untuk menampilkan video</a>
</div>
Warna merah pada kode HTML width="640" diatas adalah ukuran video yang ditampilkan akan di-resize (dirubah ukurannya) sesuai keinginan anda dan harus cocok dengan ukuran dikode CSS apabila tidak sama, maka ditampilan pemutar video akan muncul garis border yang berlebihan.
Sedangkan pada kode <source src="PopUpPlayVideo.mp4" type="video/mp4"> sesuaikan PopUpPlayVideo.mp4 dengan nama video milik anda sendiri.
Cukup mudah bukan membuat pemutar video pop-up sederhana? Semoga tulisan singkat ini bermanfaat bagi anda sekalian.. Silahkan mencoba dan semoga berhasil..
