HTML5 es compatible con una variedad de formatos de audio y video, pero no todos los navegadores admiten todos los formatos.
MP4 (H.264 + AAC): El más ampliamente soportado por todos los navegadores modernos (Chrome, Firefox, Edge, Safari); WebM (VP8/VP9 + Vorbis/Opus): Optimizado para la web y de código abierto (Compatible con la mayoría de navegadores modernos); Ogg (Theora + Vorbis): Menos común, pero aún admitido por algunos navegadores como Firefox.
MP3: Altamente compatible y ampliamente usado; Ogg (Vorbis): Formato libre y abierto, bien soportado; WAV: Alta calidad, pero archivos grandes. Soportado por la mayoría de navegadores.
Los objetos interactivos de DescartesJS permiten la inclusión de elementos de audio y vídeo. Estos pueden ser introducidos de varias formas:
A través de un espacio HTMLiframe que puede llevar incorporado cualquier objeto soportado por una página web, incluidos los elementos de audio y vídeo.
Mediante un evento que permite reproducir archivos de sonido.
Utilizando controles de audio y vídeo y sus funciones asociadas. En esta sesión nos centraremos en esta opción.
Este control consiste en un reproductor de audio que puede ser activado en el interactivo. Se puede colocar sólo en el interior de un espacio. Reproduce archivos mp3 y wav.
Configuración
La posición y el tamaño del reproductor se indican mediante el campo expresión, del tipo (x,y,a,b), en el que los dos primeros datos indican la posición y los dos últimos el ancho y el alto del reproductor.
En el campo archivo se debe introducir la ruta del fichero de sonido que se desea reproducir.
Además, al igual que otros controles dispone de los campos: identificador (id), espacio y dibujar-si.
Funciones asociadas
Al ser invocadas las siguientes funciones: id.play(), id.stop(), id.pause() e id.currentTime(t), inician, detienen, paran o colocan el reproductor un tiempo determinado respectivamente.
Este control consiste en un reproductor de video que puede ser activado en el interactivo. Su funcionamiento es muy similar al control de audio. Se utiliza para reproducir archivos con formato mp4, WebM y ogv.
Configuración
Es la misma que la del tipo audio. Se debe tener en cuenta que las dimensiones deben ser las adecuadas para introducir un vídeo.
Tanto en este control como en el de tipo audio se puede incorporar vídeos con una reuta relativa al interactivo o vídeos a través de una dirección de Internet.
Funciones asociadas
Son las mismas que las de tipo audio. Estas funciones pueden ser llamadas desde cualquier control, programa o evento.
Reproducir videos en local mediante HTML5 es una práctica común cuando se desea que un sitio web funcione sin depender de una conexión a Internet para acceder al contenido multimedia (como YouTube o Vimeo).
✅ Ventajas: Funciona sin conexión a Internet, control total sobre el archivo y su calidad y mejor privacidad (no se conecta a servicios externos).
⚠️ Desventajas: Mayor peso del archivo HTML general si se incluyen videos muy pesados.
Nuestra primera tarea es obtener o generar el video para desarrollar la actividad de este apartado; para ello, observa el video.
La clave del video interactivo es que transforma al espectador en un participante activo, mejorando el compromiso, la retención de información y la personalización del contenido. Por ejemplo, en un video interactivo educativo, el usuario puede responder preguntas en ciertos momentos.
En esta segunda parte, el propósito es definir las actividades interactivas que vamos a usar en el video interactivo; para ello, sugerimos usar las plantillas del Proyecto Descartes, tal como se indica en el video (haz clic aquí, para descargar las plantillas, mencionadas en el video).
Es importante recordar que el objetivo del vídeo interactivo es permitir al usuario interactuar con la escena, en la cual el objeto principal es el vídeo. La interacción se realiza a través de preguntas o de la selección de opciones presentadas como botones o puntos gráficos dibujados sobre el vídeo. Esta interacción se logra si sólo se habilitan los controles de vídeo antes mencionados, que sólo permitan al usuario interferir en la reproducción de acuerdo a una intencionalidad didáctica. La comunicación bidireccional escena – HTML posibilita una gran variedad de alternativas o modelos de vídeos interactivos.
En el video, puedes observar, con detalle, las funciones, variables, espacios, controles y demás elementos del editor DescartesJS, usados para el diseño final del video interactivo.
A continuación, presentamos el video interactivo obtenido, al cual le hemos puesto un texto con el tiempo transcurrido y la línea de tiempo con marcas indicando dónde se presentarán las actividades.
En un mundo donde la tecnología avanza a pasos agigantados, la inteligencia artificial (IA) se ha convertido en una herramienta esencial para la educación y la creación de contenidos, entre ellos los videos interactivos. En el libro "Plantillas para libros con inteligencia artificial, se presentan plantillas sencillas de utilizar, las cuales nos permiten generar videos interactivos. Obviamente, es necesario que tengas definido el video, bien sea de YouTube o un video en local, además de las preguntas a incluir en el video.
A continuación, presentamos dos modelos para diseñar videos interactivos. En cada modelo puedes copiar el código intervenido y usar en cualquier sitio web. Es importante que mires las instrucciones, para usar la plantilla de cada modelo.
Es cierto que estos modelos, obtenidos por IA, son más sencillos de usar que los desarrollados con el editor DescartesJS; sin embargo, están limitados a presentar cuestionarios, mientras que con DescartesJS podemos tener una mayor variedad de escenas interactivas.
En este primer modelo, es posible incluir preguntas de tipo falso o verdadero y del tipo de selección múltiple. Para el ejemplo, hemos usado tres preguntas, la primera de falso verdadero, las otras dos de selección múltiple.
Presta atención a las instrucciones que presenta la siguiente plantilla de edición HTMl5, en las cuales podemos comprender cómo cambiar el video; cambiar, quitar o agregar preguntas, y cambiar la relación de aspecto del video (16:9, 9:16, 1:1, etc.)
La única diferencia de estos modelos con los anteriores, es la fuente del video, que es en local y en formato compatible con HTML5 (mp4, ogg, WebM, etc.).
TAREA 7
Video interactivo. Usa tu creatividad y diseña un video interactivo con, al menos, tres paradas para intereactuar con escenas interactivas. Usa el modelo que quieras.
¡Sube la solución de los dos problemas en una carpeta llamada "Tarea 7"!
Continuamos el segundo proyecto de aula, incluyendo en nuestro chatbot el texto en modo HTML, el cual nos permite ver la respuesta con el estilo HTML que queramos. Usamos scripts para incorporar los archivos de personalidad, de tal forma que sean capturadas en el navegador. Aprovechando la función parent.set('var', var), generamos el historial de las conversaciones con el chatbot.
En el siguiente video, puedes ver la explicación, paso a paso, de cómo implementar estas mejoras.