[SOLUCIONADO] Reproducción de Vídeo Html5

#1 (**permalink**) 28/01/2015, 10:27

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">
<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!!!

#2 (**permalink**) 29/01/2015, 10:55

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">
<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>