O player de vídeo é a área retangular na qual o conteúdo do vídeo é exibido no visualizador.
Se as dimensões do vídeo que está sendo reproduzido não corresponderem às dimensões do player de vídeo, o conteúdo do vídeo será centralizado na área de exibição do retângulo do player de vídeo.
O seletor de classe CSS a seguir controla a aparência do player de vídeo:
.s7interactivevideoviewer .s7videoplayer
Propriedades de CSS do player de vídeo
cor de fundo |
Cor do plano de fundo da visualizaçã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 de elementos da interface do usuário.
Exemplo - Para configurar um visualizador de vídeo com o tamanho do player de vídeo definido como 512 x 288 pixels.
.s7interactivevideoviewer .s7videoplayer{
background-color: transparent;
}
As legendas ocultas são colocadas em um container interno dentro do player de vídeo. A posição desse container é controlada pelos operadores de posicionamento WebVTT suportados. O próprio texto da legenda está dentro desse container e seu estilo é controlado com o seguinte seletor de classe CSS:
.s7interactivevideoviewer .s7videoplayer .s7caption
Propriedades de CSS de legendas ocultas
cor de fundo |
Plano de fundo do texto da legenda fechada. |
cor |
Fechar a cor do texto da legenda. |
font-peso |
Peso de fonte de legenda fechada. |
font-size |
Tamanho da fonte da legenda fechada. |
família de fontes |
Fonte da legenda fechada. |
Para configurar o texto da legenda 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 |
Margem esquerda do ícone Animação, normalmente menos metade da largura do ícone. |
margem superior |
Margem superior do ícone de animação, normalmente menos metade da altura do ícone. |
background-image |
Nódulo de arte. |
Exemplo - para configurar uma animação de buffering para ter 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);
}