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

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

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.

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:

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