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 <script> tag e já está. Melhor para a maioria dos websites, sem necessidade de instalação.
• A abordagem NPM - instale o pacote via NPM. Para programadores que usam uma ferramenta de build como Webpack ou Vite.

Escolha a que melhor se adapta à sua configuração. Se não tiver a certeza, a abordagem CDN é a escolha certa.

ℹ️ A executar WordPress? Não precisa de fazer nada disto - instale o plugin WordPress do Fluid Player em vez disso.

---

Opção 1: Usar a CDN (recomendado)

Uma CDN é um serviço que aloja os ficheiros do Fluid Player por si, por isso não precisa de transferir ou instalar nada. Basta criar uma ligação para eles a partir da sua página.

Passo 1: Adicione um vídeo à sua página

Se ainda não tiver um, adicione uma <video> tag onde quiser que o player apareça:

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

O id atributo é o que indica ao Fluid Player qual o vídeo a melhorar - certifique-se de que ele existe.

Passo 2: Carregue o Fluid Player e inicie-o

Mesmo antes da </body> tag de fecho da sua página, adicione o script do Fluid Player e um inicializador de uma linha. A sua página finalizada deve ser parecida com isto:

<!-- O vídeo, algures na sua página -->
<video id="example-player">
    <source src="video.mp4" type="video/mp4" />
</video>

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

É 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 <link> 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:

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

---

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:

npm install fluid-player@^3.0.0

Usando yarn:

yarn add fluid-player@^3.0.0

Importe o JavaScript

Onde quer que pretenda usar o Fluid Player no seu código:

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:

@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 <source> tags — o Fluid Player apresentará um seletor de qualidade nos controlos do player.

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

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 à <source> tag. Por predefinição, a etiqueta HD usa a cor principal do seu player.

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

Se preferir usar uma cor diferente para a etiqueta HD, substitua-a no seu próprio CSS - a classe relevante é fp_hd_source:

.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.

<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 o aspeto e comportamento do player
        },
        vastOptions: {
            // Parâmetros para personalizar a forma como os anúncios são apresentados e o seu comportamento
        }
    }
);
</script>

Para a lista completa de opções, consulte a Referência de configuração.

---

Referência: o inicializador

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 <video> tag como uma string, por exemplo 'my-video', ou
• O elemento de vídeo diretamente, por exemplo document.getElementById('my-video')

options (opcional) - um objeto de configuração. Consulte Configuração para a lista completa.

⚠️ Atenção: Se passar o elemento de vídeo diretamente e este ainda não tiver um id atributo, o Fluid Player adicionará um automaticamente. Se o seu código depender de o elemento não ter um id, defina um você mesmo antes de chamar fluidPlayer().

---

E agora?

💡 Configurar anúncios → Anúncios.

🎨 Personalizar o aspeto → Configuração do layout.

📝 Adicionar legendas → Legendas.