Buenas,
estoy colocando un vídeo html5 con background con unos controles estilizados con javascript. Lo que no acabo de lograr es que el vídeo comience a los 5 segundos de acceder a la web y empuje el contenedor del contenido de la web hacia abajo para poder verse a pantalla completa. Luego al pulsar un botón subiría de nuevo el contenedor.
El código que tengo es el siguiente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vídeo de fondo</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<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.flv">
<embed src="video/parque-jurasico.flv" width="160" height="90">
</object>
</video>
<div id="supBar">
<img src="img/sup-bar.jpg" alt="Superior" />
</div>
<div id="controlButtons">
<button id="restart" onclick="restart();" type="button"><span><img src="img/iconos/ico-replay.png" alt="Replay" /></span></button>
<button id="play" onclick="play()" type="button"><span><img src="img/iconos/ico-play.png" alt="Play" /></span></button>
<button id="show" onclick="toggleClick($(this), 'img src="img/iconos/ico-whatch.png"')" type="button"><img src="img/iconos/ico-hide.png" alt="Watch" /></button>
<button id="pause" onclick="pause()" type="button"><span><img src="img/iconos/ico-pause.png" alt="Pause" /></span></button>
<button id="audio" onclick="audio()" type="button"><span><img src="img/iconos/ico-sound-on.png" alt="Sound on" /></span></button>
</div>
<div id ="hide">
</div>
<section>
<img src="img/wrapper.png" alt="Wrapper Minijuegos" />
</section>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function play() {
var video = document.getElementById("video_background");
video.play();
}
function restart() {
var video = document.getElementById("video_background");
video.currentTime = 0;
}
function skip(value) {
var video = document.getElementById("video_background");
video.currentTime += value;
}
function pause() {
var video = document.getElementById("video_background");
video.pause();
}
function audio() {
var video = document.getElementById("video_background");
video.audio();
}
</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 view video
function toggleClick(element, text) {
var newText = (element.html() == text) ? '<img src="img/iconos/ico-whatch.png" alt="Watch" />' : text;
element.html(newText);
}
</script>
<script type="text/javascript">
$("button").focusin(function(){
$(this).blur();
});
</script>
</body>
</html>
Un saludo!!!