1
00:00:00,430 --> 00:00:05,929
Bueno, ahora vamos a continuar con contenido multimedia, pero esta vez vamos a ver cómo introducir vídeo, ¿vale?

2
00:00:06,969 --> 00:00:13,490
Entonces, vamos a partir de nuestro documento en el que ya estábamos haciendo todas las pruebas de multimedia,

3
00:00:14,150 --> 00:00:18,670
que recuerdo se llamaba prueba multimedia en el mío, prueba multimedia audio, ¿vale?

4
00:00:18,710 --> 00:00:21,750
Pero da igual como lo hayáis llamado vosotros, insisto, ¿vale?

5
00:00:22,449 --> 00:00:27,469
Entonces, estáis viendo a la izquierda mi navegador, donde ya hemos metido una canción, ¿vale?

6
00:00:27,469 --> 00:00:32,070
Que recuerdo que sonaba perfectamente con nuestro controlador de volumen

7
00:00:32,070 --> 00:00:36,229
Y ahora vamos a ver cómo meter, lo he dicho, cómo meter vídeo, ¿vale?

8
00:00:36,929 --> 00:00:41,009
Entonces, primero voy a crearme una segunda etiqueta H2, ¿vale?

9
00:00:41,009 --> 00:00:47,070
Que voy a llamarla reproductor de vídeo o cómo añadir vídeo, ¿vale?

10
00:00:47,750 --> 00:00:50,049
Y vamos a añadir vídeo de dos formas

11
00:00:50,049 --> 00:00:53,950
Vamos a añadir vídeo a través de un recurso externo como puede ser YouTube

12
00:00:53,950 --> 00:00:58,090
o a través de un propio vídeo que nosotros tengamos.

13
00:00:58,609 --> 00:01:06,329
Para eso, yo me he descargado un vídeo que os lo voy a mostrar.

14
00:01:11,329 --> 00:01:16,500
Vamos a ver si os lo puedo mostrar, que está aquí.

15
00:01:19,420 --> 00:01:24,760
Dentro de la carpeta de recursos tendréis que haber descargado vosotros un vídeo.

16
00:01:24,760 --> 00:01:26,579
¿Vale? Recuerdo que para descargar

17
00:01:26,579 --> 00:01:28,180
Vídeos vais a

18
00:01:28,180 --> 00:01:30,260
Pixabay, un vídeo cualquiera ¿Vale?

19
00:01:30,659 --> 00:01:32,500
Y ahí pues podéis vosotros

20
00:01:32,500 --> 00:01:34,319
Descargar el vídeo que queráis

21
00:01:34,319 --> 00:01:36,280
¿Vale? Yo voy a descargar

22
00:01:36,280 --> 00:01:38,459
Uno rapidito

23
00:01:38,459 --> 00:01:40,739
Ahora mismo no estáis viendo nada en mi pantalla

24
00:01:40,739 --> 00:01:42,400
Pero bueno, ya os digo que lo que estoy haciendo

25
00:01:42,400 --> 00:01:44,719
Es entrar en Pixabay y simplemente

26
00:01:44,719 --> 00:01:46,480
Descargo un vídeo, igual que hemos hecho

27
00:01:46,480 --> 00:01:48,040
Otras veces en otros

28
00:01:48,040 --> 00:01:50,579
Tutoriales ¿Vale?

29
00:01:50,579 --> 00:02:04,980
Vale, pues entonces voy a descargar un vídeo cualquiera

30
00:02:04,980 --> 00:02:07,060
Este por ejemplo

31
00:02:07,060 --> 00:02:14,909
Y lo voy a descargar dentro de la carpeta recursos

32
00:02:14,909 --> 00:02:18,189
Que si os acordáis era la carpeta en la que estábamos utilizando

33
00:02:18,189 --> 00:02:22,330
Para guardar, por ejemplo, la pista de audio que descargamos, ¿vale?

