비디오 스크러버

마지막 업데이트: 2023-05-22
  • 작성 대상:
  • Developer
    User

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

비디오가 재생될 때 스크러버 '손잡이'도 움직여서 재생 중 비디오의 현재 시간 위치를 가리킨다. 비디오 스크러버는 항상 컨트롤 막대의 전체 너비를 사용합니다. CSS를 사용하여 비디오 스크러버의 스킨을 만들고, 높이 및 세로 위치를 변경할 수 있습니다.

비디오 스크러버의 일반적인 모양은 다음 CSS 클래스 선택기로 제어됩니다.

.s7mixedmediaviewer .s7videoscrubber
.s7mixedmediaviewer .s7videoscrubber .s7videotime
.s7mixedmediaviewer .s7videoscrubber .s7knob

비디오 스크러버의 CSS 속성

최상위

패딩을 포함하여 위쪽 테두리에서 위치.

하단

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

height

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

background-color

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

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

.s7mixedmediaviewer .s7videoscrubber .s7track
.s7mixedmediaviewer .s7videoscrubber .s7trackloaded
.s7mixedmediaviewer .s7videoscrubber .s7trackplayed

트랙의 CSS 속성

height

해당 트랙의 높이입니다.

background-color

해당 트랙의 색입니다.

다음 CSS 클래스 선택기는 손잡이를 제어합니다.

.s7mixedmediaviewer .s7videoscrubber .s7knob

노브의 CSS 속성

최상위

세로 손잡이 오프셋.

width

손잡이 폭.

height

손잡이 높이.

background-image

손잡이 아트워크.

background-position

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

다음을 참조하십시오 CSS 스프라이트 .

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

.s7mixedmediaviewer .s7videoscrubber .s7videotime

재생된 시간의 CSS 속성 버블

font-family

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

font-size

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

color

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

width

버블 영역 폭.

height

거품 영역 높이입니다.

패딩

버블 영역 패딩.

background-image

버블 아트워크.

background-position

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

다음을 참조하십시오 CSS 스프라이트 .

text-align

텍스트를 버블 영역과 정렬합니다.

비디오 스크러버 도구 팁을 현지화할 수 있습니다. 다음을 참조하십시오 사용자 인터페이스 요소의 현지화 추가 정보.

예

사용자 지정 트랙 색상이 10픽셀 높이이고 컨트롤 막대의 위쪽 및 왼쪽 가장자리에서 10픽셀 및 35픽셀로 배치된 비디오 스크러버와 함께 혼합 미디어 뷰어를 설정합니다.

.s7mixedmediaviewer .s7videoscrubber  {
top:10px;
left:35px;
height:10px;
background-color:#AAAAAA;
}
.s7mixedmediaviewer .s7videoscrubber .s7track {
height:10px;
background-color:#444444;
}
.s7mixedmediaviewer .s7videoscrubber .s7trackloaded {
height:10px;
background-color:#666666;
}
.s7mixedmediaviewer .s7videoscrubber .s7trackplayed {
height:10px;
background-color:#888888;
}
이전 페이지
Next page

이 페이지의