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.
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.
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.
<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>
playpause()) akan berjalan.– Kode berwarna hijau menjelaskan bahwa pada saat ada perubahan nilai (value), fungsi
volume() akan berjalan.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 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>’;
}
}
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~
aantamim.pun.bz
wah keren nih mas.. memang tampilannya setiap browser berbeda.. harus dicustom biar sama 😀
Syakir Rahman
Yap, haha.. tapi ini masih riset gan.. masih banyak bug, belum sempurna 😀
Situsaya
kalo sudah update lagi kabarin ya gan..