Buenas, ya he logrado realizar el vídeo de fondo con los controles personalizados, la barra de progreso y que se inicie al cabo de 5 segundos. Dejo el código por si a alguien le interesa (sólo habría que agregar los estilos por el css). Solo me faltaría que a la vez que se comienza a reproducir el vídeo, el contenedor - section id="wrapper" - , bajara hacia abajo y dejara el vídeo para ver en toda la pantalla. Agradecería si alguien supiera eso pues no logro sacarlo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Vídeo de fondo</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<div id="supBar">
<img src="img/sup-bar.jpg" alt="Superior Minijuegos" />
</div>
<video id="video_background" preload="auto" volume="50" />
<source src="video/parque-jurasico.mp4" type='video/mp4; codecs="avc1,mp4a"' />
<source src="video/parque-jurasico.ogv" type='video/ogg; codecs="theora,vorbis"' />
<source src="video/parque-jurasico.webm" type='video/webm; codecs="vp8,vorbis"' />
<object width="100%" height="100%" data="video/parque-jurasico.flv"><!--por si no se soporta html5 - IE - -->
<param name="movie" value="video/parque-jurasico.flv">
<param name="wmode" value="transparent">
<embed src="video/parque-jurasico.flv" width="100%" height="100%">
</object>
</video>
<div id="controlesMarco">
<img id="replay" src="img/iconos/ico-replay.png" alt="Replay" />
<img id="play" src="img/iconos/ico-play.png" alt="Play" />
<img id="stop" src="img/iconos/ico-pause.png" alt="Pause" />
<img id="mute-btn" src="img/iconos/ico-sound-on.png" alt="Sound on" />
<img id="unmute-btn" src="img/iconos/ico-sound-off.png" alt="Sound off" />
<div id="progresoCont">
<div id="progreso"></div>
</div>
</div>
<div id ="hide">
</div>
<section id="wrapper">
<img src="img/wrapper.png" alt="Wrapper" />
</section>
<script type="text/javascript">
$(document).ready(function(){
$('video').bind('timeupdate' , function(){
var tiempoActual = video.currentTime;
var tiempoTotal = video.duration;
var porcentaje = tiempoActual/tiempoTotal*300;
$('#tiempoActual').html(Math.floor(tiempoActual));
$('#tiempoTotal').html(Math.floor(tiempoTotal));
$('#progreso').width(porcentaje);
});
var video = $('video')[0]
$('#play').click(function(){
video.play();
});
$('#stop').click(function(){
video.pause();
video.currentTime = 0;
});
$('#replay').click(function(){
video.play();
video.currentTime = 0;
});
});
</script>
<script type="text/javascript">
var muteBtn = document.getElementById('mute-btn');
var unmuteBtn = document.getElementById('unmute-btn');
muteBtn.addEventListener('click', muteUnmuteHandler, false);
unmuteBtn.addEventListener('click', muteUnmuteHandler, false);
function muteUnmuteHandler(e) {
if (video_background.volume == 0.0) {
// Si está silenciado, active el sonido
video_background.volume = 1.0;
// Hace que se muestre el botón de silencio y se oculte el botón de activación de sonido
muteBtn.style.visibility = 'visible';
unmuteBtn.style.visibility = 'hidden';
} else {
// Si el sonido está activado, silencia
video_background.volume = 0.0;
// Haga que se muestre el botón de activación de sonido y se oculte el botón de silencio
muteBtn.style.visibility = 'hidden';
unmuteBtn.style.visibility = 'visible';
}
}
</script>
<script type="text/javascript">
$(document).ready(inicio)
function inicio() {
$("#show").show();
$("#hide").hide();
$('#show').click(mostrar);
function mostrar() {
$("#hide").slideToggle()
}
}
// Cambiar texto de botón watch y hide
function toggleClick(element, text) {
var newText = (element.html() == text) ? '<img src=img/iconos/ico-hide.png>' : text;
element.html(newText);
}
</script>
<script type="text/javascript">
setTimeout(function(){
document.getElementById("video_background").play() ;
}, 5000);
</script>
</body>
</html>