Para hacer pantalla completa
Para ir a mi canal de Youtube haz click aquí (Recuerda Suscribirte)
La Etiqueta <video>
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
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
No hay comentarios:
Publicar un comentario