# Pré-visualizações

### Adicionar miniaturas de pré-visualização

As miniaturas de pré-visualização podem ser adicionadas ao vídeo do Fluid Player para serem exibidas quando o rato passa sobre a barra de progresso.\
Quando são adicionadas, substituem o tempo que normalmente é mostrado.\
Esta é uma funcionalidade comum que permite aos utilizadores navegar facilmente pelo vídeo.\
Abaixo está um vídeo de exemplo que mostra as miniaturas.

### Formato VTT

O formato utilizado é WebVTT, um padrão HTML5. Detalhes sobre o formato WebVTT podem ser encontrados [aqui](https://w3c.github.io/webvtt/).\
Quando usado para miniaturas, os ficheiros VTT contêm ligações para as imagens das miniaturas ou a posição de uma única imagem sprite. Estas imagens podem estar em formato JPG, PNG ou GIF.\
A imagem e os tempos em que apontar para essa imagem são definidos no ficheiro, cujo conteúdo deve conter o seguinte:

* O intervalo que a miniatura da dica representa. Note que o intervalo precisa estar no formato (HH:)MM:SS.MMM.
* O URL da miniatura da dica para este intervalo. O URL é relativo ao ficheiro VTT (e não à página ou ao leitor), tal como as imagens incluídas em folhas CSS.

#### Exemplo de ficheiro VTT - Imagens separadas

Se as imagens forem armazenadas separadamente, o conteúdo do ficheiro .vtt seria semelhante ao mostrado abaixo.\
Note que vemos *thumbnail1.jpg*, *thumbnail2.jpg* e *thumbnail3.jpg*

```
WEBVTT

00:00:00.000 --> 00:00:05.000
thumbnail1.jpg

00:00:05.000 --> 00:00:10.000
thumbnail2.jpg

00:00:10.000 --> 00:00:15.000
thumbnail3.jpg
```

#### Exemplo de ficheiro VTT - Imagem sprite

Armazenar as imagens num único ficheiro pode poupar espaço e complexidade.\
Se as imagens forem armazenadas num único ficheiro de imagem, o conteúdo do nosso .vtt seria semelhante ao mostrado abaixo.

```
WEBVTT

00:00:00.000 --> 00:00:02.000
thumbnails.jpg#xywh=0,0,120,68

00:00:02.000 --> 00:00:04.000
thumbnails.jpg#xywh=120,0,120,68

00:00:04.000 --> 00:00:06.000
thumbnails.jpg#xywh=240,0,120,68

00:00:06.000 --> 00:00:08.000
thumbnails.jpg#xywh=360,0,120,68

00:00:08.000 --> 00:00:10.000
thumbnails.jpg#xywh=480,0,120,68
```

### Adicionando ao Fluid Player

Para configurar o Fluid Player para usar o seu ficheiro VTT, pode defini-lo como o parâmetro opcional **timelinePreview** em **layoutControls**.\
Desde que o ficheiro esteja correto, o código abaixo definirá as pré-visualizações das miniaturas.\
Os caminhos da imagem sprite (thumbnails.jpg) são relativos ao URL raiz no ficheiro VTT.

```javascript
fluidPlayer(
    'my-video',
    {
        layoutControls: {
            timelinePreview: {
                file: 'thumbnails.vtt',
                // spriteRelativePath: true, // Predefinição false
                // sprite: 'thumbnails.jpg',
                type: 'VTT'
            }
        }
    }
);
```

Pode tornar os caminhos da sprite relativos ao ficheiro VTT com a definição `spriteRelativePath` .\
Neste caso, o `thumbnails.jpg#xywh=480,0,120,68` caminho da imagem será relativo a `thumbs/` como resultado `thumbs/thumbnails.jpg`

```javascript
fluidPlayer(
    'my-video',
    {
        layoutControls: {
            timelinePreview: {
                file: 'thumbs/thumbnails.vtt',
                spriteRelativePath: true,
                type: 'VTT'
            }
        }
    }
);
```

Opcionalmente, se a imagem das miniaturas não estiver definida em thumbnails.vtt ou se quiser substituí-la, pode definir `sprite` propriedade.\
Por favor note que, neste caso, spriteRelativePath não terá qualquer efeito.

```javascript
fluidPlayer(
    'my-video',
    {
        layoutControls: {
            timelinePreview: {
                file: 'thumbnails/thumbnails.vtt',
                sprite: 'thumbnails/thumbnails.jpg',
                type: 'VTT'
            }
        }
    }
);
```

### Formato estático

Se o formato WebVTT não lhe servir, as miniaturas podem ser definidas estaticamente.

#### Exemplo de configuração estática

A `startTime` e `endTime` as propriedades são definidas em segundos:

```javascript
fluidPlayer(
    'my-video',
    {
        layoutControls: {
            timelinePreview: {
                type: 'static',
                frames: [\
                   {\
                        startTime: 0,\
                        endTime: 0.5,\
                        image: '/thumbnails/thumbnails.jpg',\
                        x: 0,\
                        y: 0,\
                        w: 200,\
                        h: 84\
                    },\
                    ...\ 
                ]
            }
        }
    }
);
```


---

# 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/configuracao/previews.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.