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:
.s7videoviewer .s7videoplayer
Propriedades CSS do reprodutor de vídeo
cor do fundo |
Cor do plano de fundo da exibição principal. |
A mensagem de erro que é exibida se o sistema não for capaz de reproduzir o vídeo pode ser localizada. Consulte Localização dos elementos da interface do usuário para obter mais informações.
Exemplo - Para configurar um visualizador de vídeo com o tamanho do reprodutor de vídeo definido como 512 x 288 pixels.
.s7videoviewer .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:
. s7videoviewer .s7 videoplayer .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 da legenda fechada para ter 14 pixels, cinza claro, Arial®, em um plano de fundo preto semitransparente:
.s7videoviewer .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:
.s7videoviewer .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:
.s7videoviewer .s7videoplayer .s7waiticon {
width: 101px;
height: 29px;
margin-left: -50px;
margin-top: -15px;
background-image: url(images/sdk/busyicon.gif);
}