# Configuración rápida

### Sintaxis del inicializador

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

El inicializador de Fluid Player acepta dos argumentos:

* obligatorio `objetivo`. Puede ser una cadena con el id HTML de `HTMLVideoElement` o una referencia de objeto a `HTMLVideoElement`.
* `opciones` - opcional, objeto de configuración según se documenta en la sección de configuración de la documentación.

**IMPORTANTE:** al hacer referencia a `HTMLVideoElement` mediante una referencia de objeto, Fluid Player modificará el elemento y asignará un `id` a `HTMLVideoElement` único, a menos que el `id` ya esté establecido antes de invocar el inicializador.

### Integración usando NPM

Puedes añadir Fluid Player a tu proyecto NPM usando los siguientes comandos. Ejecútalos en la raíz de tu proyecto de software (donde `package.json` se puede encontrar).

{% tabs %}
{% tab title="Usando NPM CLI" %}

```shell
npm install fluid-player@^3.0.0
```

{% endtab %}

{% tab title="Usando Yarn" %}

```shell
yarn add fluid-player@^3.0.0
```

{% endtab %}
{% endtabs %}

### Usando el módulo de Fluid Player e importando CSS

Para importar el módulo JavaScript de Fluid Player, coloca este código donde quieras que Fluid Player esté disponible en tu código.

#### JavaScript

```javascript
import fluidPlayer from 'fluid-player';
```

#### CSS

Dependiendo del tipo de mecanismo de empaquetado que uses, tendrás que importar CSS desde el paquete NPM para que las instancias del reproductor se estilicen correctamente.

Consulta la documentación de tu empaquetador para ver cómo añadir CSS a tus hojas de estilo.

Un ejemplo de cómo podría verse la importación para proyectos Webpack usando `~` como `node_modules` prefijo de importación.

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

### Integración usando CDN

Fluid Player proporciona una versión CDN disponible para enlace directo desde [https://cdn.fluidplayer.com](https://cdn.fluidplayer.com/).

**IMPORTANTE:** A partir de la v3.0.0, la versión CDN de Fluid Player incluye CSS integrado. Ya no se requiere una etiqueta separada para incluir CSS.

Usar automáticamente la versión más reciente (recomendado):

```html
<script src="https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js"></script>
```

O especifica la versión:

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

#### Ejemplo de integración con CDN

```html
<!-- Define un video con fuentes al que adjuntar Fluid Player -->
<video id="example-player">
    <source src="video.mp4" type="video/mp4"/>
</video>

<!-- Colocar antes de la etiqueta </body> -->
<script src="https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js"></script>
<script>
    // El método fluidPlayer es global cuando se usa la distribución por CDN.
    var player = fluidPlayer('example-player');
</script>
```

### Cambio de calidad

Se pueden añadir varias fuentes como se muestra a continuación. El título se mostrará al usuario al cambiar de fuente, y debe establecerse según la calidad del video, como se puede ver a continuación ('1080p', '720p', etc.).

```html
<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>
```

![](/files/ea8df7a68d1852e18bb8bb164149a75d23cddbb9)

### Definir la fuente como HD

Las fuentes establecidas para [el cambio de calidad](#quality-switching) pueden definirse como HD añadiendo un **data-fluid-hd** atributo a la etiqueta. El color de este texto coincidirá con el [color principal](/es/configuracion/layout.md#primarycolor). Si deseas anular este color, puedes hacerlo usando CSS personalizado en tu propia página. La clase responsable del color es **fp\_hd\_source**. A continuación se muestra un ejemplo de cómo anular este color.

```css
.fp_hd_source { color: yellow !important; }
```

A continuación se muestra un ejemplo de cómo se establece el HD en las fuentes.

```html
<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>
```

![](/files/aae9795d9bd31854f6d20668f56aa89479df5714)

### Configuración de opciones adicionales

Fluid Player se puede personalizar configurando algunos parámetros opcionales. La lista completa de parámetros se puede encontrar en [Configuración](/es/configuracion/layout.md)

```html
<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>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.fluidplayer.com/es/integracion/quick-setup.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.