Editor de Vídeo Online — recorta y subtitula sin subir nada

Qué hace esta herramienta

Un editor de vídeo básico que vive en tu navegador. Cargas un vídeo local (un MP4 de tu móvil, un WebM grabado por OBS, un MOV de tu cámara), reproduces el resultado en una vista previa estándar, recortas el fragmento que te interesa marcando un punto de inicio (in) y un punto final (out) sobre una línea de tiempo visual, añades una única capa de texto centrado (con control de color y fondo opcional) y exportas el resultado a un archivo WebM listo para descargar. Todo el procesado — carga, recorte, render del texto y exportación — ocurre en tu navegador, sin enviar nada a ningún servidor.

Casos de uso reales

• Recortar un clip largo antes de subirlo a una red social. Grabas 8 minutos con el móvil, solo te interesan los últimos 30 segundos. Marcas in en 7:30 y out en 8:00, exportas WebM, lo subes. Sin instalar nada, sin marca de agua, sin pagar.
• Añadir una marca de agua de texto a un vídeo promocional. Tienes un reel corto de producto y necesitas ponerle tu handle o nombre de marca centrado. Escribes el texto, eliges color y fondo, exportas. Una capa, sin florituras.
• Preparar material para una clase online o tutorial. Recortas la intro, le pones el título del módulo como overlay y compartes el WebM con tu alumnado sin exponer tu flujo a un editor corporativo.
• Limpiar un screencast antes de enviarlo. Grabas 12 minutos de demo. Recortas el principio y el final (los "hola" y los "ya está, hasta luego"), le pones un título al inicio exportando solo esos primeros 5 segundos. Rápido, sin DaVinci Resolve.
• Editar un vídeo personal sensible (familiar, médico, jurídico). No quieres subirlo a Clipchamp ni Kapwing por privacidad. Aquí el blob nunca sale de tu navegador. Editas en local.

Cómo se usa

1. Pulsa la zona Cargar vídeo o arrastra un archivo a la dropzone. El vídeo se carga localmente con File API.
2. Usa los controles de reproducción (play/pausa, volumen) para revisar el clip. Aparece una línea de tiempo con marcadores IN y OUT.
3. Reproduce hasta el momento donde quieras empezar el recorte y pulsa Marcar IN aquí. Haz lo mismo al final y pulsa Marcar OUT aquí. Alternativamente, arrastra los handles directamente sobre el timeline.
4. Escribe el texto que quieras superponer (opcional). Elige color y fondo. Se muestra en tiempo real sobre el preview.
5. Configura el bitrate (por defecto 2 Mbps, adecuado para 720p) y la resolución máxima. Pulsa Exportar WebM.
6. El botón se desactiva y aparece un indicador de progreso. Cuando termina, se descarga automáticamente el archivo .webm. Si cancelas, se detiene el export.

Por qué esta herramienta

Las alternativas gratuitas existentes (Clipchamp, Kapwing, Canva, Veed, FlexClip, Clideo, Online Video Cutter, etc.) te obligan a subir tu vídeo a un servidor de terceros para poder editarlo. Eso significa minutos de espera en un vídeo de 500 MB, costes de almacenamiento para el proveedor, y una cesión temporal de tu material a infraestructura que no controlas. Esta herramienta hace lo contrario: usa la File API del navegador para manejar el vídeo como un blob local y exportar con MediaRecorder a un canvas. Resultado: edición instantánea, privacidad total, coste cero, funcionamiento offline tras la primera carga. La monetización es a través de donaciones voluntarias (Ko-Fi) y AdSense a nivel de dominio, nunca con tus inputs.

Privacidad: Tus datos se quedan en tu navegador. Y una vez cargada, esta herramienta funciona sin internet.

Cómo funciona esta herramienta: el flujo client-side

