Parece que últimamente no pongo mas que ejemplos con <video>
Hoy os traigo otro ejemplo mas de la potencia de esta etiqueta, en concreto se trata de un juego (un video-juego nunca mejor dicho).
Eso si, tened cuidado con la CPU ya que puede llegar a consumir bastante.
Juego con Video y Canvas
Hace poco, Paul Rouget nos sorprendió con una demostración de como editar video en tiempo real con javascript.
He hecho otra demostración basándome en su código de como hacer esto. El ejemplo consiste en crear un cubo “3D” (en realidad es 2.5D) sobre una plantilla impresa en un folio.
La plantilla son cuatro cuadrados de colores rojo, verde, azul y negro dispuestos en forma de cuadrado. El video esta gravado con una cámara normal y convertido a ogg/theora con ffmpeg2theora. Despues el video se inserta en la pagina con la etiqueta <video/> de html5 y cuando se le da al play, se dibuja en un canvas la imagen del video, despues se detecta el centro de los cuadrados y dibuja un “cubo” tomando estos 4 puntos como base.
Lanzar demo. Necesitas tener Firefox 3.5 b3 y un poco de paciencia (el video tarda en cargar) para que funcione
Realidad aumentada con javascript y
Sigueme en Twitter!