Reprodutor de vídeo

O reprodutor de vídeo é a área retangular na qual o conteúdo de vídeo é exibido no visualizador.

Se as dimensões do vídeo que está sendo reproduzido não corresponderem às dimensões do reprodutor de vídeo, o conteúdo do vídeo será centralizado na área de exibição do retângulo do reprodutor de vídeo.

O seguinte seletor de classe CSS controla a aparência do reprodutor de vídeo:

.s7interactivevideoviewer .s7videoplayer

Propriedades CSS do reprodutor de vídeo

cor do fundo

Cor do plano de fundo da exibição principal.

Você pode localizar a mensagem de erro exibida nos casos em que o sistema não consegue reproduzir o vídeo.

Consulte Localização dos elementos da interface do usuário.

Exemplo - Para configurar um visualizador de vídeo com o tamanho do reprodutor de vídeo definido como 512 x 288 pixels.

.s7interactivevideoviewer .s7videoplayer{ 
background-color: transparent; 
}

As legendas ocultas são colocadas em um contêiner interno no reprodutor de vídeo. A posição desse contêiner é controlada por operadores de posicionamento WebVTT compatíveis. O texto da legenda em si está dentro desse contêiner e seu estilo é controlado com o seguinte seletor de classe CSS:

.s7interactivevideoviewer .s7videoplayer .s7caption

Propriedades CSS de legendas ocultas

cor do fundo

Plano de fundo do texto da legenda fechada.

color

Fechar cor do texto da legenda.

font-weight

Peso da fonte da legenda fechada.

tamanho da fonte

Tamanho da fonte da legenda oculta.

família de fontes

Fonte da legenda oculta.

Exemplo

Para configurar o texto de legenda fechada para 14 pixels, cinza claro, Arial®, em um plano de fundo preto semitransparente:

.s7interactivevideoviewer .s7videoplayer .s7caption { 
 background-color: rgba(0,0,0,0.75); 
 color: #e6e6e6; 
 font-weight: normal; 
 font-size: 14px; 
 font-family: Arial,Helvetica,sans-serif; 
}

A aparência da animação de buffering é controlada com o seguinte seletor de classe CSS:

.s7interactivevideoviewer .s7videoplayer .s7waiticon

Propriedades CSS do ícone de espera

Propriedade CSS

Descrição

width

Largura do ícone de animação.

altura

Altura do ícone de animação.

margem esquerda

Ícone de animação margem esquerda, normalmente menos metade da largura do ícone.

margem superior

Margem superior do ícone de animação, normalmente menos a metade da altura do ícone.

imagem de fundo

Arte do botão.

Exemplo - para configurar uma animação de buffer de 101 pixels de largura, 29 pixels de altura:

.s7interactivevideoviewer .s7videoplayer .s7waiticon { 
 width: 101px; 
 height: 29px; 
 margin-left: -50px; 
 margin-top: -15px; 
 background-image: url(images/sdk/busyicon.gif); 
}

Nesta página