JavaScript
<script type="text/javascript">
function init() {
var video = document.getElementById('video');
var slider = document.getElementById('slider');
var vol = document.getElementById('vol');
slider.addEventListener('change', function(){
video.volume = this.value;
vol.innerHTML = (this.value);
}, false);
var btn = document.createElement('button');
btn.innerHTML = '►';
var secao = document.getElementsByTagName('section')[0];
secao.insertBefore(btn, slider);
var btnFF = document.createElement('button');
btnFF.innerHTML = '►►';
secao.insertBefore(btnFF, slider);
var btnRW = document.createElement('button');
btnRW.innerHTML = '◄◄';
secao.insertBefore(btnRW, slider);
var btnSM = document.createElement('button');
btnSM.innerHTML = '►▐';
secao.insertBefore(btnSM, slider);
var video = document.getElementById('video');
video.removeAttribute('controls');
var playPause = function() {
if (video.paused || video.ended){
video.play();
this.innerHTML = '█ █';
}else{
video.pause()
this.innerHTML = '▶';
}
}
btn.addEventListener('click', playPause, false);
video.addEventListener('ended', function() {
btn.innerHTML = '▶';
}, false);
video.addEventListener('pause', function(){
btn.innerHTML = '▶';
}, false);
video.addEventListener('play', function(){
btn.innerHTML = '█ █';
}, false);
btnFF.addEventListener('click', function(){
video.play();
video.playbackRate = 3;
}, false);
btnRW.addEventListener('click', function(){
video.play();
video.playbackRate = -20;
}, false);
btnSM.addEventListener('click', function(){
video.play();
video.playbackRate = 0.3;
}, false);
var progress = document.getElementsByTagName('progress')[0];
var pp = document.getElementById('pp');
function atualizar() {
progress.setAttribute('max', video.duration);
var cT = video.currentTime;
progress.value = cT;
var porcentagem = cT/video.duration * 100;
if(parseInt(porcentagem%2) == 0) {
pp.textContent = parseInt(porcentagem);
if(porcentagem == 100) {clearInterval(atualizar)}
}
}
setInterval(atualizar, 300);
}
window.onload = init;