Esta herramienta no es un DaVinci Resolve ni pretende serlo. Es un editor BÁSICO construido sobre tres primitivas del navegador que, combinadas, cubren el 90% del trabajo de edición puntual que un usuario realmente necesita: cargar un vídeo local, recortar un fragmento, superponer texto y exportar a WebM. La diferencia estructural con Clipchamp, Kapwing, Canva o Veed es que absolutamente ningún byte de tu contenido sale del navegador. Vamos a ver el flujo técnico real.

Cuando arrastras un archivo a la dropzone o lo seleccionas con el picker, el navegador lo expone como un objeto File accesible vía URL.createObjectURL(blob). Este objeto URL es local: apunta al blob en memoria del navegador y nunca se envía por red. El elemento <video> lo consume directamente y empieza a decodificar con los codecs que el navegador soporte de fábrica (H.264 en MP4, VP8/VP9/AV1 en WebM, según motor). La línea de tiempo muestra la duración total leída del metadata.

El corte por puntos in y out no decodifica, recodifica ni rasteriza: solo guarda el par de timestamps en el estado. Cuando llega el momento de exportar, empezamos a dibujar el vídeo desde video.currentTime = in en un <canvas> con drawImage(video, ...) a la frecuencia del FPS configurado, y encima se dibuja el texto con fillText. El captureStream() del canvas produce un MediaStream, que pasamos a MediaRecorder con MIME type video/webm;codecs=vp9 o vp8 según lo que el navegador acepte (MediaRecorder.isTypeSupported lo detecta). El recorder va soltando chunks vía dataavailable; en el stop concatenamos los chunks en un único Blob que se descarga con un <a download> sintético.

El audio del vídeo se incluye automáticamente al rendear el frame, pero a nivel de composición hay algo importante que aclarar: captureStream() en muchos navegadores solo captura la pista de vídeo del canvas. Para conservar el audio original sin remezclar, hay dos vías. La vía conservadora (usada en esta v1) es crear el stream desde el <video> con video.captureStream() y añadir el track de audio del MediaStream resultante, mientras el canvas se sincroniza por frame a la misma cadencia; así, al exportar, audio y vídeo van juntos en el WebM final. Esta es la técnica más portable para Chrome/Edge en 2026. Si en el futuro sale un fallback 100% canvas + AudioContext, se modela entonces — pero no es scope del MVP.

Cómo usar la herramienta paso a paso

1. Carga el vídeo. Arrastra el archivo a la zona central o haz clic. Si tu vídeo es un MP4 de móvil, un WebM de OBS/Streamlabs, o un MOV de cámara, debería funcionar — siempre que tu navegador pueda decodificarlo nativamente. Si no carga, prueba convertirlo previamente a WebM con HandBrake o VLC.
2. Revisa el clip. Los controles muestran play/pausa y volumen. La barra azul sobre el timeline es el progreso de reproducción. Puedes moverte por el vídeo haciendo clic en cualquier punto del timeline (no confundir con los handles IN/OUT).
3. Marca los puntos de corte. Hay dos formas. Forma A: reproduce hasta el momento y pulsa Marcar IN aquí / Marcar OUT aquí. Forma B: arrastra los handles verdes IN y OUT directamente en el timeline. El panel de readout muestra los tres valores clave (IN timestamp, OUT timestamp, duración resultante).
4. Configura el texto (opcional). Si quieres superponer un título, escríbelo en el campo de texto. Elige color con el color picker y fondo (sin fondo, sombra proyectada o caja semitransparente). El preview en vivo del paso 2 muestra el resultado renderizado. Si quieres export SIN texto, deja el campo vacío.
5. Previsualiza el recorte. El botón Previsualizar recorte salta el currentTime al IN y reproduce hasta el OUT. Útil para verificar antes de gastar tiempo en el export real.
6. Configura el export. Bitrate (por defecto 2 Mbps: buen balance peso/calidad para clips cortos en redes sociales). Resolución máxima: original del vídeo, 720p, o 480p. Más bajo = archivo más ligero y export más rápido.
7. Exporta. Pulsa Exportar WebM. El botón se desactiva, aparece un indicador de progreso con el porcentaje. Cuando termina, se descarga automáticamente el archivo .webm. Si quieres abortar, pulsa Cancelar export.
8. Reproduce o convierte. El archivo WebM se reproduce en cualquier navegador moderno y en la mayoría de reproductores (VLC, mpv). Si necesitas MP4 para un destino concreto, conviértelo con HandBrake, VLC o ffmpeg localmente.

