Depurador de vídeo video-scrubber
O depurador de vídeo é o controle deslizante horizontal que permite ao usuário buscar dinamicamente qualquer posição no vídeo em reprodução.
O "botão" do depurador também se move conforme o vídeo é reproduzido, para indicar a posição atual do vídeo durante a reprodução. O depurador de vídeo sempre ocupa toda a largura da barra de controle. É possível retirar a capa do depurador de vídeo e alterar sua altura e posição vertical usando CSS.
A aparência geral do depurador de vídeo é controlada com o seguinte seletor de classe CSS:
.s7interactivevideoviewer .s7videoscrubber
.s7interactivevideoviewer .s7videoscrubber .s7videotime
.s7interactivevideoviewer .s7videoscrubber .s7knob
Propriedades CSS do depurador de vídeo
Os seletores de classe CSS a seguir rastreiam os indicadores de plano de fundo, reprodução e carregamento:
.s7interactivevideoviewer .s7videoscrubber .s7track
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded
.s7interactivevideoviewer .s7videoscrubber .s7trackplayed
Propriedades CSS da faixa
O seletor de classe CSS a seguir controla o botão:
.s7interactivevideoviewer .s7videoscrubber .s7knob
Propriedades CSS do botão
O seletor de classe CSS a seguir controla a bolha de tempo reproduzida:
.s7interactivevideoviewer .s7videoscrubber .s7videotime
Propriedades CSS da bolha de tempo reproduzida
A dica de ferramenta do depurador de 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 um depurador de vídeo e cores de faixa personalizadas com dez pixels de altura. Posicione-o a dez pixels e 35 pixels das bordas superior e esquerda da barra de controle.
.s7interactivevideoviewer .s7videoscrubber {
top:10px;
left:35px;
height:10px;
background-color:#AAAAAA;
}
.s7interactivevideoviewer .s7videoscrubber .s7track {
height:10px;
background-color:#444444;
}
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded {
height:10px;
background-color:#666666;
}
.s7interactivevideoviewer .s7videoscrubber .s7trackplayed {
height:10px;
background-color:#888888;
}
Quando o marcador de capítulo de vídeo é ativado com a variável navigation
, as localizações dos capítulos são exibidas como marcadores na parte superior da faixa do depurador de vídeo.
O marcador de capítulo de vídeo é controlado pelo seguinte seletor de classe CSS:
.s7interactivevideoviewer .s7videoscrubber .s7navigation
Propriedades CSS do marcador de capítulo de vídeo
state
seletor de atributos, que você pode usar para aplicar capas diferentes a estados de botão diferentes. Em especial, selected='default'
corresponde ao estado padrão do marcador de capítulo de vídeo e selected='over'
é usado quando o marcador de capítulo de vídeo é ativado por um gesto de toque ou mouse sobre.Exemplo - Para configurar um marcador de capítulo de vídeo com 5 x 8 pixels e usar uma arte diferente para os estados "padrão" e "acima".
.s7interactivevideoviewer .s7videoscrubber .s7navigation {
width:5px;
height:8px;
}
.s7interactivevideoviewer .s7videoscrubber .s7navigation[state="default"] {
background-image: url("images/v2/VideoScrubberDiamond.png");
}
.s7interactivevideoviewer .s7videoscrubber .s7navigation[state="over"] {
background-image: url("images/v2/VideoScrubberDiamond_over.png");
}
A bolha de capítulo de vídeo é posicionada sobre o marcador de capítulo de vídeo e mostra o título, a hora de início e a descrição de um determinado capítulo. É possível controlar a largura máxima da bolha e o deslocamento vertical em relação à trilha do depurador de vídeo. O restante é calculado automaticamente pelo componente.
A bolha do capítulo de vídeo é controlada pelo seguinte seletor de classe CSS:
.s7interactivevideoviewer .s7videoscrubber .s7chapter
Propriedades CSS da bolha de capítulo de vídeo
Exemplo - Para configurar uma bolha de capítulo de vídeo com 235 pixels de largura e oito pixels acima da parte inferior da faixa do depurador de vídeo.
.s7interactivevideoviewer .s7videoscrubber .s7chapter {
max-width:235px;
bottom:8px;
}
A bolha do capítulo de vídeo consiste em um cabeçalho e conteúdo opcionais. O cabeçalho tem a hora de início e o título opcionais do capítulo.
O cabeçalho é controlado pelo seguinte seletor de classe CSS:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header
Propriedades CSS do cabeçalho de bolha do capítulo de vídeo
Exemplo - Para configurar um cabeçalho de bolha de capítulo de vídeo com 22 pixels de altura, uma altura de linha de 22 pixels, uma margem horizontal de 12 pixels e um plano de fundo cinza.
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header {
height:22px;
padding:0 12px;
line-height:22px;
background-color: rgba(51, 51, 51, 0.8);
}
A hora de início do capítulo de vídeo é controlada pelo seguinte seletor de classe CSS:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime
Propriedades CSS da hora de início do capítulo de vídeo
Exemplo - Para configurar a hora de início do capítulo usando fonte Verdana cinza de dez pixels e tem preenchimento de dez pixels à direita.
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime {
color: #dddddd;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
padding-right: 10px;
}
O título do capítulo de vídeo é controlado pelo seguinte seletor de classe CSS:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7title
Propriedades CSS do título do capítulo do vídeo
Exemplo - Para configurar um título de capítulo de vídeo que use uma fonte Verdana branca, negrito e de dez pixels.
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7title {
color: #ffffff;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
font-weight: bold;
}
A descrição do capítulo de vídeo é controlada pelo seguinte seletor de classe CSS:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7description
Propriedades CSS da descrição do capítulo de vídeo
Exemplo - Para configurar a descrição do capítulo de vídeo usando uma fonte Verdana de 11 pixels cinza escuro, com um plano de fundo cinza claro. Uma altura de linha de cinco pixels, preenchimento horizontal de 12 pixels, preenchimento superior de 12 pixels e preenchimento inferior de nove pixels.
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7description {
color: #333333;
background-color: rgba(221, 221, 221, 0.9);
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 11px;
line-height: 15px;
padding: 12px 12px 9px;
}
O conector de cunha na parte inferior da bolha de capítulo é controlado pelo seguinte seletor de classe CSS:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail
Propriedades CSS do conector de cunha
Exemplo - Para configurar um conector de cunha cinza de seis pixels:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail {
border-color: rgba(221, 221, 221, 0.9) transparent transparent;
border-width: 6px 6px 0;
margin: 0 0 0 -6px;
}