ERROR: Unidad 4. Caso práctico 7. HTML 5.

Aprovechando vuestr@s consultas sobre este caso práctico que están haciendo nuestr@s alumn@s estos días, para comentar algunos errores detectados:

1. Hay que tener el JRE de Java instalado en la maquina, para poder descargar el vídeo con la herramienta web Keepvid. Puedes descargarte java desde esta web: https://www.java.com/es/download/
2. La página HTML5 funciona con las últimas versiones de los navegadores que ya soportan este estándar, con chrome siempre funciona. Igual con otro navegador sino esta actualizado puede que no funcione. 

Si detectáis algún problema más, no dudéis en comunicarlos.

Caso práctico 7. HTML 5.

Tiempo: 15 min.

Dificultad: Fácil.

Objetivos: Crear una página web con elementos multimedia.

Vamos a ver un sencillo ejemplo de página web que utilice etiquetas HTML5 para incrustar elementos multimedia.

1. Obtención de los vídeos.
Puedes utilizar vídeos que hayas grabado tú mismo desde tu móvil, o descargar algún vídeo desde cualquier portal, como Youtube. En nuestro caso, vamos a descargar un tutorial de HTML5 desde Youtube. Para ello, vamos a utilizar la herramienta web Keepvid (http://keepvid.com), aunque puedes utilizar cualquiera para la descarga de vídeos/audio, como ClipNabber.

Para ello, accedemos a Youtube y buscamos el vídeo que deseamos. Copiamos la URL (en nuestro caso http://www.youtube.com/watch?v=mzPxo7Y6JyA), y la pegamos en la caja de texto de Keepvid, pulsamos Download y pulsamos en Aceptar sobre el applet de java que se encargará de la conversión.

Hecho esto, nos aparecerá una sección en la página con los diferentes tipos de fichero que podemos descargar.

U4

Descargaremos el vídeo en formato WebM y en MP4, a la resolución que deseemos.

Please report any issues to: contact@keepvid.com

What is HTML5?
youtube.com / TopicSimple
1:33

» Download 3GP « - 144p

» Download 3GP « - 240p

» Download FLV « - 240p

» Download MP4 « - (Max 480p)

» Download MP4 « - 720p

» Download MP4 « - 144p (Video Only)

» Download MP4 « - 240p (Video Only)

» Download MP4 « - 360p (Video Only)

» Download MP4 « - 480p (Video Only)

» Download MP4 « - 720p (Video Only)

» Download M4A « - 128kbps (Audio Only)

» Download WEBM « - 360p

» Download MP3 « - using ( SnipMP3.com )

*NEW* » Download SRT « - Subtitles - using ( KeepSubs.com )

Podemos hacer clic también en la descarga del fichero MP3 utilizando SnipMP3, o utilizar cualquier archivo de audio que dispongas.

Ten en cuenta que si el navegador no admite ficheros mp3, puedes utilizar herramientas como soundconverter o audacity para realizar la conversión.

What is HTML5?

http://youtu.be/mzPxo7Y6JyA

2. Creación de la página web.
Una vez tengamos los archivos descargados y preparados, los copiamos a una carpeta en nuestro home, que llamaremos html5, y creamos en ella un fichero llamado index.html con el siguiente contenido:

   

   




   

Ejemplo de página con HTML5

    Vamos a ver un vídeo sobre HTML5:


   

  

    Y su correspondiente audio:


   

  

   

Puedes observar algunos detalles:

• El elemento vídeo permiten especificar el ancho y alto en que éstos se
• Tanto el elemento vídeo como audio, deben
• Como ves, podemos añadir varios sources 

Reproducirán con los parámetros width y height. Además, la etiqueta controls, permite añadir controles de reproducción (pausa, reproducir,etc.), junto con el vídeo.

Tener anidado el elemento source, en el que indicaremos el fichero a reproducir mediante el atributo src y su tipo, mediante type. Dentro de las etiquetas vídeo y audio. Con esto, permitimos que el navegador utilice un source u otro en función de sus posibilidades. Por ejemplo, en nuestro caso, si no admite el formato webm, utilizará el fichero mp4, y si no admite ninguno nos mostrará el mensaje “Tu navegador no admite la etiqueta vídeo o los formatos utilizados”.

Y hasta aquí esta entrada sobre el ERROR: Unidad 4. Caso práctico 7. HTML 5.

ENLACES RELACIONADOS

HTML - HTML 5

YouTube
U4


DIÁLOGO ABIERTO

Esperando que os sea de interés y os aporte algo. ¿Nos gustaría saber si te ha gustado esta entrada? ¿Estas en esta unidad actualmente? ¿Y habían hecho este Caso Práctico tus alumn@s? Gracias por seguirnos y leernos. Hasta el próximo artículo...

¿Me regalas un tuit o tweet de esta entrada? Gracias por compartirla...