Casos de uso prácticos, a fondo

Ejemplo 1 — clip largo para redes sociales. Grabase 8:30 de un evento con el móvil. En la app de galería encuentras el clip, lo exportas a MP4 (los móviles ya graban MP4). Abres la herramienta en el navegador, arrastras el MP4, reproduces hasta el momento clave (~8:00) y pulsas Marcar IN aquí. Adelantas hasta el final (8:30), pulsas Marcar OUT aquí. Duración del recorte: 30 segundos. Exportas a WebM 2 Mbps. Resultado: un archivo de ~7 MB listo para subir.

Ejemplo 2 — branding mínimo a un reel. Tienes un MP4 de 12 segundos de un producto. Quieres que aparezca tu handle @marca centrado durante todo el clip. Marcas IN en 0:00 y OUT en 0:12 (clip completo), escribes "@marca" en el campo de texto, eliges color blanco, fondo de caja semitransparente. Exportas. El MP4 original lo conservas; el WebM exportado lleva el overlay.

Ejemplo 3 — screencast limpio. Has grabado 12 minutos de demo de software. Eliminas la intro y el cierre: marcas IN en 0:25 y OUT en 11:30, escribes "Tutorial X v2.0" en el texto superpuesto, exportas. Resultado: 11:05 con título centrado al inicio.

Ejemplo 4 — recorte de boda o evento privado. Por privacidad, NO quieres subir el vídeo a Clipchamp ni Kapwing. Aquí el blob nunca sale de tu navegador. Puedes editar puntos sensibles sin preocuparte del DPA del proveedor.

Ejemplo 5 — extracción de un fragmento meme. Tienes un vídeo de 2 horas. Lo reproduces hasta el chiste, marcas IN en 1:14:32 y OUT en 1:15:48 (1:16 de duración), exportas. Tienes un fragmento de 76 segundos listo para compartir.

Consejos y trucos

• Usa el atajo de teclado en el timeline. Pulsa la barra espaciadora en cualquier momento para play/pausa (cuando el foco esté en el editor, no en un input). Las flechas izquierda/derecha mueven el currentTime en 5 segundos; con Shift, en 30 segundos. Esto acelera mucho el recorte fino.
• Duración mínima razonable. Recortes de menos de 1 segundo pueden dar problemas en reproductores antiguos o al subir a redes sociales. Apunta a ≥2 segundos para asegurar buena compatibilidad.
• Bitrate bajo si el destino es web. Para subir a Twitter/X, Instagram o YouTube Shorts, 1 Mbps basta — el propio destino recomprime. 2 Mbps es ya calidad más que suficiente.
• Resolución 720p en clips verticales de móvil. Los vídeos modernos de móvil graban a 4K o 1080p. Exportar a 720p ahorra ~60% de tamaño con calidad visual casi idéntica para móvil/web.
• Conversión posterior a MP4. ffmpeg en local: ffmpeg -i input.webm -c:v libx264 -preset slow -crf 22 -c:a aac output.mp4. Calidad universal, sin pérdida perceptible.
• Texto: cuidado con el contraste. Color blanco solo es legible sobre fondos oscuros. Si tu clip tiene zonas claras, elige negro o un fondo de caja. El selector de color te permite personalizar.
• Previsualiza antes de exportar. El botón Previsualizar recorte reproduce el fragmento sin renderizar. Útil para verificar que el IN y OUT están donde quieres antes de gastar minutos en el export.
• El export es en tiempo real. Un recorte de 1 minuto tarda ~1 minuto en exportar. El navegador rasteriza cada frame al ritmo del vídeo, no más rápido. Es la limitación del approach client-side: sin ffmpeg.wasm no hay aceleración.
• Si Safari falla, prueba Chrome. MediaRecorder con canvas captureStream está mejor implementado en Chromium. Safari puede rechazar el MIME type o producir archivos no estándar.
• No es DaVinci Resolve. Si necesitas multi-track, color grading, transiciones, audio editing o efectos avanzados, esta herramienta se queda corta. Para eso, instala DaVinci Resolve (gratis, escritorio, 2.5 GB) — esta es para edición rápida sin compromiso.