34
00:02:22,909 --> 00:02:26,030
Pues dentro de esa carpeta recursos yo acabo de descargar un vídeo

35
00:02:26,030 --> 00:02:29,289
Que he llamado vídeo.mp4, ¿vale?

36
00:02:29,289 --> 00:02:35,710
En MP4, recuerdo que es la extensión del tipo de fichero que se está descargando, ¿vale?

37
00:02:37,289 --> 00:02:48,710
Entonces, una vez que yo haya descargado ese vídeo, lo que voy a hacer es hacer un código que es muy parecido a este que os estoy marcando de audio, ¿vale?

38
00:02:49,530 --> 00:02:51,750
El procedimiento sería el siguiente.

39
00:02:52,409 --> 00:02:57,069
Esta vez, en vez de poner audio, vamos a poner la etiqueta vídeo, ¿vale?

40
00:02:57,069 --> 00:03:02,930
Y dentro de esa etiqueta video, fijaros que voy a copiar todo esto, ¿vale?

41
00:03:03,050 --> 00:03:05,830
¿Por qué? Porque lo vamos a repetir exactamente igual, ¿vale?

42
00:03:06,770 --> 00:03:13,169
Simplemente que ahora lo que va a modificar es el nombre de las extensiones, ¿vale?

43
00:03:13,830 --> 00:03:20,770
Y nosotros en vez de poner música.mp3, pues vamos a poner, en mi caso se llama video.mp4, ¿vale?

44
00:03:21,270 --> 00:03:25,770
Fijaros que ya me he completado aquí y ese mp4 luego me lo copio aquí, ¿vale?

45
00:03:26,349 --> 00:03:30,310
Luego vamos a poner video.ogg, eso se va a mantener igual.

46
00:03:30,969 --> 00:03:36,030
Y el último va a ser video.webm, ¿vale?

47
00:03:36,550 --> 00:03:39,009
Y esta extensión la copiamos.

48
00:03:39,710 --> 00:03:43,810
Y en vez de poner audio, pues pondremos video, ¿vale?

49
00:03:45,250 --> 00:03:46,189
Tal que así.

50
00:03:46,729 --> 00:03:48,569
Y esta frase la ponemos igual, ¿vale?

51
00:03:49,050 --> 00:03:53,870
Fijaros que al guardar yo esto, ahora mismo no aparece nada, ¿vale?

52
00:03:54,409 --> 00:04:02,409
Entonces, lo que vamos a hacer es actualizar la página de forma forzosa con el F5, ¿vale?

53
00:04:02,909 --> 00:04:07,889
Al darle al F5, fijaros que ya me ha aparecido aquí el vídeo que yo tenía, ¿vale?

54
00:04:08,469 --> 00:04:12,909
¿Qué pasa? Que ahora mismo yo no tengo controles para poder reproducir ese vídeo.

55
00:04:12,909 --> 00:04:20,069
Entonces, lo que voy a hacer es añadir una etiqueta, al igual que añadíamos en el audio, que se llama Controls, ¿vale?

56
00:04:20,069 --> 00:04:28,129
Y podéis ver cómo me aparece aquí una barrita donde yo puedo hacer clic, ¿vale?

57
00:04:29,389 --> 00:04:33,870
Y ahora al hacer clic, pues si veis que el vídeo se está ejecutando, ¿vale?

58
00:04:34,529 --> 00:04:37,069
Es un vídeo de un ojo que tampoco es muy...

59
00:04:37,810 --> 00:04:41,589
No sé si percibís que está funcionando, pero os puedo confirmar yo que está funcionando.

60
00:04:41,709 --> 00:04:44,230
Si no, aquí podéis ver la línea temporal, ¿vale?

61
00:04:46,009 --> 00:04:47,709
Problemas que estamos viendo en el vídeo.

62
00:04:47,709 --> 00:04:50,569
Estamos viendo el problema que es muy ancho

