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:
.s7mixedmediaviewer .s7videoplayer
Propriedades de CSS do player de vídeo
cor de fundo |
A cor de fundo do player de vídeo. |
A mensagem de erro exibida se o sistema não conseguir reproduzir o vídeo pode ser localizada. Consulte Localização de elementos da interface do usuário para obter mais informações.
Exemplo - Para tornar o player de vídeo transparente:
.s7mixedmediaviewer .s7videoplayer {
background-color: transparent;
}
As legendas são colocadas em 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; seu estilo é controlado com o seguinte seletor de classe CSS:
.s7mixedmediaviewer .s7videoplayer .s7caption
Propriedades de CSS de legendas
Propriedade CSS |
Descrição |
---|---|
cor de fundo |
Plano de fundo do texto da legenda. |
cor |
Cor do texto da legenda. |
font-peso |
Peso de fonte. |
font-size |
Tamanho da fonte. |
família de fontes |
Família de fontes. |
Exemplo - Para configurar o texto da legenda para ter 14 pixels de Arial cinza claro em um plano de fundo preto semitransparente:
.s7mixedmediaviewer .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:
.s7mixedmediaviewer .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:
.s7mixedmediaviewer .s7videoplayer .s7waiticon {
width: 101px;
height: 29px;
margin-left: -50px;
margin-top: -15px;
background-image: url(images/sdk/busyicon.gif);
}