Kustomisasi HTML5 Video Player dengan CSS dan JS

Pada tutorial sebelumnya (Menampilkan video dengan HTML5), saya membahas secara detail mengenai dasar-dasar HTML5 Video, Markup HTML-nya, Atribut, Kekurangan, kelebihan dan sebagainya.

Pada posting tersebut juga dijelaskan bahwa setiap browser memiliki tampilan dan style yang berbeda-beda pada video playernya, seperti yang anda lihat pada gambar di bawah ini.

HTML5 Video pada browser yang berbeda

Nah, atas dasar itu, pada artikel ini saya akan membuat style video player pada tiap browser menjadi sama. Artinya saya akan membuat style baru dengan menggunakan javascript dan css sehingga tidak ada perbedaan style pada tiap browser. Sebelumnya, anda bisa lihat terlebih dahulu demonya.

Custom HTML5 Video Player

Konsep

Sebelum kita kode-kodean :D, alangkah baiknya jika kita ketahui konsepnya terlebih dahulu.

HTML5 video player ini dibuat dengan menambahkan beberapa markup HTML lain di bawah tag <video>, diantaranya progressbar, slider, dan beberapa tombol lain. Elemen-elemen tersebut di tampilkan sedemikian rupa dengan styling CSS sehingga menyerupai video player.

Kemudian, elemen-elemen tersebut diberikan fungsi masing-masing oleh kode javascript, sehingga tampil interaktif. Karena itu pada teknik ini, penggunaan javascript sangat dominan dan menjadi bagian yang terpenting. Sekarang, mari kita sama-sama lihat kodenya

Kode

Karena kodenya lumayan banyak, jadi sangat rumit untuk menjelaskannya. Oleh karena itu, beberapa keterangan untuk setiap kode ditulis dalam tag comment dekat kode tersebut.

<div class=”video-player” id=”video-mask”>
<video id=”video” width=”100%”>
<source src=”file/video.mp4″ type=”video/mp4″/>
<source src=”file/video.ogg” type=”video/ogg”/>
<source src=”file/video.webm” type=”video/webm”/>
Your browser is not support ‘ < video >’ tag.
</video>
<div id=”controls”>
<button id=”playpause” value=”pause” onclick=’playpause()’><i class=”flaticon-play128″></i></button>
<button id=”stop” onclick=’stop()’><i class=”flaticon-stop4″></i></button>
<button id=”replay” onclick=’replay()’><i class=”flaticon-rotate1″></i></button>
<div class=”progress-bar”>
<input type=”range” id=”progress1″ min=”0″ max=”100″ value=’0′ onclick=’pausebyprogress()’ />
<progress id=’progress2′ min=’0′ max=’100′ value=’0′>0% played</progress>
</div>
<button id=’mute’ class=’mute’ title=’mute’ onclick=’mute()’><i class=”flaticon-sound64″></i></button>
<input type=”range” id=”volume” value=”5″ min=”0″ max=”10″ onchange=’volume()’/>
<button id=’expandcollapse’ class=’expandcollapse’ onclick=’expandcollapse();’><i class=”flaticon-expand23″></i></button>
</div>
</div>
– Kode berwarna merah menjelaskan bawah pada saat tombol tersebut diklik, fungsi javascript (misalnya fungsi playpause()) akan berjalan.
– Kode berwarna hijau menjelaskan bahwa pada saat ada perubahan nilai (value), fungsi volume() akan berjalan.
.video-player{
position: relative;
width:100%;
}
#controls {
position: absolute;
background-color: rgba(0,0,0,0.5);
bottom:0;
right:0;
left: 0;
padding:5px;
}
#controls >* {
background-color: transparent;
color:#fff;
border:0;
cursor: pointer;
display: inline-block;
position: relative;
}
#controls >*:focus {
outline: none;
}#controls i[class^=”flaticon-“] {
padding:3px;
font-size: 13px;
}.progress-bar {
width:73%;}
#progress1, #progress2 {
width:100%;
-webkit-appearance:none;
vertical-align: middle;
}
#progress1 {
position: absolute;
opacity: 0;
cursor: pointer;
}#progress2::-webkit-progress-bar {
overflow: hidden;
-webkit-appearance:none;
height:13px;
border-radius: 3px;
background: #eee;
}
#progress2::-webkit-progress-value {
background: #2C73CC;
}#progress2::-moz-progress-bar {
overflow: hidden;
height:13px;
border-radius: 3px;
background: #eee;
}
#progress2::-moz-progress-value {
background: #2C73CC;
}

#volume {
text-align: left;
vertical-align: middle;
left: 0;
width: 10%;
-webkit-appearance: none;
}
#volume::-webkit-slider-runnable-track {
-webkit-appearance:none;
width: 100%;
height:3px;
border:none;
background: #fff;
}
#volume::-moz-range-track {
width: 100%;
height:3px;
border:none;
background: #fff;
}
#volume::-ms-track {
width: 100%;
height:3px;
border:none;
background: #fff;
}

