Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Nuevo HTML5

Las nuevas tendencias llegan a las páginas web con HTML5.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 123

Visitas el mes pasado: 199

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


El futuro del desarrollo web: HTML 5
Desarrollo Web
Manual de HTML5 en español
Alejandro Castillo Cantón
HTML5 Tags
quackit.com
Las novedades de HTML5
Victor Pimentel - Jazztel
HTML5 Novedades en los formularios
BufferOverflow
El sustituto del 'iframe' en HTML5
Gepetto - Globedia
HTML5 drag and drop
w3schools.com
Arrastrar y soltar en HTML5 nativo
html5rocks.com
javascript dataTransfer Description
javascript.gakaa.com
dataTransfer object
help.dottoro.com
localStorage en HTML5
rolandocaldas.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




HTML 5 (IV)

Multimedia

imagen html5

En HTML5 se pretende que el contenido multimedia, (audios y vídeos) formen parte de la página y dejen de ser unos elementos incrustados. Se pretende por tanto que los nuevos navegadores se adapten a ello e incorporen recursos para poder reproducir este contenido sin tener que usar plugins externos.

De momento pocos son los navegadores que permiten reproducir audios o vídeos en los formatos más habituales sin utilizar plugins externos, por lo que deberemos seguir usando la forma habitual de insertarlos hasta que la mayoría de ellos los pueda reproducir.


Etiqueta embed

La etiqueta embed, es usada normalmente para incrustar video y audio aunque no es reconocida como parte del lenguaje de HTML4 o XHTML1. En HTML5 se reconoce ya como propia, pudiendo validar correctamente la página al usar esta etiqueta.


Etiquetas audio y video

Dos nuevas etiquetas para incrustar contenido multimedia directamente: <audio> </audio> y <video> </video>.

Estas etiquetas pretenden simplificar la inserción de contenido multimedia, evitando tener que usar plugins en el navegador. Es el propio navegador el que debe reconocer el formato multimedia y ponerlo en marcha. La mayoría de los navegadores no se han puesto al día para reconocer los formatos de audio y video más comunes, por lo que de momento tendremos que seguir usando la etiqueta embed

Las etiquetas audio y video tienen los siguientes atributos para poder localizar y controlar el archivo multimedia.

Veamos con algunos ejemplos cómo se puede escribir el código:

<audio src="sintonia.mp3" autoplay loop ></audio>

<video src="mivideo.mp4" controls autobuffer widht="300"></video>


La etiqueta source

no todos los navegadores soportan todos los formatos de audio o video, por lo que podemos poner en la página enlaces al mismo archivo en varios formatos, para que el navegador detecte el formato que soporta. Para ello utilizamos la etiqueta source como en el siguiente ejemplo:

<audio autoplay loop>
   <source src="sintonia.mp3"/>
   <source src="sintonia.wav"/>
   <source src="sintonia.au"/>
</audio>

La etiqueta es válida tanto para audio como para video. Dentro de la etiqueta source indicamos la ruta a diferentes archivos. El navegador intentará reproducir el archivo indicado en la primera etiqueta, si no lo consigue pasará a la segunda, y así sucesivamente hasta que consiga reproducir alguno de ellos.


Multimedia en los principales navegadores


Video

Después de probar diferentes formatos para vídeo hemos elaborado la siguiente lista donde incuimos los formatos que soportan los principales navegadores para la etiqueta video de HTML5:


Formatos Firefox Chrome I.E. 10 Safari Opera
.ogv si si no no si
.mp4 si si si si no
.webm si si no no si

Para transformar los archivos de video a estos formatos se recomienda utilizar el programa "any video converter". Esta aplicación, en su versión gratuita es más que suficiente para convertir cualquier video en uno de estos formatos. Puedes descargarla en su página oficial:

http://www.any-video-converter.com/products/for_video_free/

Para mostrar un video en todos los navegadores debemos al menos guardarlo en dos formatos distintos. aquí sugerimos el .mp4 y el .ogv . Una vez tenemos el video en estos dos formatos, podemos usar un código parecido al siguiente:

<video src="objetos/mivideo.mp4" controls>
<source src="objetos/mivideo.ogv"/>
</video>

