Configuración rápida

Esta página te guía paso a paso para añadir Fluid Player a tu sitio web. Hay dos formas de hacerlo:

• La opción CDN - pega una <script> etiqueta y listo. Lo mejor para la mayoría de los sitios web, no se necesita instalación.

• La opción NPM - instala el paquete mediante NPM. Para desarrolladores que usan una herramienta de compilación como Webpack o Vite.

Elige la que coincida con tu configuración. Si no estás seguro, la opción CDN es la correcta.

ℹ️ ¿Usas WordPress? No necesitas hacer nada de esto - instala el plugin de WordPress de Fluid Player en su lugar.

---

Opción 1: Usa la CDN (recomendado)

Una CDN es un servicio que hospeda los archivos de Fluid Player por ti, así que no tienes que descargar ni instalar nada. Solo tienes que enlazarlos desde tu página.

Paso 1: Añade un video a tu página

Si aún no tienes uno, añade una <video> etiqueta donde quieras que aparezca el reproductor:

<video id="example-player">
    <source src="video.mp4" type="video/mp4" />
</video>

El atributo id es lo que le indica a Fluid Player qué video mejorar; asegúrate de que esté presente.

Paso 2: Carga Fluid Player e iniciarlo

Justo antes de la etiqueta de cierre </body> de tu página, añade el script de Fluid Player y un inicializador de una sola línea. Tu página final debería verse así:

<!-- El video, en algún lugar de tu página -->
<video id="example-player">
    <source src="video.mp4" type="video/mp4" />
</video>

<!-- Justo antes de </body> -->
<script src="https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js"></script>
<script>
    var player = fluidPlayer('example-player');
</script>

Eso es todo. Actualiza la página: deberías ver que el diseño de Fluid Player reemplaza los controles de video predeterminados del navegador.

✅ A partir de la v3.0.0, la compilación de CDN incluye el CSS automáticamente. No necesitas una etiqueta <link> separada para las hojas de estilo.

Fijar a una versión específica

La URL de arriba (/v3/current/) siempre sirve la última versión v3, recomendada para la mayoría de los casos. Si prefieres fijarla a una versión específica para que nunca cambie por debajo de ti, usa:

<script src="https://cdn.fluidplayer.com/3.0.0/fluidplayer.min.js"></script>

---

Opción 2: Instalar mediante NPM

Usa este enfoque si estás creando una aplicación JavaScript con un empaquetador como Webpack, Vite o Rollup.

Instala el paquete

Ejecuta uno de estos en la raíz de tu proyecto (donde package.json se encuentra):

Usando npm:

npm install fluid-player@^3.0.0

Usando yarn:

yarn add fluid-player@^3.0.0

Importa el JavaScript

Donde quieras usar Fluid Player en tu código:

import fluidPlayer from 'fluid-player';

Importa el CSS

La compilación de NPM no incluye CSS — necesitas importarlo por separado. Cómo hacerlo depende de tu empaquetador. Para un proyecto de Webpack que usa ~ como el node_modules prefijo de importación:

@import "~fluid-player/src/css/fluidplayer.css";

Consulta la documentación de tu empaquetador si estás usando una herramienta diferente.

---

Añadir varias opciones de calidad

Si tienes tu video en diferentes calidades (1080p, 720p, etc.), puedes dejar que los espectadores elijan. Añade varias <source> etiquetas: Fluid Player mostrará un selector de calidad en los controles del reproductor.

<video id="my-video" controls style="width: 640px; height: 360px;">
    <source src="vid_1080p.mp4" title="1080p" type="video/mp4" />
    <source src="vid_720p.mp4" title="720p" type="video/mp4" />
    <source src="vid_480p.mp4" title="480p" type="video/mp4" />
</video>

El title es lo que aparece en el menú de calidad.

Marcar una fuente como HD

Para resaltar visualmente las opciones de alta definición, añade data-fluid-hd a la <source> etiqueta <source>. La etiqueta HD usa el color principal de tu reproductor de forma predeterminada.

<video id="my-video" controls style="width: 640px; height: 360px;">
    <source data-fluid-hd src="vid_1080p.mp4" title="1080p" type="video/mp4" />
    <source data-fluid-hd src="vid_720p.mp4" title="720p" type="video/mp4" />
    <source src="vid_480p.mp4" title="480p" type="video/mp4" />
</video>

Si prefieres usar un color diferente para la etiqueta HD, sobrescríbelo en tu propio CSS - la clase relevante es fp_hd_source:

.fp_hd_source { color: yellow !important; }

---

Personalizar el reproductor

Fluid Player acepta un objeto de configuración como segundo argumento. Aquí es donde configuras la apariencia, el comportamiento de los anuncios y casi todo lo demás.

<video id="my-video" controls style="width: 640px; height: 360px;">
    <source src="vid.mp4" type="video/mp4" />
</video>

<script type="text/javascript">
var player = fluidPlayer(
    'my-video',
    {
        layoutControls: {
            // Parámetros para personalizar el aspecto y la sensación del reproductor
        },
        vastOptions: {
            // Parámetros para personalizar cómo se muestran y se comportan los anuncios
        }
    }
);
</script>

Para la lista completa de opciones, consulta la Referencia de configuración.

---

Referencia: el inicializador

var player = fluidPlayer(target [, options]);

target (obligatorio) - indica a Fluid Player a qué video adjuntarse. Puedes pasar cualquiera de estos:

• El atributo id de tu <video> etiqueta como una cadena, p. ej. 'my-video', o

• el elemento de video directamente, p. ej. document.getElementById('my-video')

options (opcional) - un objeto de configuración. Consulta Configuración para la lista completa.

⚠️ Atención: Si pasas el elemento de video directamente y aún no tiene un atributo id atributo id, Fluid Player añadirá uno automáticamente. Si tu código depende de que el elemento no tenga un id, establece uno tú mismo antes de llamar a.

---

¿Y ahora qué?

💡 Configurar anuncios → Anuncios.

🎨 Personalizar el aspecto → Configuración del diseño.

📝 Añadir subtítulos → Subtítulos.