#volume::-webkit-slider-thumb {
-webkit-appearance:none;
width: 5px;
margin-top: -6px;
height:15px;
border:none;
background: #eee;
}
#volume::-moz-range-thumb {
width: 5px;
height:15px;
border:none;
background: #eee;
}
#volume::-ms-thumb {
width: 5px;
height:15px;
border:none;
background: #eee;
}

– Kode berwarna merah adalah selector untuk styling progressbar pada video player.
– Kode berwarna hijau adalah selector untuk styling slider volume pada video player.

document.addEventListener(“DOMContentLoaded”, function() { loadvideoplayer(); }, false);

var videoMask = document.getElementById(‘video-mask’);
var videoPlayer = document.getElementById(‘video’);
var playPauseBtn = document.getElementById(‘playpause’);
var progressBar = document.getElementById(‘progress2’);
var mirageProgressBar = document.getElementById(‘progress1’);
var muteBtn = document.getElementById(‘mute’);
var volumeBtn = document.getElementById(‘volume’);
var expandcollapseBtn = document.getElementById(‘expandcollapse’);

function loadvideoplayer() {

videoPlayer.addEventListener(‘pause’, function() {
playPauseBtn.innerHTML = ‘<i class=”flaticon-play128″></i>’;
},false);
videoPlayer.addEventListener(‘play’, function() {
playPauseBtn.innerHTML = ‘<i class=”flaticon-pause52″></i>’;
},false);

videoPlayer.addEventListener(‘timeupdate’, updateProgressBar, false);

volume();

videoPlayer.addEventListener(‘volumechange’, function(e) {
if(videoPlayer.muted) muteBtn.innerHTML = ‘<i class=”flaticon-volumecontrol”></i>’;
else muteBtn.innerHTML = ‘<i class=”flaticon-sound64″></i>’;
},false);

}

function playpause() { /* ini adalah fungsi untuk tombol play dan pause */

if (videoPlayer.paused || videoPlayer.ended) {
playPauseBtn.value = “play”;
videoPlayer.play();
}
else {
playPauseBtn.value = “pause”;
videoPlayer.pause();
}

}

function stop() { /* fungsi untuk memberhentikan video yang sedang dimainkan */
videoPlayer.currentTime = 0;
videoPlayer.pause();
}

function replay() { /* fungsi untuk mengulang video baik yang sedang dimainkan maupun dijeda */
videoPlayer.currentTime = 0;
videoPlayer.play();
}

function updateProgressBar() { /* fungsi agar progress bar berjalan sesuai waktu pada video */
// Work out how much of the media has played via the duration and currentTime parameters
var percentage = Math.floor((100 / videoPlayer.duration) * videoPlayer.currentTime);
// Update the progress bar’s value
progressBar.value = percentage;
mirageProgressBar.value = percentage;
// Update the progress bar’s text (for browsers that don’t support the progress element)
progressBar.innerHTML = percentage + ‘% played’;

}

function pausebyprogress() { /* fungsi untuk jeda video dengan mengklik progressbar */
var current = (mirageProgressBar.value * videoPlayer.duration) / 100;
videoPlayer.pause();
videoPlayer.currentTime = current;
}

function volume() { /* fungsi untuk mengatur volume video */
var volumevalue = parseFloat(volumeBtn.value / 10);
videoPlayer.volume = volumevalue;
}

function mute() { /* fungsi untuk membuat video bersuara atau tidak bersuara */
if (videoPlayer.muted) {
mute.innerHTML = ‘<i class=”flaticon-sound64″></i>’;
videoPlayer.muted = false;
volumeBtn.value = 5;
}
else {
mute.innerHTML = ‘<i class=”flaticon-volumecontrol”></i>’;
videoPlayer.muted = true;
volumeBtn.value = 0;
}

}

function expandcollapse() { /* fungsi untuk membuat video fullscreen atau tidak fullscreen */
if(!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {
if (videoMask.requestFullscreen) {
videoMask.requestFullscreen();
} else if (videoMask.msRequestFullscreen) {
videoMask.msRequestFullscreen();
} else if (videoMask.mozRequestFullScreen) {
videoMask.mozRequestFullScreen();
} else if (videoMask.webkitRequestFullscreen) {
videoMask.webkitRequestFullscreen();
}
expandcollapseBtn.innerHTML = ‘<i class=”flaticon-collapsing”></i>’;

}
else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
expandcollapseBtn.innerHTML = ‘<i class=”flaticon-expand23″></i>’;
}
}

–  Keterangan kode sudah saya tambahkan pada kodenya langsung.

Saya menyadari, bahwa untuk memahami teknik ini anda tidak akan paham hanya dengan membaca tutorial ini. Jadi, sebaiknya pelajari dan improvisasi sendiri lewat file demo yang saya bagikan di atas.

Itu saja untuk tutorial kali ini. Selamat belajar dan semoga bermanfaat.

~Muhammad Syakirurohman~

3 Comments

  1. wah keren nih mas.. memang tampilannya setiap browser berbeda.. harus dicustom biar sama 😀

  2. kalo sudah update lagi kabarin ya gan..

Tinggalkan Balasan

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *