En el video que acabas de ver aprenderás como hacer un paint en Javascript usando un elemento Canvas para dibujar, descubrirás que es muy sencillo el código es un poco largo pero no tiene complicaciones
¿Que imagenes puedo usar para mis cursores?
Actualmente Chrome, Firefox y Safari soportan cualquier archivo de imagen soportado por el navegador mismo excepto el formato .ANI
Internet Expolorer solo soporta formatos .CUR y .ANI a continuación te dejo el enlace a una página para convertir cualquier imagen a formato .CUR : convertir a .cur online
Con respecto al tamaño, lo ideal es utilizar imagenes de 32x32 actualmente cualquier tamaño es soportado, el tamaño comentado anteriormente es solo una recomendación.
Si usas una imagen gif animada como cursor la animación no será reproducida
Puedes usar cursores con transaparencias pero estos solo se veran en Sistemas operativos superiores a XP ya que esta es una limitación del S.O
Código Fuente
A continuación el código fuente completo del videotutorial, sigue el enlace para descargarlo
Si solo quieres practicar tu Javascript y no quieres perder tiempo escribiendo la parte CSS y HTML puedes descargar este documento HTML que contiene lo mismo de arriba excepto la parte Javascript : Haz clic aquí para descargar la plantilla HTML
Imágenes
A continuación un archivo de Winrar que contiene 4 imágenes dos del lapiz y del borrador, una para usar como cursor y la otra para usar como botón :
Esta etiqueta como bien sabemos especifica un vídeo a mostrar, actualmente hay 3 formatos soportados: Mp4, Webm y Ogg. Los navegadores: Chrome Firefox y Opera, soportan los 3 formatos desde hace algún tiempo, IE y Safari solo soportan Mp4. Esta etiqueta es nueva en HTML5.
Atributos
autoplay : Si se especifica, el video se reproducirá automáticamente, tan pronto como este listo
controls : Al colocar este atributo se mostraran los controles, play/pause, por defecto del navegador. Para el tutorial que acabas de ver no debes colocar este atributo
height : Aquí puedes especificar el alto del vídeo
loop : Con este atributo puedes hacer que el vídeo se reproduzca nuevamente cada vez que termine
muted : Al colocar este atributo el sonido del vídeo quedará silenciado
poster : Aquí puedes especificar una imagen que aparecerá mientras el vídeo carga o antes de que el usuario haga click en play
preload : Aquí puedes especificar si el vídeo se cargará junto a la página o después
src : Sirve para colocar la ruta de nuestro archivo de vídeo
width : Con este atributo se especifica el ancho del vídeo
Convenciones y sugerencias
Como pudiste ver en el vídeo, no utilicé muchos de estos atributos, como por ejemplo "width" y "height", por el contrario esas propiedad las edité desde CSS, es mas eficiente de esta forma ya que creas una separación entra la funcionalidad y el diseño, por lo que es mas fácil editar. Otro atributo del cual les recomiendo prescindir es "src", en su lugar pueden trabajar con la etiqueta "<source>", como vimos arriba hay diferencias de compatibilidad en cuanto a formatos, con la etiqueta "source" pueden especificar varias fuentes de diferentes formatos, como en el siguiente ejemplo :
<video>
<source src="mivideo.ogg" />
<source src="mivideo.mp4" />
</video>
Con esto nos aseguramos que nuestro video se reproduzca en todos los navegadores
Referencia Javascript
Funciones
canPlayType() : Verifica si el navegador puede reproducir el tipo de vídeo del archivo
load() : Vuelve a cargar el vídeo
play() : Reproduce el vídeo
pause() : Pausa el vídeo
Propiedades
audioTracks : Devuelve un objeto con información del audio, esta propiedad solo es compatible con IE
autoplay : Permite ver o configurar la reproducción automática
buffered: Podemos utilizarla para ver cuanto del vídeo se ha descargado y guardado en buffer
controlls : Permite mostrar los controles por defecto del navegador
currentSrc : Devuelve la URL actual del archivo de vídeo
currentTime: Devuelve o configura la posición actual del vídeo en el tiempo de reproducción, en el tutorial usamos esta función para poder calcular la posición del "slider" y para luego colocar el video en dicha posición
defaultMuted : Especifica si el video debería estar silenciado por defecto
defaultPlaybackRate y playbackRate : Hacen casi lo mismo, permiten ver o modificar la velocidad de reproducción del vídeo, la primera especifica un valor por defecto, por lo que si la usamos tendremos que llamar a la función "load()", en la segunda cambia el valor actual, por lo que no es necesario volver a cargar el vídeo
played : Devuelve un objeto del tipo "TimeRange" que permite ver que tanto del vídeo ha sido reproducido
preload: Representa lo mismo que el atributo con el mismo nombre, de la etiqueta "video"
readyState : Permite ver que tan listo esta el medio para poderlo utilizar, en el video tutorial utilizamos esta función para saber cuando esta lo suficientemente listo, como para poder extraer la propiedad "duration"
seekable : Devuelve un objeto "TimeRange" con los pedazos del vídeo que puedan ser buscados por el usuario
src : Hace lo mismo que el atributo con el mismo nombre, de la etiqueta "vídeo"
textTracks : Extrae el texto que tenga el vídeo, estos pueden ser: Subtitulos, descripciones o metadata
volume : Permite alterar el volumen del vídeo
En esta lista se omitieron algunas propiedades que todavía no son compatibles con la mayoría de los navegadores
También se omitieron los eventos del objeto vídeo, ya que escapan de los alcances de este tutorial
Fullscreen Javascript API
Para lograr desde javacript la implementación de pantalla completa es muy sencillo, pero debes saber que por los momentos Chrome no la implementa de la misma manera que los demás navegadores.
Lo único que debes hacer es acceder al elemento que va a ocupar la pantalla completa y llamar desde él a la función "requestFullscreen" esto para cualquier navegador que no sea Chrome, para este debes usar: "webkitRequestFullscreen", a continuación un ejemplo :
<video src="video.webm" controls id="mivid">
</video>
<script type="text/javascript">
var video = document.getElementById("mivid");
function pancomp(){
if(video.requestFullscreen){
video.requestFullscreen();
}
else {
video.webkitRequestFullscreen();
}
}
</script>
Aquí al llamar a la función: "pncomp()", puede ser desde un botón cualquiera, nuestro video se va a colocar en pantalla completa
Pseudo-clase CSS
Cuando hablamos de pseudo-clase en css nos referimos a algo que es básicamente una clase pero con su estado modificado, una de las más conocidas en ":hover" que como bien sabemos se usa para cambier el estilo de los objetos con el mouse encima.
La pseudo-clase "-webkit-full-screen" es un propuesta de Chrome para poder definir estilos diferentes para objetos que van a ocupar la pantalla completa y su sintaxis es la siguiente :
.miclase:-webkit-full-screen {
width: 100%;
height: 100%;
}
En este caso yo defino el tamaño para ocupar el 100% de la pantalla, pero bien podemos definir el tamaño que queramos
