Documentacion para desarrolladores

Incrusta herramientas de vdoflow en tu propio sitio

Usa iframes para tutoriales, soporte, paginas de destino o documentacion de producto, y controla la herramienta con una pequena API basada en postMessage.

El embed mantiene un shell pequeno de vdoflow, acceso integrado a la biblioteca, procesamiento local y flujo de exportacion dentro del iframe. Para una compatibilidad amplia, las rutas embed usan el runtime de FFmpeg de un solo hilo, asi que los trabajos pesados pueden ser mas lentos que en el sitio principal.

Previsualiza y copia un embed

Elige una herramienta de vdoflow, ajusta los parametros de URL compatibles y copia el iframe exacto para esa configuracion.

Selecciona una herramienta

Parametros de URL compatibles

Tiempo de inicio (segundos)Tiempo de fin (segundos)

URL del embed: /embed/trim-video

Pagina de origen: /es/trim-video

Incrustar Recortar video

Copia el iframe exacto para la herramienta y la combinacion de parametros que elegiste, incluido el shell pequeno y el acceso a la biblioteca.

<iframe
  title="vdoflow embedded video tool"
  src="https://vdoflow.com/embed/trim-video"
  width="100%"
  height="760"
  style="border:0;"
  loading="lazy"
  allow="clipboard-write"
></iframe>

Ver embed

Herramientas y parametros compatibles

Los embeds solo estan disponibles para las herramientas principales de vdoflow. Los parametros de URL se asignan directamente a ajustes ya existentes y las rutas embed usan siempre el runtime de FFmpeg de un solo hilo por compatibilidad.

Solo herramientas principales

Recortar, reencuadrar, cambiar tamano, rotar, quitar audio, convertir y extraer fotograma son los destinos embed compatibles.

Parametros predefinidos

El generador incluye solo parametros que la herramienta ya reconoce, asi que la URL del embed sigue siendo valida.

Shell integrado y pequeno

Cada embed incluye una marca compacta de vdoflow y acceso directo a la biblioteca sin cargar un archivo automaticamente.

Nota de compatibilidad del embed: el sitio principal de vdoflow puede usar el nucleo multihilo de FFmpeg, pero las rutas `/embed/*` cargan intencionadamente el nucleo de un solo hilo para que iframes de terceros no dependan del aislamiento de origen cruzado.

Contrato de mensajeria

Todos los mensajes usan el mismo sobre: `{ source, version, type, toolId, requestId, payload }`.

Comandos enviados al iframe

`vdoflow:connect` inicializa la sesion entre pagina padre e iframe.
`vdoflow:load-files` inyecta uno o varios objetos `File`.
`vdoflow:clear-files` reinicia el conjunto de archivos cargados.
`vdoflow:start-export` activa el flujo de exportacion actual.
`vdoflow:get-state` devuelve una instantanea del estado actual del editor.

Eventos enviados de vuelta al host

`vdoflow:ready` confirma que el embed esta activo.
`vdoflow:file-loaded` confirma que los archivos fueron aceptados.
`vdoflow:export-started` se emite cuando empieza el procesamiento.
`vdoflow:export-failed` informa fallos de validacion o de ejecucion.
`vdoflow:export-complete` devuelve metadatos de salida y archivos respaldados por blobs.

Ejemplos de implementacion

Usa estos fragmentos como integracion base.

Conectarse al embed

iframe.contentWindow.postMessage({
  source: "vdoflow-embed",
  version: 1,
  type: "vdoflow:connect",
  toolId: "trim",
  requestId: "connect-1",
  payload: {}
}, "*");

Cargar archivos locales desde la pagina anfitriona

iframe.contentWindow.postMessage({
  source: "vdoflow-embed",
  version: 1,
  type: "vdoflow:load-files",
  toolId: "trim",
  requestId: "load-1",
  payload: {
    files: [file],
    mode: "replace"
  }
}, "*");

Escuchar eventos de ciclo de vida y resultado

window.addEventListener("message", (event) => {
  if (event.data?.source !== "vdoflow-embed") return;

  switch (event.data.type) {
    case "vdoflow:ready":
    case "vdoflow:file-loaded":
    case "vdoflow:export-started":
    case "vdoflow:export-failed":
    case "vdoflow:export-complete":
      console.log(event.data);
      break;
  }
});