Previsualizaciones

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

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

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.

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:

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\
                    },\
                    ...\"
                ]
            }
        }
    }
);