Depurador de vídeo

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

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;
}

Recursos do Business.Adobe.com

Ecommerce Integrations Auto Text Summarization Style System Web Content Management Digital Rights Management Headless Cms