Pablo M. Francisco Idea guardada 0 veces
Sé la primera persona en valorar esta idea Valorar

Día #10 Hablemos de los Videos en HTML5



En este tutorial o artículo, vamos a ver de pronto no todo acerca los videos en HTML5 pero si lo más relevante e importante de esta nueva etiqueta Video.

HTML ha hecho cambios muy grandes en la web, que quizás la gente común no note pero a los que trabajamos en este campo se no se nos hacen grandioso, una de estas mejores es la de poder incluir directamente video y audio en el código, para depender de el mismo HTML y no de flash como lo veníamos haciendo (bueno ahora tenemos otra alternativa para elegir), en este tutorial veremos el tema del Video en HTML5.

Una buena razón para utilizar videos en nuestro HTML5 es por la decisión de Apple de no soportar Flash en el iPhone y el IPAD. IOS, el sistema operativo que se ejecuta en estos teléfonos, tiene soporte para vídeo MP4.

Comencemos por lo básico, para añadir un video vamos a necesitar el siguiente código:
<video src"videomp4"</video>

<video "video.mp4"width"375"height"280"</video>

bueno para tener mas control a esta etiqueta podemos agregar width and height es decir alto y ancho como lo hacemos con las imagenes, quedaria asi el codigo mas completo:

El atributo src curso define la dirección del archivo de vídeo, así como para la etiqueta img. También estamos especificando las dimensiones con los atributos width y height .



1 ? Multiples Fuentes para mostrar el video<video controls"controls"width"375 height="280">

    <source src="sintelogg" type="videoogg"/>

    <source src="sintelmp4" type="videomp4"/>

    <source src="sintelwebm" type="videowebm"/>

<!--comentario para los navegadores que no soportan ninguna fuente de video -->Tu navegador no soporta video HTML5

</video>

