Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

HTML - Contenido Multimedia I - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 17 de noviembre de 2020 por Fernando M.

149 visualizaciones

Más información Transcripción

Descargar la transcripción

Bueno, ahora vamos a ver cómo añadir contenido multimedia en HTML, ¿vale? 00:00:00
Esto es muy importante porque antiguamente en las versiones anteriores de HTML no se permitía integrar lo que es contenido multimedia. 00:00:06
Era necesario utilizar plugins externos, ¿vale? Sin embargo, ya con HTML5 sí permite. 00:00:14
Entonces, bueno, nos vamos a abrir nuestro editor y nuestra web, ¿vale? 00:00:21
Y lo primero, simplemente recordaros que dentro de la web de ZapSplat, ¿vale? 00:00:27
Que podéis acceder, como veis, utilizando el navegador, podéis acceder. 00:00:34
Y aquí os podéis descargar una canción cualquiera, ¿vale? 00:00:44
Es importante que hagáis esto porque, bueno, porque vamos a necesitarlo, ¿vale? 00:00:48
Entonces, cuando la descarguéis, la canción que sea, deberéis de descargarla en una carpeta que se llame recursos. Igual que lo hicimos en otra de las prácticas. 00:00:57
Entonces, fijaros que yo tengo aquí mi carpeta, ¿vale? Me voy a ir a donde tengo los códigos en los que estamos trabajando, ¿vale? Fijaros. Y dentro de mi carpeta recursos, yo aquí me he guardado una canción que he llamado música.mp3, ¿vale? 00:01:09
Entonces, es importante que vosotros también lo hagáis, que os descarguéis una canción de esa web y la guardéis dentro de vuestra carpeta recursos, ¿vale? 00:01:29
Dicho esto, vamos a empezar a añadir ese contenido. Este vídeo va a tratar solo de añadir audio, ¿vale? Y haremos otros para añadir vídeo. 00:01:39
Y bueno, simplemente pues empezamos como siempre, lo primero es crearnos nuestra estructura HTML5, ¿vale? Aquí ponemos nuestra etiqueta, pues ponemos contenido multimedia en HTML y aquí ponemos es, ¿vale? 00:01:48
Y vamos a ponernos una etiqueta H1 que sea contenido multimedia en HTML5. 00:02:08
Y ahora una etiqueta H2 para añadir audio, ¿vale? 00:02:18
Bueno, pues ¿cómo añadimos audio? Añadir audio es muy sencillo. 00:02:25
Tiene una etiqueta, ¿vale? Que es una etiqueta audio, simplemente, ¿vale? 00:02:30
No tiene más. Esa etiqueta la vamos a poner nosotros un atributo muy importante, ¿vale? Que va a ser el atributo controls, ¿vale? Que no hay que ponerle nada, simplemente controls. Esto es para que nos aparezca una barra para poder controlar ese audio que pongamos, ¿vale? Como el que estáis viendo en pantalla. 00:02:36
Veis que aparece un play y aparece todo esto. Entonces, ahora lo que vamos a hacer es añadir el archivo fuente. ¿Cómo añadimos el archivo fuente? 00:03:00
Vamos a poner la etiqueta source, ¿vale? Y ahora vamos a poner src. Y dentro del atributo src vamos a buscar la canción en sí, ¿vale? 00:03:11
Vamos a poner recursos barra música.mp3, como veis ahí en pantalla, ¿vale? 00:03:26
Y ahora, importante, vamos a poner type y entre comillas vamos a poner audio barra mp3. 00:03:33
Y cerramos la etiqueta source, ¿vale? 00:03:44
Esto es muy importante que lo hagamos porque no todos los navegadores son compatibles con todos los formatos, ¿vale? 00:03:48
Entonces lo vamos a repetir dos veces más para dos tipos de formatos diferentes, ¿vale? 00:03:54
Que va a ser música mp3, música ogg, y aquí vamos a poner también ogg, y música wap, y aquí wap. 00:03:59
Como digo, esto es por si el navegador que tenemos no es compatible con ese formato, ¿vale? 00:04:10
Y por último, vamos a poner aquí una etiqueta P, que aparecerá solo en caso que no sea capaz de reproducir el archivo, ¿vale? Y vamos a poner, no se puede reproducir el archivo, el formato no es compatible con su navegador, ¿vale? 00:04:18
Y fijaros que yo ahora tengo aquí mi control, ¿vale? Donde yo puedo, pues, bajar y subir el volumen, tengo la opción de descargar, ¿vale? Y tengo también la opción de darle al play. 00:04:38
Le doy, ¿vale? Y no sé si se está yendo, ¿vale? Entonces fijaros que yo puedo avanzar la canción, puedo mutearlo, puedo bajar el volumen, ¿vale? Puedo darle el pause, ¿vale? 00:04:54
¿Qué más propiedades podemos añadir dentro de este código? Pues podemos añadir, por ejemplo, la opción autoplay, ¿vale? Entonces, la opción autoplay, para eso tenemos que darle a F5 y actualizar la web, ¿vale? 00:05:15
Y al actualizarse, como tengo habilitado el sincronismo este no me lo va a dejar ver, ¿vale? 00:05:33
Pero la idea del autoplay es que cuando se abra la web automáticamente se reproduzca, ¿vale? 00:05:47
Y otro contenido, otra etiqueta que le podríamos poner es la etiqueta loop, ¿vale? 00:05:53
Que esto lo que hace es que lo reproduce en ciclo, ¿vale? 00:05:57
Esta canción es muy larga, dura 3 minutos 12, así que me la voy a llevar al final para que lo veáis, ¿vale? 00:06:00
Voy a bajar un poco el volumen. ¿Veis que tenemos? Va avanzando y cuando llegue al final, pues debería de reproducir otra vez la canción, ¿vale? Y fijaros, funciona perfectamente, ¿vale? Le doy al pause. 00:06:10
Y con esto podríamos nosotros añadir nuestras propias canciones en HTML, ¿vale? 00:06:28
En próximos vídeos vamos a ver cómo añadir vídeos a nuestra página web, ¿vale? 00:06:39
Y cómo integrar vídeos de otras webs como por ejemplo la Mediateca o como por ejemplo YouTube, ¿vale? 00:06:45
Bueno, pues espero que os haya sido útil. ¡Chao! 00:06:52
Autor/es:
Fernando Martínez Martí
Subido por:
Fernando M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
149
Fecha:
17 de noviembre de 2020 - 19:40
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
06′ 56″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
19.56 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid