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);
}
window.onload = init;