비디오 스크러버

비디오 스크러버는 사용자가 현재 재생 중인 비디오 내의 임의의 시간 위치를 동적으로 찾을 수 있도록 해주는 가로 슬라이더 컨트롤입니다.

또한 스크러버 '노브'는 비디오가 재생되는 동안 비디오의 현재 시간 위치를 나타내기 위해 재생될 때 이동합니다. 비디오 스크러버는 항상 컨트롤 막대의 전체 너비를 사용합니다. CSS로 비디오 스크러버를 스킨 다음 높이 및 세로 위치를 변경할 수 있습니다.

비디오 스크러버의 일반 모양은 다음 CSS 클래스 선택기를 사용하여 제어됩니다.

.s7smartcropvideoviewer .s7videoscrubber
.s7smartcropvideoviewer .s7videoscrubber .s7videotime
.s7smartcropvideoviewer .s7videoscrubber .s7knob

비디오 스크러버의 CSS 속성

최상위

패딩을 포함하여 위쪽 테두리에서 위치를 지정합니다.

하단

패딩을 포함하여 아래쪽 테두리에서 위치를 지정합니다.

height

비디오 스크러버의 높이입니다.

배경색

비디오 스크러버의 색입니다.

다음 CSS 클래스 선택기는 배경, 재생 및 로드 표시기를 추적합니다.

.s7smartcropvideoviewer .s7videoscrubber .s7track
.s7smartcropvideoviewer .s7videoscrubber .s7trackloaded
.s7smartcropvideoviewer .s7videoscrubber .s7trackplayed

트랙의 CSS 속성

높이

해당 트랙의 높이입니다.

배경색

해당 트랙의 색입니다.

다음 CSS 클래스 선택기는 노브를 제어합니다.

.s7smartcropvideoviewer .s7videoscrubber .s7knob

노브의 CSS 속성

최상위

수직 노브 오프셋.

width

손잡이의 폭입니다.

높이

손잡이의 높이입니다.

배경 이미지

아트웍을 노브.

배경 위치

CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 위치를 지정합니다.

자세한 내용은 CSS Sprite .

다음 CSS 클래스 선택기는 재생되는 시간을 제어합니다.

.s7smartcropvideoviewer .s7videoscrubber .s7videotime

재생되는 시간의 CSS 속성

font-family

시간 표시 텍스트에 사용할 글꼴 모음입니다.

font-size

시간 표시 텍스트에 사용할 글꼴 크기입니다.

color

시간 표시 텍스트에 사용할 글꼴 색입니다.

너비

버블 영역 너비입니다.

높이

버블 영역 높이입니다.

패딩

버블 영역 패딩.

배경 이미지

아트웍의 버블.

배경 위치

CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 위치를 지정합니다.

자세한 내용은 CSS Sprite .

text-align

텍스트 맞춤을 버블 영역으로 지정합니다.

비디오 스크러버 도구 설명을 현지화할 수 있습니다. 자세한 내용은 사용자 인터페이스 요소의 로컬라이제이션 추가 정보.

예 - 10픽셀의 사용자 지정 트랙 색상이 있는 비디오 스크러버로 비디오 뷰어를 설정하려면 다음을 수행합니다. 마지막으로 컨트롤 막대의 위쪽 및 왼쪽 가장자리로부터 10픽셀과 35픽셀을 배치할 수 있습니다.

.s7smartcropvideoviewer .s7videoscrubber  {
top:10px;
left:35px;
height:10px;
background-color:#AAAAAA;
}
.s7smartcropvideoviewer .s7videoscrubber .s7track {
height:10px;
background-color:#444444;
}
.s7smartcropvideoviewer .s7videoscrubber .s7trackloaded {
height:10px;
background-color:#666666;
}
.s7smartcropvideoviewer .s7videoscrubber .s7trackplayed {
height:10px;
background-color:#888888;
}

이 페이지에서는