# Configuração rápida
### Sintaxe do inicializador
```javascript
var player = fluidPlayer(target [, options]);
```
O inicializador do Fluid Player aceita dois argumentos:
* obrigatório `target`. Pode ser um ID HTML em string de `HTMLVideoElement` ou uma referência de objeto a `HTMLVideoElement`.
* `opção` - opcional, objeto de configuração conforme documentado na secção de configuração da documentação.
**IMPORTANTE:** ao referenciar `HTMLVideoElement` por referência de objeto, o Fluid Player irá alterar o elemento e atribuir um `id` para `HTMLVideoElement` a menos que o `id` já esteja definido antes de o inicializador ser invocado.
### Integração usando NPM
Pode adicionar o Fluid Player ao seu projeto NPM usando os seguintes comandos. Execute-os na raiz do seu projeto de software (onde `package.json` pode ser encontrado).
{% tabs %}
{% tab title="Usando a CLI do NPM" %}
```shell
npm install fluid-player@^3.0.0
```
{% endtab %}
{% tab title="Usando Yarn" %}
```shell
yarn add fluid-player@^3.0.0
```
{% endtab %}
{% endtabs %}
### Usando o módulo Fluid Player e importando CSS
Para importar o módulo JavaScript do Fluid Player, coloque este código onde quer que queira que o Fluid Player esteja acessível no seu código!
#### JavaScript
```javascript
import fluidPlayer from 'fluid-player';
```
#### CSS
Dependendo do tipo de mecanismo de bundling utilizado, será necessário importar o CSS do pacote NPM para que as instâncias do leitor fiquem corretamente estilizadas.
Consulte a documentação do seu bundler para ver como adicionar CSS às suas folhas de estilo.
Um exemplo de como a importação pode parecer para projetos Webpack usando `~` como `node_modules` prefixo de importação.
```css
@import "~fluid-player/src/css/fluidplayer.css";
```
### Integração usando CDN
O Fluid Player fornece uma versão CDN disponível para ligação direta a partir de [https://cdn.fluidplayer.com](https://cdn.fluidplayer.com/).
**IMPORTANTE:** A partir da v3.0.0, a versão CDN do Fluid Player vem com CSS incorporado. Já não é necessária uma tag separada para incluir CSS.
Usar automaticamente a versão mais recente (recomendado):
```html
```
Ou especifique a versão:
```html
```
#### Exemplo de integração CDN
```html
```
### Mudança de qualidade
Várias fontes podem ser adicionadas como mostrado abaixo. O título será apresentado ao utilizador ao alternar entre fontes, e deve ser definido de acordo com a qualidade do vídeo, como pode ser visto abaixo ('1080p', '720p' etc).
```html
```
### Definir fonte como HD
As fontes definidas para [mudança de qualidade](#quality-switching) podem ser definidas como HD adicionando um **data-fluid-hd** atributo à tag. A cor deste texto corresponderá à [cor principal](/portuguese/configuracao/layout.md#primarycolor). Se pretender substituir esta cor, pode fazê-lo usando CSS personalizado na sua própria página. A classe responsável pela cor é **fp\_hd\_source**. Um exemplo de substituição desta cor é mostrado abaixo.
```css
.fp_hd_source { color: yellow !important; }
```
Um exemplo de como o HD é definido nas fontes é mostrado abaixo.
```html
```
### Definir opções adicionais
O Fluid Player pode ser personalizado definindo alguns parâmetros opcionais. A lista completa de parâmetros pode ser encontrada em [Configuração](/portuguese/configuracao/layout.md)
```html
```
---
# 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/portuguese/integracao/quick-setup.md?ask=
```
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.