63
00:04:50,569 --> 00:04:52,589
Es mucho más ancho que la página, ¿vale?

64
00:04:53,189 --> 00:04:56,930
Entonces, lo que vamos a hacer es modificarlo

65
00:04:56,930 --> 00:04:59,870
Y lo modificamos con los parámetros al igual que hacemos con las imágenes

66
00:04:59,870 --> 00:05:01,649
Añadimos un parámetro width

67
00:05:01,649 --> 00:05:04,529
Que por ejemplo vamos a poner 800, ¿vale?

68
00:05:04,910 --> 00:05:06,910
Y fijaros que si yo no pongo altura

69
00:05:06,910 --> 00:05:09,209
Él automáticamente lo escala, ¿vale?

70
00:05:09,310 --> 00:05:11,689
Y me lo deja niquelado, ¿vale?

71
00:05:12,209 --> 00:05:14,629
Y yo por ahora podría darle a play

72
00:05:14,629 --> 00:05:17,509
Puedo ponerlo a pantalla completa

73
00:05:17,509 --> 00:05:24,410
Puedo descargarlo, verlo por frame, etc.

74
00:05:26,269 --> 00:05:31,329
Más cositas, más cositas, más cositas.

75
00:05:31,470 --> 00:05:35,470
Vamos a ver cómo añadir vídeos desde YouTube.

76
00:05:35,850 --> 00:05:43,649
Vamos a poner aquí una etiqueta H3, que indique que esto serían vídeos desde el servidor.

77
00:05:43,649 --> 00:05:58,269
y ahora añadimos una etiqueta h3 que diga vídeos desde youtube y voy a explicar cómo hacemos esto

78
00:05:58,269 --> 00:06:02,250
es muy sencillo vale lo voy a explicar sobre este propio navegador para que lo veamos nos vamos a ir

79
00:06:02,250 --> 00:06:11,399
a youtube y de la misma forma lo voy a explicar desde youtube lo voy a explicar desde la

80
00:06:11,399 --> 00:06:20,040
mediateca fijaros que yo ahora mismo estoy aquí en youtube y cogemos un vídeo cualquiera

81
00:06:24,759 --> 00:06:35,439
entonces fijaros que yo ahora una vez que ya empieza el vídeo vale está aquí yo ahora le

82
00:06:35,439 --> 00:06:41,639
voy a dar a la opción compartir vale y en la opción compartir vez que veis que tenemos aquí

83
00:06:41,639 --> 00:06:49,259
una opción que pone insertar le damos nos sale este código que estáis viendo aquí y aquí abajo

84
00:06:49,259 --> 00:06:55,319
aparece el botón copiar pues le vamos a dar a copiar vale y ya está copiado por lo que ya

85
00:06:55,319 --> 00:07:02,379
únicamente tendríamos que venirnos a esta página web y darle a control v que esperar vale y fijaros

86
00:07:02,379 --> 00:07:10,000
que si yo me voy a mi página web automáticamente me aparece mi vídeo aquí vale ventaja de esto

87
00:07:10,000 --> 00:07:17,100
Pues que al no tener el vídeo nosotros en nuestro servidor, la carga de esta página es mucho más rápida, ¿vale?

88
00:07:17,439 --> 00:07:19,060
Se carga de una forma mucho más rápida.

89
00:07:19,420 --> 00:07:22,899
Y de la misma forma nosotros podemos hacer modificaciones sobre el tamaño, ¿vale?

90
00:07:23,899 --> 00:07:26,279
800 x 600, por ejemplo, ¿vale?

91
00:07:27,779 --> 00:07:31,680
Y tendríamos un vídeo de alta calidad que viene directamente de YouTube, ¿vale?

92
00:07:32,980 --> 00:07:36,800
Insisto, podemos hacer lo mismo para la mediateca, ¿vale?

