> For the complete documentation index, see [llms.txt](https://docs.fluidplayer.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.fluidplayer.com/portuguese/integracao/quick-setup.md).
# Configuração rápida
Esta página orienta-o na adição do Fluid Player ao seu website. Há duas formas de o fazer:
* **A abordagem CDN** - cole uma `
```
É tudo. Atualize a sua página - deverá ver a pele do Fluid Player substituir os controlos de vídeo predefinidos do navegador.
> ✅ **Desde a v3.0.0**, a build da CDN inclui o CSS automaticamente. Não precisa de uma `` tag separada para folhas de estilo.
#### **Fixar numa versão específica**
O URL acima (`/v3/current/`) serve sempre a versão mais recente do v3 - recomendado para a maioria dos casos. Se preferir bloquear para uma versão específica para que nunca mude sem que se aperceba, use:
```html
```
***
### **Opção 2: Instalar via NPM**
Use esta abordagem se estiver a criar uma aplicação JavaScript com um bundler como Webpack, Vite ou Rollup.
#### **Instale o pacote**
Execute uma destas no diretório raiz do seu projeto (onde `package.json` se encontra):
**Usando npm:**
```bash
npm install fluid-player@^3.0.0
```
**Usando yarn:**
```bash
yarn add fluid-player@^3.0.0
```
#### Importe o JavaScript
Onde quer que pretenda usar o Fluid Player no seu código:
```javascript
import fluidPlayer from 'fluid-player';
```
#### Importe o CSS
A build NPM não inclui o CSS — tem de o importar separadamente. A forma de o fazer depende do seu bundler. Para um projeto Webpack que use `~` como o `node_modules` prefixo de importação:
```css
@import "~fluid-player/src/css/fluidplayer.css";
```
Consulte a documentação do seu bundler se estiver a usar uma ferramenta diferente.
***
### Adicionar várias opções de qualidade
Se tiver o seu vídeo em diferentes qualidades (1080p, 720p, etc.), pode deixar os espectadores escolherem. Adicione várias `` tags — o Fluid Player apresentará um seletor de qualidade nos controlos do player.
```html
```
O `title` atributo é o que aparece no menu de qualidade.
#### Marcar uma origem como HD
Para destacar visualmente as opções de alta definição, adicione `data-fluid-hd` à `` tag. Por predefinição, a etiqueta HD usa a cor principal do seu player.
```html
```
Se preferir usar uma cor diferente para a etiqueta HD, substitua-a no seu próprio CSS - a classe relevante é `fp_hd_source`:
```css
.fp_hd_source { color: yellow !important; }
```
***
### Personalizar o player
O Fluid Player aceita um objeto de configuração como segundo argumento. É aqui que define o aspeto, o comportamento dos anúncios e praticamente tudo o resto.
```html
```
Para a lista completa de opções, consulte a [**Referência de configuração**](/portuguese/configuracao/layout.md).
***
### Referência: o inicializador
```javascript
var player = fluidPlayer(target [, options]);
```
**`target`** *(obrigatório)* - indica ao Fluid Player a que vídeo se deve associar. Pode passar qualquer um destes:
* O `id` da sua `