miércoles, 17 de octubre de 2012
1:21 | 
Publicado por
carlitox |
API'S Javascript
1.- API de vídeo.- nos va a permitir reproducir nuestros videos en cualquier página html5
a) .mp4 (H.264+AAC)
b) .ogg/ogv (Theora+Vorbis)
c) .webm (VP8+Vorbis)
<video>
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E,mp4a.40.2"'/>
<source src="video.ogv" type='video/ogv; codecs="theora,vorbis"'/>
<source src="video.webm" type='video/webm; codecs="vp8,vorbis"'/>
Vídeo no soportado. Cambia de navegador /*por si tiene un navegador viejo*/
</video>
- uso de la etiqueta
- video + JS.- se puede controlar cualquier evento que la etiqueta video produzca, el tiempo en el que va, cuando termina, se puede hacer lo que queramos, por ejemplo cuando el video termine podemos hacer que salte a otra página.
video.addEventListener('canplay', function(e){
this.volume=0.4;
this.current Time=10;
this.play();
} ,false);
con esta linea de código hacemos que un vídeo se reproduzca cuando la página este cargada por completo en el navegador.
- video + CSS3.- a cualquier etiqueta de video le puede asociar cualquier regla css3.
#video-1{
border:1px solid white;
-moz-box-shadow: 0px 0px 4px #FFF;
-webkit-box-shadow:5px 44px 28px #333;
box-shadow: 0px 0px 4px #FFF;
-moz-transform: translate(0,10px);
-o-transform: translate(0,10px);
-webkit-tranform: translate(0,10px);
}
- video + canvas.-
- video + webgl
- video + svg
API Geolocalización.- datos que por defecto html5 no permite utilizar: latitud, longitud, altura, velocidad, accuracy(precisión), tiempo de refresco.
código de errores:
0 --> Desconocido(fallo físico)
1 --> Permiso denegado(el usuario no da permiso para que sea geolocalizado)
2 --> Error de geolocalización
3 --> Time out
API canvas.- siempre tiene que llevar un id y es recomendable darle una anchura y una altura. puede tener los mismos estilos que un div, pero de partida osea desde el principio el canvas esta vacio.
ejemplo en que se pintan dos rectangulos uno encima de otro y con transparencia:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Documento sin título</title>
<link rel="stylesheet" type="text/css" href="estilo.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="application/javascript">
function draw(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext('2d');
ctx.fillStyle="rgb(200,0,0)";
ctx.fillRect(10,10,55,50);
ctx.fillStyle="rgba(0,0,20,0.5)";
ctx.fillRect(30,30,55,50);
};
</script>
</head>
<body onLoad="draw();">
<canvas id="canvas" width="150px" height="150px"></canvas>
</body>
</html>
- Rectangulos:
.fillRect(x,y,width,height); dibuja un rectangulo con relleno con que color que le hemos asignado anteriormente.(mirar en ejemplo de arriba)
.strokeRect(x,y,width,height); es lo mismo que el anterior solo que sin relleno.
.clearRect(x,y,width,height); con este código se limpia un área rectangular.
las ejes de las X e Y se miden desde la esquina superior izquierda de nuestro canvas.
- Caminos de Dibujo(drawing path's): sirve para situar el pincel en los puntos que querramos empezar a dibujar luego levantarlo y colocarlo en otro punto para hacer otro dibujo, se pueden hacer lineas rectas y curvadas.
.beginPath(); abre camino
.closePath(); cierra camino
.moveTo(x,y); la posicion inicial donde se situara el pincel.
.lineTo(x,y); la posicion final hasta donde se terminara de hacer la linea.
.fill(); rellena areas que encuentra cerradas.
.stroke(); lo que hace es imprimir el camino, osea despues de haber terminado plasmarlo todo.
.Arcos: arcos de tipo arc, arcos de tipo curva cuadratica y curva de desier.
- arc(x,y,radio,angulocomeinzo,angulofin,direccion)
.quardaticCurve(puntocontrol1,puntocontrol2,x,y); sirve para estirar mas o menos una curva.
.bezierCurveTo(puntocontrol1x,puntocontrol1y,puntocontrol2x,puntocontrol2y,x,y);
- uso de la etiqueta
- video + JS.- se puede controlar cualquier evento que la etiqueta video produzca, el tiempo en el que va, cuando termina, se puede hacer lo que queramos, por ejemplo cuando el video termine podemos hacer que salte a otra página.
video.addEventListener('canplay', function(e){
this.volume=0.4;
this.current Time=10;
this.play();
} ,false);
con esta linea de código hacemos que un vídeo se reproduzca cuando la página este cargada por completo en el navegador.
- video + CSS3.- a cualquier etiqueta de video le puede asociar cualquier regla css3.
#video-1{
border:1px solid white;
-moz-box-shadow: 0px 0px 4px #FFF;
-webkit-box-shadow:5px 44px 28px #333;
box-shadow: 0px 0px 4px #FFF;
-moz-transform: translate(0,10px);
-o-transform: translate(0,10px);
-webkit-tranform: translate(0,10px);
}
- video + canvas.-
- video + webgl
- video + svg
API Geolocalización.- datos que por defecto html5 no permite utilizar: latitud, longitud, altura, velocidad, accuracy(precisión), tiempo de refresco.
código de errores:
0 --> Desconocido(fallo físico)
1 --> Permiso denegado(el usuario no da permiso para que sea geolocalizado)
2 --> Error de geolocalización
3 --> Time out
API canvas.- siempre tiene que llevar un id y es recomendable darle una anchura y una altura. puede tener los mismos estilos que un div, pero de partida osea desde el principio el canvas esta vacio.
ejemplo en que se pintan dos rectangulos uno encima de otro y con transparencia:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Documento sin título</title>
<link rel="stylesheet" type="text/css" href="estilo.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="application/javascript">
function draw(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext('2d');
ctx.fillStyle="rgb(200,0,0)";
ctx.fillRect(10,10,55,50);
ctx.fillStyle="rgba(0,0,20,0.5)";
ctx.fillRect(30,30,55,50);
};
</script>
</head>
<body onLoad="draw();">
<canvas id="canvas" width="150px" height="150px"></canvas>
</body>
</html>
- Rectangulos:
.fillRect(x,y,width,height); dibuja un rectangulo con relleno con que color que le hemos asignado anteriormente.(mirar en ejemplo de arriba)
.strokeRect(x,y,width,height); es lo mismo que el anterior solo que sin relleno.
.clearRect(x,y,width,height); con este código se limpia un área rectangular.
las ejes de las X e Y se miden desde la esquina superior izquierda de nuestro canvas.
- Caminos de Dibujo(drawing path's): sirve para situar el pincel en los puntos que querramos empezar a dibujar luego levantarlo y colocarlo en otro punto para hacer otro dibujo, se pueden hacer lineas rectas y curvadas.
.beginPath(); abre camino
.closePath(); cierra camino
.moveTo(x,y); la posicion inicial donde se situara el pincel.
.lineTo(x,y); la posicion final hasta donde se terminara de hacer la linea.
.fill(); rellena areas que encuentra cerradas.
.stroke(); lo que hace es imprimir el camino, osea despues de haber terminado plasmarlo todo.
.Arcos: arcos de tipo arc, arcos de tipo curva cuadratica y curva de desier.
- arc(x,y,radio,angulocomeinzo,angulofin,direccion)
.quardaticCurve(puntocontrol1,puntocontrol2,x,y); sirve para estirar mas o menos una curva.
.bezierCurveTo(puntocontrol1x,puntocontrol1y,puntocontrol2x,puntocontrol2y,x,y);
Suscribirse a:
Enviar comentarios (Atom)
Contra la ley Sinde
¿Estas en desacuerdo con la ley sinde? No permitas que coarten tu libertad.
Bájame
Bájame
0 comentarios:
Publicar un comentario