Limitaciones y consideraciones

Esta herramienta es un editor básico, no un sistema de edición profesional. Antes de plantearte usarla para flujos complejos, conviene entender exactamente qué cubre y qué NO cubre el MVP, y por qué en situaciones avanzadas necesitas un editor de escritorio.

Qué cubre el MVP

• Carga de un único vídeo local (File API / drag&drop) en formatos que el navegador decodifique nativamente (MP4 H.264, WebM VP8/VP9/AV1, MOV según navegador).
• Preview del vídeo en un elemento <video> con controles de play/pausa y volumen.
• Recorte por puntos in/out con marcadores visuales sobre un timeline.
• Una capa de texto superpuesto centrada, con color personalizable y opción de fondo (sin fondo, sombra, caja semitransparente).
• Previsualización del recorte antes de exportar.
• Exportación a WebM con MediaRecorder capturando el canvas y el audio del vídeo original, configurable en bitrate y resolución máxima.
• Funcionamiento 100% offline tras la primera carga, gracias al Service Worker cache-first.
• Persistencia del estado intermedio: el último vídeo cargado y los puntos in/out guardados en sesión (memoria, no disco por defecto).

Qué NO cubre (queda fuera del alcance del MVP)

• Multi-track: solo se carga 1 vídeo a la vez. No hay posibilidad de apilar varios clips.
• Transiciones entre clips, fundidos, cross-dissolve, wipes, etc.
• Efectos visuales: color grading, LUTs, filtros, blur, chroma key.
• Audio editing: mezcla, ajuste de volumen por pista, efectos de audio, normalización, EQ.
• Exportación a MP4 directo: requiere FFmpeg.wasm (no se incluye para mantener offline-ready y bundle ligero).
• Picture-in-picture, multi-cam, composiciones complejas.
• Animación del texto: el texto es estático durante todo el recorte.
• Múltiples capas de texto simultáneas: solo 1.
• Sincronización con audio externo o bandas sonoras adicionales.
• Soporte de subtítulos incrustados (SRT, VTT, ASS).
• Exportación a GIF, MKV, AVI, o cualquier otro contenedor distinto de WebM.
• Renderizado acelerado por GPU: el render es CPU sobre canvas. En vídeos largos puede usar bastante CPU.
• Editor de fotogramas clave (keyframes), interpolación de propiedades.
• Soporte oficial en Safari: el preview funciona; la exportación WebM puede fallar.
• Proyectos guardados en servidor, colaboración multi-usuario, versionado.
• Aplicación de marca de agua propia, branding corporativo persistente.
• Plantillas de intro/outro, generación automática de thumbnails.

Cuándo necesitas un editor de escritorio en lugar de esta herramienta

La edición de vídeo profesional es un ecosistema amplio. Esta herramienta cubre el caso "tengo un clip y quiero recortarlo rápido sin instalar nada". Si tu proyecto entra en alguna de las siguientes categorías, considera usar un editor de escritorio:

