Estudio de Video · AcademiaStudio
Estudio de Video: Un video que es una página.
Un motor que, cuando esté completo, convertirá un documento en un video formativo animado. Cada fotograma es una página Angular que se dibuja sola y se fotografía, y FFmpeg une las fotos en un MP4. El video es el guion: se corrige editando el guion, no el video.
Motor de video para la plataforma de cursos AHDO · Sep 2026
Sinopsis
- Qué es
- Un motor para convertir un documento en un video formativo animado. Hoy es un prototipo: el render y la lectura de PDF y presentaciones ya funcionan; el guion con IA y la voz todavía no.
- Para quién
- Para AHDO, la plataforma de cursos del grupo. Serviría para llenar su catálogo y para hacer video formativo a partir de los manuales de cada empresa.
- Cómo funciona
- Cada escena es una página Angular que sabe dibujarse en cualquier fotograma. Playwright la fotografía cuadro a cuadro desde .NET y FFmpeg une las fotos en un MP4.
Arrastra el tiempo
Esta es la escena de prueba del motor, reconstruida aquí con sus mismas medidas y sus mismas curvas. No es una grabación: tú eliges el fotograma y la escena se calcula. Si subes de golpe, aparece el mismo fotograma exacto, sin transición.
Escena del motor en el fotograma 150: el antetítulo «Módulo 1 · Introducción», el título «Trabajo seguro en alturas» y una barra de progreso que marca 80 %.
- opacidad del título
aparecer(frame, seg(0.6), seg(9.6)) - 1.00
- altura del título
interpolar(frame, [seg(0.6), seg(1.6)], [46, 0], rebote) - 0.0 px
- ancho de la barra
interpolar(frame, [seg(2.4), seg(6.0)], [0, 87]) - 79.5 %
- número de la barra
Math.round(anchoBarra) - 80 %
El deslizador y las flechas recorren los 300 fotogramas.
Toma falsa: el número y la barra se separaron
En una versión de esta escena, la barra y su porcentaje tenían cada uno su curva. La barra iba en 30 % y el texto decía 39 %. Ahora el número sale del mismo valor que el ancho, redondeado para que no tiemble entre fotogramas. El botón «Ver el error» lo recrea: el número toma una curva lineal y la barra, la suave.
La tira de película
Así saldrá un video del motor, de punta a punta. Lo que ya funciona en la prueba de concepto va sólido; lo diseñado y todavía sin construir va en trazo de plano, punteado.
- Funciona en la prueba de concepto
- Diseñado, sin construir
Entra un documento
Un PDF o una presentación. Un PDF no marca qué es un título: el motor lo deduce por el tamaño de la letra y agrupa las palabras en líneas.
Funciona
Un guion por escenas
La IA escribirá un guion en JSON: cada escena con su tipo, su texto, su duración y su hash. Se valida contra un esquema antes de renderizar.
Diseñado, sin construir
Una página que se dibuja sola
Cada escena es un componente Angular que calcula opacidad, posición y ancho a partir del número de fotograma. Playwright la abre en un Chromium sin ventana.
Funciona Las ilustraciones por escena están diseñadas, sin construir.
Una foto por fotograma
Playwright pide el fotograma 0, toma la foto, pide el 1, y así. En la prueba salieron 300 fotos de 1280 × 720, a unos 100 ms cada una.
Funciona
FFmpeg une las fotos
FFmpeg pega las fotos en un MP4. El ensamblador ya acepta una pista de audio.
Funciona La voz narrada está diseñada, sin construir.
Sale el video
La prueba dio 10 segundos de video en unos 30 segundos de render.
Funciona Publicarlo como clase de un curso en AHDO es hoja de ruta.
El guion manda
En este motor el video no es el archivo: es el guion. El MP4 se deriva de él, como un programa se compila. El plan es que, para corregir una frase, se edite el guion y se vuelva a renderizar solo la escena que cambió.
Hay dos clases de cambio. «Este video tiene un error» se arregla en el guion y toca un video. «Así se ve mal siempre» se arregla en la plantilla y toca todos.
Esta parte es arquitectura diseñada, todavía sin construir: la caché por escena no existe aún. La demostración de abajo simula el plan en el navegador, con un guion de datos ficticios.
El guion de ejemplo, con datos ficticios, se carga al llegar aquí.
Tomas falsas
Dos fallas silenciosas de este tipo de motor: el video sale mal y ningún error lo avisa. Aquí se recrean en simulación, y se cuenta cómo el motor las evita con reglas y con una prueba.
La foto que sale con el fotograma de antes
Si la foto se toma justo después de cambiar el estado, sale el fotograma anterior porque el navegador todavía no ha repintado, y ningún error lo avisa.
Cómo lo evita el motor. Cada salto de fotograma espera dos cuadros del navegador antes de resolverse: el primero corre antes del repintado y el segundo después.
Los fotogramas en blanco
Si se fotografía antes de que carguen las fuentes, los primeros fotogramas salen en blanco y nada falla.
Cómo lo evita el motor. La plantilla solo avisa que está lista cuando cargaron fuentes e imágenes, y una prueba automática falla si el video sale sospechosamente liviano.
Créditos
Quién hizo qué, como al final de una película.
Estudio de Video AcademiaStudio, para AHDO
- Idea y arquitectura
- Sicer Brito
- Plan técnico
- Sicer Brito
- Motor de render y plantilla Angular
- Sicer Brito
- Lectura de PDF y presentaciones
- Sicer Brito
2 de 2 commits. Único autor, septiembre de 2026.
Lo diseñé desde cero y validé el render con una prueba de concepto: 300 fotogramas que se vuelven 10 segundos de video. La lectura de PDF y presentaciones ya está escrita y con pruebas. El guion con IA, la voz y la integración con la plataforma siguen en la hoja de ruta.
Reparto
- .NET 8Orquesta el render
- PlaywrightFotografía cada fotograma
- FFmpegUne las fotos en un MP4
- Angular 17Dibuja cada escena
- TypeScriptLas curvas del movimiento
- PdfPigLee los PDF
- Open XMLLee las presentaciones
- xUnitLa prueba de humo del render
Ficha técnica
- fotogramas en la prueba de render
- 300repositorio, sep 2026
- por fotograma
- ~100 msprueba de render, sep 2026
- licencias de render
- 0arquitectura propia, sep 2026
Escenas sin rodar
No está en producción. El guion con IA, la narración, las ilustraciones y la caché por escena están diseñados, no construidos. Tampoco hay usuarios ni videos publicados: es una prueba de concepto.
Guion con IA
La IA escribirá el guion por partes: primero el esquema del video y después cada escena.
Narración
Una voz con la marca de tiempo de cada palabra, para que el texto entre justo cuando se dice.
Ilustraciones
Una imagen por escena que, una vez aprobada, queda fija en el guion y no se vuelve a generar.
Caché por escena
Cada escena guardada por su hash: corregir una frase no obliga a renderizar el video entero.
Integración con AHDO
Pantallas en la plataforma para pedir un video y publicarlo como clase de un curso.