Ponemos el código del formato "mp4" en la etiqueta "video" porque el navegador Safari no admite la etiqueta source, y sí admite los videos en .mp4. Con el formato .ogv en la etiqueta source cubrimos todos los navegadores.

Aunque tenemos que usar dos tipos de archivo para un vídeo, la forma de incrustarlo se simplifica bastante respecto a las etiquetas embed y object, y además no tenemos que confiar en que el usuario tenga los plugins necesarios instalados.


audio

Después de probar diferentes formatos para audio hemos elaborado la siguiente lista donde incuimos los formatos que soportan para los principales navegadores para la etiqueta audio de HTML5:


Formatos Firefox Chrome I.E. 10 Safari Opera
.mp3 si si si si no
.wav si si no si si
.ogg si si no no si

Para transformar los archivos de audio a estos formatos podemos utilizar algún programa como "any audio converter", aunque éste programa, en su versión gratuíta no tiene la opción de transformar a formato .ogg. También podemos usar un conversor on-line. Aquí recomendamos media.io que nos permite convertir los archivos de audio a cualquiera de los tres formatos admitidos.

Para mostrar un audio en todos los navegadores debemos al menos guardarlo en dos formatos distintos. aquí sugerimos el .mp3 y el .ogg . Una vez tenemos el video en estos dos formatos, podemos usar un código parecido al siguiente:

<audio  controls>
<source src="objetos/miaudio.mp3" />
<source src="objetos/miaudio.ogg"/>
</audio>


La etiqueta object

HTML5 mantiene la etiqueta object para reproducir archivos multimedia, pero además tiene también otra función interesante, que es sustituir a la etiqueta iframe para incrustar una página o archivo dentro de otra.

la cosa es tan fácil como usar un código como el siguiente:

<object type="text/html" data="http://www.elpais.com/" width="400" height="300"> </object>

La clave está en poner el atributo type="text/html", el cual indica que abriremos la página indicada en el atributo data en una ventana dentro de la página. Los atributos width y height indican las dimensiones de la ventana en píxeles.


Ejemplos con archivos multimedia


Ejemplos con video

Para comprobar el formato de archivos que soportan los distintos navegadores hemos hecho una página en la que intentamos mostrar el mismo vídeo en distintos formatos. Según el navegador que utilicemos veremos cuales son los formatos que acepta. En el siguiente enlace mostramos la página:

El código de la página anterior es simple y puedes verlo en el siguiente enlace:

Para poder ver el vídeo en todos los navegadores utilizaremos la etiqueta source con dos formatos (.mp4 y .ogv). El resultado es el que ves aquí a la derecha y el código utilizado es el siguiente:

<video controls width="350">
<source src="video1.mp4"/>
<source src="video1.ogv"/>
</video>

Por supuesto aquí también tenemos que poner los dos archivos de video (.mp4 y .ogv) en la misma carpeta que el archivo .html de la página, para que coincida la ruta.


ejemplos con audio

Pra comprobar los archivos de audio que soportan los distintos navegadores, procedemos de la misma manera que para los archivos de vídeo. Creamos por tanto una página en la que ponemos el mismo archivo de audio en diferentes formatos. Así podemos comprobar cuáles son los formatos de audio que aceptan los distintos navegadores.

El código de la página anterior es simple y utiliza la etiqueta audio para comprobar los distintos formatos:

Al igual que con los vídeos, con los archivos de sonido podemos utilizar la etiqueta source para hacer un código que funcione en todos los navegadores. Ponemos aquí de este modo el audio de ejemplo de la página del enlace:


El código usado para incrustar este audio es el siguiente:

<audio controls>
<source src="sonido1.mp3"/>
<source src="sonido1.ogg"/>
</audio>

Desechamos el formato .wav ya que este tipo de archivos ocupan mucho mas espacio en el disco, por lo que siempre que se pueda se utilizarán los formatos .mp3 y .ogg .




Seguimos con las novedades de HTML 5 en la siguiente página. Aparte de las ya vistas, hay nuevas etiquetas:

Otras etiquetas



Manual de HTML5

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com