1 00:00:00,880 --> 00:00:06,519 Bueno, ahora vamos a ver cómo añadir contenido multimedia en HTML, ¿vale? 2 00:00:06,719 --> 00:00:14,699 Esto es muy importante porque antiguamente en las versiones anteriores de HTML no se permitía integrar lo que es contenido multimedia. 3 00:00:14,699 --> 00:00:20,140 Era necesario utilizar plugins externos, ¿vale? Sin embargo, ya con HTML5 sí permite. 4 00:00:21,519 --> 00:00:27,160 Entonces, bueno, nos vamos a abrir nuestro editor y nuestra web, ¿vale? 5 00:00:27,160 --> 00:00:32,859 Y lo primero, simplemente recordaros que dentro de la web de ZapSplat, ¿vale? 6 00:00:34,119 --> 00:00:43,159 Que podéis acceder, como veis, utilizando el navegador, podéis acceder. 7 00:00:44,020 --> 00:00:47,880 Y aquí os podéis descargar una canción cualquiera, ¿vale? 8 00:00:48,880 --> 00:00:56,759 Es importante que hagáis esto porque, bueno, porque vamos a necesitarlo, ¿vale? 9 00:00:57,159 --> 00:01:09,799 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. 10 00:01:09,799 --> 00:01:29,760 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? 11 00:01:29,760 --> 00:01:38,040 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? 12 00:01:39,819 --> 00:01:48,120 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. 13 00:01:48,120 --> 00:02:08,830 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? 14 00:02:08,830 --> 00:02:17,849 Y vamos a ponernos una etiqueta H1 que sea contenido multimedia en HTML5. 15 00:02:18,310 --> 00:02:24,229 Y ahora una etiqueta H2 para añadir audio, ¿vale? 16 00:02:25,770 --> 00:02:30,210 Bueno, pues ¿cómo añadimos audio? Añadir audio es muy sencillo. 17 00:02:30,889 --> 00:02:36,990 Tiene una etiqueta, ¿vale? Que es una etiqueta audio, simplemente, ¿vale? 18 00:02:36,990 --> 00:03:00,169 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. 19 00:03:00,169 --> 00:03:11,370 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? 20 00:03:11,370 --> 00:03:26,780 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? 21 00:03:26,780 --> 00:03:33,000 Vamos a poner recursos barra música.mp3, como veis ahí en pantalla, ¿vale? 22 00:03:33,819 --> 00:03:44,060 Y ahora, importante, vamos a poner type y entre comillas vamos a poner audio barra mp3. 23 00:03:44,819 --> 00:03:47,919 Y cerramos la etiqueta source, ¿vale? 24 00:03:48,680 --> 00:03:54,379 Esto es muy importante que lo hagamos porque no todos los navegadores son compatibles con todos los formatos, ¿vale? 25 00:03:54,379 --> 00:03:59,400 Entonces lo vamos a repetir dos veces más para dos tipos de formatos diferentes, ¿vale? 26 00:03:59,659 --> 00:04:10,680 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. 27 00:04:10,680 --> 00:04:18,439 Como digo, esto es por si el navegador que tenemos no es compatible con ese formato, ¿vale? 28 00:04:18,439 --> 00:04:38,800 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? 29 00:04:38,800 --> 00:04:54,100 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. 30 00:04:54,100 --> 00:05:15,759 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? 31 00:05:15,759 --> 00:05:33,519 ¿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? 32 00:05:33,519 --> 00:05:47,449 Y al actualizarse, como tengo habilitado el sincronismo este no me lo va a dejar ver, ¿vale? 33 00:05:47,449 --> 00:05:51,970 Pero la idea del autoplay es que cuando se abra la web automáticamente se reproduzca, ¿vale? 34 00:05:53,170 --> 00:05:57,470 Y otro contenido, otra etiqueta que le podríamos poner es la etiqueta loop, ¿vale? 35 00:05:57,610 --> 00:06:00,310 Que esto lo que hace es que lo reproduce en ciclo, ¿vale? 36 00:06:00,949 --> 00:06:10,319 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? 37 00:06:10,319 --> 00:06:28,759 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. 38 00:06:28,759 --> 00:06:39,379 Y con esto podríamos nosotros añadir nuestras propias canciones en HTML, ¿vale? 39 00:06:39,620 --> 00:06:45,500 En próximos vídeos vamos a ver cómo añadir vídeos a nuestra página web, ¿vale? 40 00:06:45,699 --> 00:06:50,860 Y cómo integrar vídeos de otras webs como por ejemplo la Mediateca o como por ejemplo YouTube, ¿vale? 41 00:06:52,100 --> 00:06:55,579 Bueno, pues espero que os haya sido útil. ¡Chao!