jquery.tubular.js y mission-control.js, mas la carpeta del estilo css,el primero nos sirve para poder visualizar el video y el segundo para los controles del video (stop/pausa/silencio=) una vez hecho esto en el head de nuestra pagina debemos agregar la siguientes lineas de codigo
<link href="css/screen.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.js"></script>
<script type="text/javascript" charset="utf-8" src="js/mission-control.js"></script>
y en nuestra pagina agregamos antes de cerrar el head el siguiente codigo
<script type="text/javascript">
$(document).ready(function() {
$('body').tubular('IDVIDEO','wrapper');
});
</script>
aqui llamamos al archivo que nos permite ver el video, que recibe dos parametros el id del video de youtube , que esta formado por letras y numeros y aparece despues del primer = de la url
ejem: http://www.youtube.com/watch?v=zi1MYyMQWqU&feature=related
(lo resaltado con rojo es el id), y el siguiente parametro es el id del div contenedor
y listo ahora deberia visualizarnos el video, por defecto aparece en silencio, hacemos clic en el link mute
el siguiente es el codigo de los controles
<div id="wrapper">
<div id="main">
<a href="http://www.seanmccambridge.com/tubular/"><img src="media/logo.png" alt="Tubular logo" id="logo" /></a>
<p id="video-controls">Controles:
<a class="videoPaused" href="" id="videoPause">Play/Pause</a> |
<a href="" id="videoMute">Mute</a> |
<a href="" id="videoStop">Stop Video</a></p>
</div>
<div style="margin-left:400px;;margin-top:20px;"class="black-50">
<h3>Este es un ejemplo de insertar video como fondo de una pagina web</h3>
</div>
</div>
-Aqui dejo algunas imagenes de los videos que probe (bad romance de lady gaga y una linda música de nuestra selva peruana :D ) , como dije antes solo cambiamos donde dice IDVIDEO, por el id del video que queramos que se visualice al cargar nuestra pagina(probado en firefox 11, chrome y ie 9.0 )
ver demo
0 comentarios:
Publicar un comentario