Saltar navegación

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

HTML - Contenido Multimedia II - 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 1 de diciembre de 2020 por Fernando M.

119 visualizaciones

Más información Transcripción

Descargar la transcripción

Bueno, ahora vamos a continuar con contenido multimedia, pero esta vez vamos a ver cómo introducir vídeo, ¿vale? 00:00:00
Entonces, vamos a partir de nuestro documento en el que ya estábamos haciendo todas las pruebas de multimedia, 00:00:06
que recuerdo se llamaba prueba multimedia en el mío, prueba multimedia audio, ¿vale? 00:00:14
Pero da igual como lo hayáis llamado vosotros, insisto, ¿vale? 00:00:18
Entonces, estáis viendo a la izquierda mi navegador, donde ya hemos metido una canción, ¿vale? 00:00:22
Que recuerdo que sonaba perfectamente con nuestro controlador de volumen 00:00:27
Y ahora vamos a ver cómo meter, lo he dicho, cómo meter vídeo, ¿vale? 00:00:32
Entonces, primero voy a crearme una segunda etiqueta H2, ¿vale? 00:00:36
Que voy a llamarla reproductor de vídeo o cómo añadir vídeo, ¿vale? 00:00:41
Y vamos a añadir vídeo de dos formas 00:00:47
Vamos a añadir vídeo a través de un recurso externo como puede ser YouTube 00:00:50
o a través de un propio vídeo que nosotros tengamos. 00:00:53
Para eso, yo me he descargado un vídeo que os lo voy a mostrar. 00:00:58
Vamos a ver si os lo puedo mostrar, que está aquí. 00:01:11
Dentro de la carpeta de recursos tendréis que haber descargado vosotros un vídeo. 00:01:19
¿Vale? Recuerdo que para descargar 00:01:24
Vídeos vais a 00:01:26
Pixabay, un vídeo cualquiera ¿Vale? 00:01:28
Y ahí pues podéis vosotros 00:01:30
Descargar el vídeo que queráis 00:01:32
¿Vale? Yo voy a descargar 00:01:34
Uno rapidito 00:01:36
Ahora mismo no estáis viendo nada en mi pantalla 00:01:38
Pero bueno, ya os digo que lo que estoy haciendo 00:01:40
Es entrar en Pixabay y simplemente 00:01:42
Descargo un vídeo, igual que hemos hecho 00:01:44
Otras veces en otros 00:01:46
Tutoriales ¿Vale? 00:01:48
Vale, pues entonces voy a descargar un vídeo cualquiera 00:01:50
Este por ejemplo 00:02:04
Y lo voy a descargar dentro de la carpeta recursos 00:02:07
Que si os acordáis era la carpeta en la que estábamos utilizando 00:02:14
Para guardar, por ejemplo, la pista de audio que descargamos, ¿vale? 00:02:18
Pues dentro de esa carpeta recursos yo acabo de descargar un vídeo 00:02:22
Que he llamado vídeo.mp4, ¿vale? 00:02:26
En MP4, recuerdo que es la extensión del tipo de fichero que se está descargando, ¿vale? 00:02:29
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? 00:02:37
El procedimiento sería el siguiente. 00:02:49
Esta vez, en vez de poner audio, vamos a poner la etiqueta vídeo, ¿vale? 00:02:52
Y dentro de esa etiqueta video, fijaros que voy a copiar todo esto, ¿vale? 00:02:57
¿Por qué? Porque lo vamos a repetir exactamente igual, ¿vale? 00:03:03
Simplemente que ahora lo que va a modificar es el nombre de las extensiones, ¿vale? 00:03:06
Y nosotros en vez de poner música.mp3, pues vamos a poner, en mi caso se llama video.mp4, ¿vale? 00:03:13
Fijaros que ya me he completado aquí y ese mp4 luego me lo copio aquí, ¿vale? 00:03:21
Luego vamos a poner video.ogg, eso se va a mantener igual. 00:03:26
Y el último va a ser video.webm, ¿vale? 00:03:30
Y esta extensión la copiamos. 00:03:36
Y en vez de poner audio, pues pondremos video, ¿vale? 00:03:39
Tal que así. 00:03:45
Y esta frase la ponemos igual, ¿vale? 00:03:46
Fijaros que al guardar yo esto, ahora mismo no aparece nada, ¿vale? 00:03:49
Entonces, lo que vamos a hacer es actualizar la página de forma forzosa con el F5, ¿vale? 00:03:54
Al darle al F5, fijaros que ya me ha aparecido aquí el vídeo que yo tenía, ¿vale? 00:04:02
¿Qué pasa? Que ahora mismo yo no tengo controles para poder reproducir ese vídeo. 00:04:08
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? 00:04:12
Y podéis ver cómo me aparece aquí una barrita donde yo puedo hacer clic, ¿vale? 00:04:20
Y ahora al hacer clic, pues si veis que el vídeo se está ejecutando, ¿vale? 00:04:29
Es un vídeo de un ojo que tampoco es muy... 00:04:34
No sé si percibís que está funcionando, pero os puedo confirmar yo que está funcionando. 00:04:37
Si no, aquí podéis ver la línea temporal, ¿vale? 00:04:41
Problemas que estamos viendo en el vídeo. 00:04:46
Estamos viendo el problema que es muy ancho 00:04:47
Es mucho más ancho que la página, ¿vale? 00:04:50
Entonces, lo que vamos a hacer es modificarlo 00:04:53
Y lo modificamos con los parámetros al igual que hacemos con las imágenes 00:04:56
Añadimos un parámetro width 00:04:59
Que por ejemplo vamos a poner 800, ¿vale? 00:05:01
Y fijaros que si yo no pongo altura 00:05:04
Él automáticamente lo escala, ¿vale? 00:05:06
Y me lo deja niquelado, ¿vale? 00:05:09
Y yo por ahora podría darle a play 00:05:12
Puedo ponerlo a pantalla completa 00:05:14
Puedo descargarlo, verlo por frame, etc. 00:05:17
Más cositas, más cositas, más cositas. 00:05:26
Vamos a ver cómo añadir vídeos desde YouTube. 00:05:31
Vamos a poner aquí una etiqueta H3, que indique que esto serían vídeos desde el servidor. 00:05:35
y ahora añadimos una etiqueta h3 que diga vídeos desde youtube y voy a explicar cómo hacemos esto 00:05:43
es muy sencillo vale lo voy a explicar sobre este propio navegador para que lo veamos nos vamos a ir 00:05:58
a youtube y de la misma forma lo voy a explicar desde youtube lo voy a explicar desde la 00:06:02
mediateca fijaros que yo ahora mismo estoy aquí en youtube y cogemos un vídeo cualquiera 00:06:11
entonces fijaros que yo ahora una vez que ya empieza el vídeo vale está aquí yo ahora le 00:06:24
voy a dar a la opción compartir vale y en la opción compartir vez que veis que tenemos aquí 00:06:35
una opción que pone insertar le damos nos sale este código que estáis viendo aquí y aquí abajo 00:06:41
aparece el botón copiar pues le vamos a dar a copiar vale y ya está copiado por lo que ya 00:06:49
únicamente tendríamos que venirnos a esta página web y darle a control v que esperar vale y fijaros 00:06:55
que si yo me voy a mi página web automáticamente me aparece mi vídeo aquí vale ventaja de esto 00:07:02
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? 00:07:10
Se carga de una forma mucho más rápida. 00:07:17
Y de la misma forma nosotros podemos hacer modificaciones sobre el tamaño, ¿vale? 00:07:19
800 x 600, por ejemplo, ¿vale? 00:07:23
Y tendríamos un vídeo de alta calidad que viene directamente de YouTube, ¿vale? 00:07:27
Insisto, podemos hacer lo mismo para la mediateca, ¿vale? 00:07:32
Nos iríamos a mediateca.educa.madrid.rg, por ejemplo, para utilizar alguno de los vídeos que hemos hecho durante el curso, ¿vale? 00:07:36
Y aquí os pondríamos una etiqueta H4, ¿vale? 00:07:45
Que sea vídeos desde servidores externos, ¿vale? 00:07:49
Externos. 00:07:58
Y ahora aquí pondríamos el H4 desde YouTube. 00:07:59
y pondríamos otra etiqueta, h4, que diga desde la mediateca, ¿vale? 00:08:03
Y ahora aquí, ¿vale? Vamos a ver si quiere cargar, ah, bueno, está cargando, ¿vale? 00:08:10
Pues, por ejemplo, vamos a buscar un vídeo cualquiera, por ejemplo, vamos a buscar Tico, ¿vale? 00:08:21
A ver qué aparece, va a aparecer algo de algún otro profe. 00:08:34
por ejemplo 00:08:37
vale 00:08:39
mira 00:08:39
tenemos aquí algunos vídeos 00:08:42
vuestros 00:08:44
vale, vamos por ejemplo 00:08:47
a, bueno, vamos a poner uno 00:08:51
mío y así es menos problema 00:08:53
uno de 00:08:54
electrónica 00:08:57
vale, lo vamos a buscar 00:09:00
pues no va a salir ninguno 00:09:11
vale 00:09:14
Ya se lo que le pongo 00:09:15
Aquí tenemos 00:09:18
Algunos miembros 00:09:24
¿Vale? 00:09:25
Pues por ejemplo 00:09:26
Este mismo 00:09:27
¿Vale? 00:09:28
Tendríamos aquí el vídeo reproduciéndose 00:09:30
¿Vale? 00:09:32
Y vemos 00:09:32
Que aquí tenemos la opción de embeber 00:09:33
Pues lo mismo 00:09:35
Le damos 00:09:36
Aparece el código 00:09:36
Control-C para copiar 00:09:38
Y nos venimos aquí 00:09:39
Control-V 00:09:41
¿Vale? 00:09:42
Y ya 00:09:43
Si os dais cuenta 00:09:44
Si nos vamos a nuestra web 00:09:45
Aquí debajo 00:09:46
aparece ese vídeo desde la biblioteca, ¿vale? 00:09:47
Y lo mismo que antes, podríamos cambiar el tamaño por 800, por 600, ¿vale? 00:09:50
Y ya está, ¿vale? 00:09:57
Pues fijaros, este parámetro iframe sirve para añadir cualquier tipo de contenido, ¿vale? 00:10:02
Entonces, vamos a crearnos una nueva etiqueta h2 para decir recursos, por ejemplo, 00:10:09
vamos a titularlo recursos incrustados, ¿vale? 00:10:15
y fijaros lo que podemos hacer, que nosotros podríamos hacer, añadir un iframe, ¿vale? 00:10:19
Nos vamos a una página web cualquiera, por ejemplo, a la página web del instituto, ¿vale? 00:10:25
O a la página web de EducaMadrid, la página web oficial, ¿vale? 00:10:30
Que es esta, ¿vale? 00:10:36
Y fijaros que si yo pongo aquí iframe y luego pongo src, 00:10:37
lo que ponga, la dirección que ponga entre comillas, copiaría esta URL y la pego aquí, ¿vale? 00:10:44
Y ya simplemente lo que hago es que lo cierre, ¿vale? 00:10:53
Y fijaros que me aparecería aquí abajo, veis donde pone recursos incrustados, me aparecería la página, ¿vale? 00:10:58
Insisto, yo esto puedo modificarlo, ¿vale? 00:11:07
Yo podría, por ejemplo, añadirle un parámetro de anchura, ¿vale? 00:11:11
Para subir 800, ¿vale? 00:11:16
Fijaros cómo me acaba de aumentar la página, ¿vale? 00:11:20
Y fijaros que también tengo aquí mi propio scroll para yo navegar sobre esa página, ¿vale? 00:11:23
Tengo otra opción que sería la altura, ¿vale? 00:11:29
6, que le pongo 600. 00:11:32
Ya me ha aumentado el tamaño. 00:11:35
Incluso le puedo meter un parámetro que es allow full screen, ¿vale? 00:11:38
Que esto me permite, ¿vale? 00:11:45
Fijaros, a ver si carga, porque hay veces que no carga bien. 00:11:52
Me permitiría hacer un full screen de la pantalla, ¿vale? 00:11:58
Pero hay veces que no carga este parámetro fallo, ¿vale? 00:12:02
Sí. 00:12:07
¿Vale? 00:12:14
No funciona, pero bueno, la idea es esta, que veáis que podemos meter una página web dentro de otra, ¿vale? 00:12:15
Bueno, pues con esto es todo de lo que sería el contenido multimedia, ¿vale? 00:12:22
Así que, a darle caña. 00:12:29
Autor/es:
Fernando Martínez Martí
Subido por:
Fernando M.
Licencia:
Reconocimiento - Sin obra derivada
Visualizaciones:
119
Fecha:
1 de diciembre de 2020 - 19:54
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
12′ 32″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
42.78 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid