Embedded Files
HTML5 dispone de métodos, propiedades y eventos para manejo de <audio> y <video>.
Actualmente, hay 3 formatos de vídeo que son soportados por la etiqueta video: MP4, WebM y Ogg y 3 soportados por la etiqueta audio: MP3, Wav y Ogg:
En ambas la etiqueta <source media=”mediaq” src=”URL” type=”type”> especifica el listado de recursos a reproducir.
El atributo media no está soportado por ningún navegador todavía.
El atributo src especifica la URL del audio/video a reproducir.
El atributo type especifica el tipo multimedia MIME de recurso a reproducir
- Para vídeo: video/ogg, video/mp4, video/webm
- Para audio: audio/ogg, audio/mpeg
- Para más formatos consultar la siguiente web: http://www.iana.org/assignments/media-types
Etiqueta embed: <embed src="intro.swf" height="200" width="200">
Etiqueta object: <object data="intro.swf" height="200" width="200"></object>
Problemas:
- Si el navegador no soporta Flash, el video no se reproducirá
- iPad y iPhone no soportan videos de Flash
- Si se convierte el video a otro formato puede que no sea visible en todos los navegadores
Etiqueta HTML5:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>
Problemas:
- Hay que convertir los videos a diferentes formatos
- La etiqueta <video> no funciona en navegadores antiguos
Soluciones:
HTML5+embed+object
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</object>
</video>
Problemas:
- Hay que convertir los videos a diferentes formatos
Solución Youtube
Se sube el vídeo a YouTube y se referencia con cualquiera de las siguientes etiquetas:
<iframe width="420" height="345" src="http://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
<embed width="420" height="345" src="http://www.youtube.com/v/XGSy3_Czz8k" type="application/x-shockwave-flash"></embed>
Utilizando las etiquetas embed y object:
- Cada navegador soporta sus formatos de audio compatibles o no con el resto
- Si un navegador no soporta un formato de audio, este no se reproducirá sin un plugin
- Si el plugin no está instalado en el ordenador del usuario, el audio no se reproducirá.
- Si se convierte el audio a otro formato, puede que no se reproduzca en todos los navegadores
Utilizando la etiqueta audio:
- Hay que convertir el archivo de audio a diferentes formatos
- La etiqueta <audio> no es compatible con navegadores antiguos.
Utilizando HTML5+embed:
<audio controls height="100" width="100">
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
<embed height="50" width="100" src="horse.mp3">
</audio>
- Hay que convertir el archivo de audio a diferentes formatos
- La etiqueta <embed> no puede mostrar mensajes de error
Usar Yahoo Media Player o goEar:
Con la primera opción, aparece en algunos navegadores (Firefox no) un botón de reproducción a la izquierda del audio:
<a href="horse.mp3">Play Sound</a>
<script src="http://mediaplayer.yahoo.com/js"></script>
La opción de goEar es similar a la de Youtube con los videos. El audio se sube a una cuenta creada en su web y se referencia mediante iframe, embed o etiqueta que en su web faciliten.
Métodos de la etiqueta audio/video
Métodos de la etiqueta audio/video
Propiedades de la etiqueta audio/video
Propiedades de la etiqueta audio/video
Eventos de la etiqueta audio/video
Eventos de la etiqueta audio/video
Ejercicio:
Realizar una web con etiquetas HTML5 que contenga los siguientes elementos:
- El archivo principal se ubicará en c:\Xamp\htdocs\miw\index.html- Dispondrá de:
- Una cabecera con un logo y:
- Frase destacada: “MueblesPass: Nuestros muebles son una pasada”
- Segunda frase: “Amueble su casa con calidad y precios económicos.”
- Tercera frase: “Para la visualización correcta del sitio se recomienda el navegador…compatible con HTML5”
- Una botonera principal con enlaces a las páginas: (Quiénes somos: pag1.html), (Nuestros productos: pag2.html), (Nuestros clientes: pag3.html), (Contacto: pag4.html)
- En la principal Sección de Productos destacados: Sillas, Mesas, Armarios.
- En la principal Sección de Clientes destacados: Mitío, Unamigo.
- Una zona para anuncios con dos textos: Anuncio1aquí, Anuncio2aquí.
- Pie de página con los enlaces indicados en la botonera principal.
- La pag1.html dispondrá de una etiqueta canvas con el logotipo dibujado que se desee que utilice al menos 4 etiquetas de dibujo (se pueden repetir), Texto indicando qué es nuestra empresa y a qué se dedica. 2 imágenes con texto del director general y su acólito más pelotas.
- La pag2.html dispondrá de un vídeo con todos los botones, en varios formatos, con autoreproducción y bucle activados.
- La pag3.html dispondrá de los logotipos de 4 empresas y texto indicando lo contentas que están con nosotros.
- La pag4.html dispondrá de un formulario con los campos: email (tipo email, nombre, comentario, nivel de cliente de 1 a 100 (tipo range), teléfono de contacto (tipo tel), fecha (tipo date), zona (datalist con opciones: Norte, Sur, Centro, Este, Oeste).
Bibliografía:
http://www.comocreartuweb.com/curso-de-html/estructura-semantica-html5.htmlGuía HTML5.
Page updated
Google Sites
Report abuse