# Vistas previas

### Añadir miniaturas de vista previa

Se pueden añadir miniaturas de vista previa al vídeo de Fluid Player para que se muestren cuando se pasa el cursor sobre la barra de progreso.\
Cuando se añaden, reemplazarán el tiempo que normalmente se muestra.\
Esta es una función común que permite a los usuarios navegar fácilmente por el vídeo.\
A continuación se muestra un vídeo de ejemplo que muestra las miniaturas.

### Formato VTT

El formato utilizado es WebVTT, un estándar de HTML5. Los detalles sobre el formato WebVTT se pueden encontrar [aquí](https://w3c.github.io/webvtt/).\
Cuando se usa para miniaturas, los archivos VTT contienen enlaces a las imágenes de miniatura o la posición de una única imagen sprite. Estas imágenes pueden estar en formato JPG, PNG o GIF.\
La imagen y los tiempos en los que se debe apuntar a esa imagen se definen en el archivo, cuyo contenido debería contener lo siguiente:

* El rango que representa la miniatura del tooltip. Ten en cuenta que el rango debe estar en formato (HH:)MM:SS.MMM.
* La URL de la miniatura del tooltip para este rango. La URL es relativa al archivo VTT (no a la página ni al reproductor), de forma similar a las imágenes incluidas en hojas CSS.

#### Archivo VTT de ejemplo - Imágenes separadas

Si las imágenes se almacenan por separado, el contenido del archivo .vtt se vería similar a lo que se muestra a continuación.\
Ten en cuenta que vemos *thumbnail1.jpg*, *thumbnail2.jpg* y *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
```

#### Archivo VTT de ejemplo - Imagen sprite

Almacenar las imágenes en un solo archivo puede ahorrar espacio y complejidad.\
Si las imágenes se almacenan en un solo archivo de imagen, el contenido de nuestro .vtt se vería similar a lo que se muestra a continuación.

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

### Añadiendo a Fluid Player

Para configurar Fluid Player para usar tu archivo VTT, puedes establecerlo como el parámetro opcional **timelinePreview** debajo de **layoutControls**.\
Siempre que el archivo sea correcto, el siguiente código configurará las vistas previas de miniaturas.\
Las rutas de la imagen sprite (thumbnails.jpg) son relativas a la URL raíz en el archivo VTT.

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

Puedes hacer que las rutas del sprite sean relativas al archivo VTT con la configuración `spriteRelativePath` .\
En este caso, la `thumbnails.jpg#xywh=480,0,120,68` ruta de la imagen será relativa a `thumbs/` como resultado `thumbs/thumbnails.jpg`

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

Opcionalmente, si la imagen de miniaturas no está definida en thumbnails.vtt o quieres sobrescribirla, puedes establecer `sprite` propiedad.\
Ten en cuenta que, en este caso, spriteRelativePath no tendrá ningún efecto.

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

### Formato estático

Si el formato WebVTT no te conviene, las miniaturas se pueden definir de forma estática.

#### Ejemplo de configuración estática

La `startTime` y `endTime` las propiedades se definen en 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/es/configuracion/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.