93
00:07:36,800 --> 00:07:44,839
Nos iríamos a mediateca.educa.madrid.rg, por ejemplo, para utilizar alguno de los vídeos que hemos hecho durante el curso, ¿vale?

94
00:07:45,959 --> 00:07:49,600
Y aquí os pondríamos una etiqueta H4, ¿vale?

95
00:07:49,879 --> 00:07:54,660
Que sea vídeos desde servidores externos, ¿vale?

96
00:07:58,230 --> 00:07:58,870
Externos.

97
00:07:59,050 --> 00:08:03,029
Y ahora aquí pondríamos el H4 desde YouTube.

98
00:08:03,029 --> 00:08:10,430
y pondríamos otra etiqueta, h4, que diga desde la mediateca, ¿vale?

99
00:08:10,430 --> 00:08:21,290
Y ahora aquí, ¿vale? Vamos a ver si quiere cargar, ah, bueno, está cargando, ¿vale?

100
00:08:21,810 --> 00:08:34,059
Pues, por ejemplo, vamos a buscar un vídeo cualquiera, por ejemplo, vamos a buscar Tico, ¿vale?

101
00:08:34,139 --> 00:08:37,279
A ver qué aparece, va a aparecer algo de algún otro profe.

102
00:08:37,279 --> 00:08:39,159
por ejemplo

103
00:08:39,159 --> 00:08:39,639
vale

104
00:08:39,639 --> 00:08:42,779
mira

105
00:08:42,779 --> 00:08:44,419
tenemos aquí algunos vídeos

106
00:08:44,419 --> 00:08:47,379
vuestros

107
00:08:47,379 --> 00:08:51,610
vale, vamos por ejemplo

108
00:08:51,610 --> 00:08:53,330
a, bueno, vamos a poner uno

109
00:08:53,330 --> 00:08:54,929
mío y así es menos problema

110
00:08:54,929 --> 00:08:57,029
uno de

111
00:08:57,029 --> 00:09:00,190
electrónica

112
00:09:00,190 --> 00:09:09,320
vale, lo vamos a buscar

113
00:09:09,320 --> 00:09:11,559
y

114
00:09:11,559 --> 00:09:14,340
pues no va a salir ninguno

115
00:09:14,340 --> 00:09:15,720
vale

116
00:09:15,720 --> 00:09:18,159
Ya se lo que le pongo

117
00:09:18,159 --> 00:09:24,049
Aquí tenemos

118
00:09:24,049 --> 00:09:25,210
Algunos miembros

119
00:09:25,210 --> 00:09:25,490
¿Vale?

120
00:09:26,309 --> 00:09:27,090
Pues por ejemplo

121
00:09:27,090 --> 00:09:28,090
Este mismo

122
00:09:28,090 --> 00:09:29,129
¿Vale?

123
00:09:30,049 --> 00:09:32,009
Tendríamos aquí el vídeo reproduciéndose

124
00:09:32,009 --> 00:09:32,389
¿Vale?

125
00:09:32,750 --> 00:09:33,269
Y vemos

126
00:09:33,269 --> 00:09:35,750
Que aquí tenemos la opción de embeber

127
00:09:35,750 --> 00:09:36,370
Pues lo mismo

128
00:09:36,370 --> 00:09:36,850
Le damos

129
00:09:36,850 --> 00:09:38,250
Aparece el código

130
00:09:38,250 --> 00:09:39,830
Control-C para copiar

131
00:09:39,830 --> 00:09:41,250
Y nos venimos aquí

132
00:09:41,250 --> 00:09:42,190
Control-V

133
00:09:42,190 --> 00:09:42,889
¿Vale?

134
00:09:43,289 --> 00:09:44,129
Y ya

135
00:09:44,129 --> 00:09:45,070
Si os dais cuenta

136
00:09:45,070 --> 00:09:46,169
Si nos vamos a nuestra web

137
00:09:46,169 --> 00:09:47,210
Aquí debajo