• Proyectos con varios clips que necesitan montaje multicámara o narrativa lineal.
• Color grading profesional con LUTs y corrección de color por máscara.
• Audio editing real: mezcla multipista, efectos, sincronización labial.
• Motion graphics, animaciones, títulos animados más allá de un texto estático.
• Efectos visuales complejos (VFX), chroma key, tracking.
• Exportación a MP4 nativo para clientes que no aceptan WebM.
• Proyectos largos (>30 min) donde el export en tiempo real se vuelve tedioso.
• Flujos de trabajo con plantillas, presets y consistencia entre piezas.
• Edición colaborativa en tiempo real con otros editores.
• Renderizado acelerado por GPU para entregas rápidas.

Para todos estos casos, instala DaVinci Resolve (gratis de Blackmagic), Kdenlive (open source), o Shotcut (open source, muy ligero). Esta herramienta no compite con ellos: cubre el nicho de "edición rápida sin instalación" donde instalar un editor de escritorio no se justifica.

Glosario rápido

WebM

Contenedor multimedia abierto promovido por Google. Usa codecs de vídeo VP8/VP9/AV1 (abiertos) y audio Opus/Vorbis. Soportado nativamente en Chrome, Edge, Firefox, Opera, Brave. Se reproduce en VLC, mpv y la mayoría de reproductores modernos.

MediaRecorder API

API del navegador que graba un MediaStream (audio + vídeo) en un contenedor (WebM, MP4 según soporte). Se usa aquí para exportar el canvas con la composición. Ver MDN: MDN MediaRecorder.

canvas captureStream

Método del elemento <canvas> que devuelve un MediaStream con la captura en tiempo real del contenido del canvas. Se combina con MediaRecorder para grabar la composición como vídeo. Ver MDN: MDN HTMLCanvasElement.captureStream().

WebCodecs API

API de bajo nivel para codificar/decodificar frames de vídeo y audio crudos. Más potente que MediaRecorder pero requiere implementar tu propio muxing/demuxing. Reservada aquí como futuro fallback si MediaRecorder no soporta el codec deseado. Ver MDN: MDN WebCodecs API.

File API

Conjunto de APIs del navegador (File, Blob, URL.createObjectURL) que permiten manejar archivos locales seleccionados por el usuario sin necesidad de subirlos a un servidor. Usada aquí para cargar el vídeo sin upload.

Service Worker

Script que el navegador ejecuta en segundo plano, habilitando capacidades como caché offline de la tool. Aquí se usa un patrón cache-first: precache de HTML/CSS/JS/imágenes en la primera carga y respuesta desde caché en visitas posteriores, incluyendo sin conexión.

Codec H.264 (AVC)

Codec de vídeo propietario, usado masivamente en MP4. Soportado de fábrica en prácticamente todos los dispositivos. Limitación: crear un archivo MP4/H.264 sin librerías externas requiere licencia o implementación propia, no es viable en un bundle ligero.

VP9 / AV1

Codecs de vídeo abiertos. VP9 (Google) está en la mayoría de navegadores. AV1 es la evolución: mejor compresión, pero con gaps de soporte aún. Ambos son los codecs típicos usados por MediaRecorder al exportar WebM.

Blob

Objeto binario opaco del navegador. URL.createObjectURL(blob) crea una URL local que apunta al blob en memoria — sin subida a ningún servidor. Es la base del manejo client-side.

Punto IN / OUT

Timestamps de inicio y fin del recorte sobre la duración total del vídeo. La herramienta solo guarda estos dos valores y rasteriza el rango entre ellos al exportar.

Timeline

Representación visual horizontal de la duración del vídeo, con marcadores para progreso, buffer cargado y handles de recorte.

Bitrate (Mbps)

Cantidad de bits por segundo del flujo de vídeo. Mayor bitrate = mejor calidad visual + archivo más pesado. 2 Mbps es un buen balance para clips web/social; bajo (1 Mbps) para móvil; alto (5+ Mbps) para archivo de archivo.

Esta herramienta es un editor BÁSICO. Para edición profesional avanzada, considera DaVinci Resolve u otro editor de escritorio. Versión 1.0.0 — 2026-07-01.