Guía de instalación · Player

Guía de instalación — HTML plano

Cómo incrustar un embed de Treisa Player en cualquier página estática (HTML/CSS/JS que controlas tú: un index.html, una landing servida por nginx/Netlify/Vercel, un template de tu framework).

En todas las guías, EMBED_KEY es la key de tu embed (Player → Embeds) y el host https://player.treisaflow.com es el player host por defecto; el snippet que copias del panel ya trae tu host real si Treisa te sirve el player en otro dominio.

1. Antes de empezar

Dominio registrado. En Treisa Flow, agrega el dominio que servirá la página en Player → Dominios (sin https://). Para probar en tu máquina registra localhost — está permitido como dominio de desarrollo.
Flag del workspace activo (treisa_player_external_embed_enabled) — lo activa el equipo de Treisa.
El video debe estar publicado y en estado ready.

2. Paso a paso

Crea tu página (o abre la existente) con un editor de texto. Ejemplo mínimo index.html:

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Mi página</title>
  </head>
  <body>
    <h1>Mi VSL</h1>
    <!-- aquí va el embed (paso 3) -->
  </body>
</html>

En Treisa Flow ve a Player → Embeds, busca tu embed y pulsa Copiar snippet (variante Script v2).
Pega el snippet (el exacto, justo después de estos pasos) en el <body>, reemplazando el comentario , y cambia EMBED_KEY por la key real.
Sirve la página por HTTP, no abriendo el archivo directamente: con file:// el navegador no envía referrer y el player no puede validar tu dominio. Localmente basta con, desde la carpeta de la página:
```
python3 -m http.server 8000
```
y abrir http://localhost:8000.
Abre la página en el navegador: el div se convierte en el reproductor al cargar player.js (es async, no bloquea el render).

El snippet del panel (exacto)

<!-- Treisa Player — embed -->
<div data-treisa-player="EMBED_KEY"></div>
<script async src="https://player.treisaflow.com/v2/player.js"></script>

Variante iframe plano

Si tu CSP no permite scripts de terceros, copia la variante Iframe plano del panel y pégala en el mismo lugar:

<iframe
  src="https://player.treisaflow.com/e/EMBED_KEY"
  title="Treisa Player"
  allow="autoplay; fullscreen; encrypted-media; picture-in-picture"
  allowfullscreen
  referrerpolicy="strict-origin-when-cross-origin"
  sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-presentation"
  style="width:100%;aspect-ratio:16/9;border:0"></iframe>

Videos verticales: con el script usa data-aspect="9/16" en el div; con el iframe cambia aspect-ratio:16/9 por aspect-ratio:9/16 en el estilo.

3. CSP de tu página

Directrices mínimas (detalle en la sección 2 del SDK):

script-src https://player.treisaflow.com;
frame-src https://player.treisaflow.com

script-src solo si usas la variante Script v2.
frame-src siempre (el video corre dentro de un iframe del player).
connect-src no lo necesita tu página: las conexiones ocurren dentro del iframe.

4. Troubleshooting

Síntoma	Causa probable	Qué revisar
Aparece el `<div>` vacío y nada más	el script no cargó	pestaña Network: `player.js` debe dar 200 y sin bloqueo por CSP
Error `EMBED_DOMAIN_NOT_ALLOWED`	dominio no registrado o página abierta con `file://`	registra el dominio en Player → Dominios y sirve la página por HTTP
Error `EMBED_INVALID_KEY`	la key no es la del embed	copia el snippet de nuevo desde el panel
Error `EMBED_NOT_READY`	el video sigue procesándose	espera el estado `ready` en la biblioteca
Error `EMBED_UNPUBLISHED`	el video está despublicado	publícalo en Treisa Flow

Inyectaste el div después de que cargó player.js (SPA, render dinámico)? Llama window.TreisaPlayer.scan(). Códigos completos en la sección 6 del SDK.