138
00:09:47,210 --> 00:09:49,769
aparece ese vídeo desde la biblioteca, ¿vale?

139
00:09:50,049 --> 00:09:57,070
Y lo mismo que antes, podríamos cambiar el tamaño por 800, por 600, ¿vale?

140
00:09:57,590 --> 00:10:00,809
Y ya está, ¿vale?

141
00:10:02,269 --> 00:10:08,769
Pues fijaros, este parámetro iframe sirve para añadir cualquier tipo de contenido, ¿vale?

142
00:10:09,110 --> 00:10:15,129
Entonces, vamos a crearnos una nueva etiqueta h2 para decir recursos, por ejemplo,

143
00:10:15,129 --> 00:10:18,570
vamos a titularlo recursos incrustados, ¿vale?

144
00:10:19,029 --> 00:10:25,809
y fijaros lo que podemos hacer, que nosotros podríamos hacer, añadir un iframe, ¿vale?

145
00:10:25,809 --> 00:10:30,769
Nos vamos a una página web cualquiera, por ejemplo, a la página web del instituto, ¿vale?

146
00:10:30,889 --> 00:10:34,710
O a la página web de EducaMadrid, la página web oficial, ¿vale?

147
00:10:36,029 --> 00:10:37,549
Que es esta, ¿vale?

148
00:10:37,990 --> 00:10:44,909
Y fijaros que si yo pongo aquí iframe y luego pongo src,

149
00:10:44,909 --> 00:10:52,789
lo que ponga, la dirección que ponga entre comillas, copiaría esta URL y la pego aquí, ¿vale?

150
00:10:53,730 --> 00:10:58,470
Y ya simplemente lo que hago es que lo cierre, ¿vale?

151
00:10:58,850 --> 00:11:06,730
Y fijaros que me aparecería aquí abajo, veis donde pone recursos incrustados, me aparecería la página, ¿vale?

152
00:11:07,710 --> 00:11:11,330
Insisto, yo esto puedo modificarlo, ¿vale?

153
00:11:11,330 --> 00:11:16,789
Yo podría, por ejemplo, añadirle un parámetro de anchura, ¿vale?

154
00:11:16,990 --> 00:11:20,429
Para subir 800, ¿vale?

155
00:11:20,929 --> 00:11:23,169
Fijaros cómo me acaba de aumentar la página, ¿vale?

156
00:11:23,409 --> 00:11:28,029
Y fijaros que también tengo aquí mi propio scroll para yo navegar sobre esa página, ¿vale?

157
00:11:29,070 --> 00:11:32,509
Tengo otra opción que sería la altura, ¿vale?

158
00:11:32,750 --> 00:11:34,889
6, que le pongo 600.

159
00:11:35,769 --> 00:11:37,450
Ya me ha aumentado el tamaño.

160
00:11:38,169 --> 00:11:45,809
Incluso le puedo meter un parámetro que es allow full screen, ¿vale?

161
00:11:45,809 --> 00:11:51,889
Que esto me permite, ¿vale?

162
00:11:52,269 --> 00:11:56,990
Fijaros, a ver si carga, porque hay veces que no carga bien.

163
00:11:58,289 --> 00:12:02,769
Me permitiría hacer un full screen de la pantalla, ¿vale?

164
00:12:02,809 --> 00:12:06,509
Pero hay veces que no carga este parámetro fallo, ¿vale?

165
00:12:07,049 --> 00:12:13,379
Sí.

166
00:12:14,899 --> 00:12:15,139
¿Vale?

167
00:12:15,320 --> 00:12:21,620
No funciona, pero bueno, la idea es esta, que veáis que podemos meter una página web dentro de otra, ¿vale?

168
00:12:22,919 --> 00:12:28,759
Bueno, pues con esto es todo de lo que sería el contenido multimedia, ¿vale?

169
00:12:29,759 --> 00:12:31,240
Así que, a darle caña.