2 ? Handbrake (http://handbrake.fr).
3 ? Media Converter (http://www.mediaconverter.org).
2 ? Atributos de la etiqueta video<video autoplay"autoplay"<video autoplay

<!--Por ser boolean se puede utilizar de ambas maneras-->

<video controls"controls"<video controls

<video width"320"height"240"controls"controls"

<source "video.ogg""video/ogg" />

<video controls"controls"width"375 height="280">

   <source src="sintelogg" type="videoogg"/>    

   <source src="sintelmp4" type="videomp4"/>

   <source src="sintelwebm" type="videowebm"/>

</video>

<video controls"controls""loop"<video loop

<video controls"controls"muted"muted"<video muted

<video poster"URL"<!--utilizamos href para la ubicacion de la imagen-->

<video poster"href="imagenespostervideojpg"

<video preload"auto|metadata|none"

Metadata: el navegador debe cargar los metadatos sólo cuando se carga la página
None: el navegador no se debe cargar el vídeo cuando se carga la página

Bueno como no hay un formato estándar para los videos en HTML5 debemos de incluir varios archivos de videos con diferentes fuentes de formatos ya que no todos los navegadores leen el mismo formato, y así nos aseguraremos que el video se muestre en todos los navegadores modernos. Esto es lo que hay que hacer hoy en día por que no sabemos si los navegadores o sus fabricante se pondrán de acuerdo para elegir un solo formato que rija la web con la etiqueta video.

Lo que hacemos es quitar el src dentro de la etiqueta video y crear varios src apuntando a cada video independientemente dentro de los tags <video></video>. Seria algo asi:

A continuación te muestro el formato soportado por cada navegador, es decir los que debemos utilizar o especificar para cada navegador especificamente.



Bueno, no sé si te estarás preguntando como haces para conseguir estos formatos de video para incluirlos en la web. Pero si es así, aquí te dejo unos links para que descargues algunos programas convertidores de videos que te ayudaran a obtener múltiples formatos de video y especialmente los que necesitaremos para insertar en HTML5.

1 ? Miro Video Converter (http://www.mirovideoconverter.com).

Nota: IExplorer 8 y las versiones anteriores no soportan la etiqueta video.

La etiqueta video en HTML5 cuenta con varios atributos para ampliar su funcionamiento, vamos a ver cuales son:

*Autoplay: Lo que hace este atributo es iniciar automáticamente el video una vez carga la pagina sin necesidad que el usuario de al play.

*controls: Este atributo nos muestra los controles clasicos de (play, pausa, volumen, tiempo de reproduccion, etc.) en el player del video (cada navegador muestra su propio reproductor predefinido)



*Width and Height: especificamos la altura y alto del video, lo hacemos en pixeles

*Src: El atributo src especifica la ubicación (URL) del archivo de vídeo.

Este atributo src tiene un atributo que es type, que especifica los recurso de los medios de comunicación. La forma correcta de incluir el atributo src seria este:

*Loop: el atributo loop o bucle especifica que el video comenzará otra vez, cada vez que se haya terminado.

*Muted: este atributo especifica que la salida de audio del vídeo debe ser silenciado.

*poster: este atributo especifica una imagen que se muestra mientras el vídeo se descarga, o hasta que el usuario pulsa el botón de reproducción. Si este atributo no está incluido, el primer fotograma del vídeo se utilizará en su lugar.

*Preload: empezará a precargar el video independientemente de las acciones del usuario sobre el player.

Puede tener las propiedades:

Auto: el navegador debe cargar todo el video cuando se carga la página

Este atributo no se utiliza mucho..

???????????????????????????

Para saber mas de la etiqueta video ve a esta pagina: http://www.w3schools.com/html5/html5_video.asp

Fuente: este post proviene de Pablo M. Francisco, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

¿Seguro que estamos seguros?

Todos los pagos y compras online, todos los "Me gusta", comentarios, mensajes, twits, chats, todas las gestiones que hacemos por internet dejan un rastro que contiene nuestros datos personal ...

Mobile marketing trends 2015

This my first post in english. Please try to understand any mystakes :). Today 80% of consumers are concerned about mobile marketing. Thousands of mobile phone users world wide were surveied on their ...

Recomendamos

Relacionado

general desarrollo web html5 ...

Creacion de Juego con HTML5 y JavaScript

En esta nueva serie de tutoriales y videos, veremos los aspectos generales para la creacion de un game con HTML5, JavaScript y jQuery. Bienvenidos a otro tutorial de HTML5!Hoy iniciaremos la creación de un simple videojuego (bastante simple :)), utilizando apenas HTML5 y Javascript. hablaremos de algunos aspectos basicos de programacion con JavaScript, dando por hecho que ya tenés un poco de noció ...

general desarrollo web html5 ...

Día #9 Formularios en HTML5. Nuevos elementos y Nuevos atributos.

Uno de los problemas que teníamos con la versión anterior de HTML es decir la 4, era la validación ya que teníamos que utilizar otra tecnología para su validación, por supuesto con Javascript dábamos el toque que necesitábamos para dar lo que le faltaba a estos formularios. En HTML5 esto se ha solucionado ya que se hicieron unas grandes mejoras para su propia validación y otras para su fácil manej ...

general html5 programación ...

Día #7 Hablemos de los Microdatos en Html5 (Microdata)

Existe una nueva forma de marcar una frontera semántica en HTML5, se trata de las nuevas posibilidades que tenemos de definir una estructura semántica más fuerte y más personalizada utilizando los microdatos (microdata) que nos van a permitir desarrollar mejor las estructura web dándole una gran prioridad al trabajo del SEO y la indexación a los diferentes buscadores. Los microdatos van a permiten ...

general desarrollo web html5 ...

Dia #3 – Estructura básica de html5

Estructura básica Aunque gran parte de la atención que se tiene sobre HTML5 gira en torno a las nuevas API, y sus 30 nuevos elementos con la nueva semántica que se puede utilizar en tradicionales páginas estáticas, también en las franja de controles de formularios. Vamos a tocar un poco el tema de lo básico como veníamos tratando hasta ahora, Vamos a ver un poco la estructura básica y algunas mejo ...

general

Creacion de un Game con HTML5 Javascript Utilizando el framework Phaser

En este tutorial iniciaremos un nuevo juego utilizando el Framework "Phaser", usando HTML y CSS3. Phaser es un framewprk/engine muy completo y facil de usar. Hola amigos, como ven en el video, el juego es muy simple de jugar, apenas tenes que comer las frutas para mantenerte en vuelo y cuidar para que las estrellas negras no te toquen o mueres. Si tienen un smartphone Android puden desc ...

Tutoriales Redes Sociales Web

Como Personalizar botones de compartir.

Que feliz que me hace regresar al blog. Como algunos de ustedes saben, me fui de vacaciones, y regreso supercontenta, Mexico tiene lugares hermosos, llenos de historia y cultura, pero bueno esa es otra historia. Hoy vengo con un tutorial, que ya buena falta hacia por aquí en el blog. Este va a petición de mi amiga Marysol, que me ha pedido un tutorial para cambiar esos botones sociales para compar ...

Tutoriales Blogging Estilos

Como poner una biografía debajo de las entradas.

Feliz miércoles ! Se siente bien estar de regreso después de varios días de tener completamente abandonado el blog. Mi familia y yo estuvimos de paseo y pudimos conocer algunos lugares que nos encantaron y nos dejaron con deseos de quedarnos más días, pero nimodo, teníamos que regresar. Me muero de ganas de compartir con ustedes todas las imágenes que tome por donde andaba. Pero hoy vengo a otra c ...

icono botón redes sociales ...

Cómo insertar botones de Redes Sociales en Blogger

Hoy les traigo el Tutorial de cómo insertar los botones de las Redes Sociales en Blogger. Lo primero que vamos a hacer es Descargarnos los Botones que más nos gusten y alojarlos en hosting (hay muchos gratuitos), pero yo uso el Google Drive, que me parece más sencillo y más completo. Una vez tengamos las imágenes subidas a Google Drive, tenemos que averiguar su URL, (si no sabes cómo hacerlo, te l ...

general social

Cómo poner botones para que te sigan en las redes sociales en Blogger

Poner botones para redes sociales con los que tus usuarios puedan seguirte te ayudará a incrementar la presencia de tus contenidos en Internet. Si bien muchas veces preferimos utilizar botones al final de nuestra entradas para que nuestros usuarios compartan si lo desean nuestras entradas, es importante también que puedan seguirnos por las redes sociales si así lo desean. Qué mejor sitio para que ...

general

Creacion de Juego con HTML5 y JavaScript parte II

En esta segunda parte del tutorial para crear un Juego con HTML5 Y javascript, daremos movimiento a nuestros "actores". Bienvenidos a otro tutorial de HTML5! Hoy daremos secuencia a esta serie de tutoriales de programacion de videojuegos con HTML5 CSS3 y Javascript. Como ya vimos en el tutorial anterior el armado de nuestro canvas y los jugadores que son apenas dos rectangulos uno rojo ...