비디오 스크러버

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

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

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

.s7interactivevideoviewer .s7videoscrubber 
.s7interactivevideoviewer .s7videoscrubber .s7videotime 
.s7interactivevideoviewer .s7videoscrubber .s7knob

비디오 스크러버의 CSS 속성

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

.s7interactivevideoviewer .s7videoscrubber .s7track 
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded 
.s7interactivevideoviewer .s7videoscrubber .s7trackplayed

트랙의 CSS 속성

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

.s7interactivevideoviewer .s7videoscrubber .s7knob

노브의 CSS 속성

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

.s7interactivevideoviewer .s7videoscrubber .s7videotime

재생되는 시간의 CSS 속성

비디오 스크러버 도구 설명을 현지화할 수 있습니다. 자세한 내용은 사용자 인터페이스 요소 현지화를 참조하십시오.

예 - 비디오 스크러버와 10픽셀의 사용자 지정 추적 색상이 있는 비디오 뷰어를 설정하려면 다음을 수행하십시오. 컨트롤 막대의 위쪽 및 왼쪽 가장자리에서 10픽셀과 35픽셀을 배치합니다.

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

navigation 매개 변수를 사용하여 비디오 장 마커를 활성화하면 장 위치가 비디오 스크러버 트랙 맨 위에 마커로 표시됩니다.

비디오 장 마커는 다음 CSS 클래스 선택기에 의해 제어됩니다.

.s7interactivevideoviewer .s7videoscrubber .s7navigation

비디오 장 마커의 CSS 속성

예 - 5 x 8픽셀인 비디오 장 마커를 설정하고 "기본값" 및 "초과" 상태에 다른 아트를 사용합니다.

.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"); 
}

비디오 장 버블은 비디오 장 마커의 맨 위에 배치되며 주어진 장의 제목, 시작 시간 및 설명을 표시합니다. 비디오 스크러버 트랙에 대해 최대 버블 너비 및 수직 오프셋을 제어할 수 있다. 나머지는 구성 요소에 의해 자동으로 계산됩니다.

비디오 장 버블은 다음 CSS 클래스 선택기에 의해 제어됩니다.

.s7interactivevideoviewer .s7videoscrubber .s7chapter

비디오 장 버블의 CSS 속성

예 - 235픽셀이고 비디오 스크러버 트랙 하단에서 8픽셀인 비디오 장 버블을 설정하려면 다음을 수행하십시오.

.s7interactivevideoviewer .s7videoscrubber .s7chapter { 
max-width:235px; 
bottom:8px; 
}

비디오 장 버블은 선택적 헤더와 콘텐츠로 구성됩니다. 헤더에는 선택적 장 시작 시간 및 장 제목이 있습니다.

헤더는 다음 CSS 클래스 선택기에 의해 제어됩니다.

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header

비디오 장 버블 헤더의 CSS 속성

예 - 22픽셀 높이의 비디오 장 버블 헤더를 설정하려면 22픽셀 라인 높이, 12픽셀 가로 여백 및 회색 배경을 설정하십시오.

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header { 
height:22px; 
padding:0 12px; 
line-height:22px; 
background-color: rgba(51, 51, 51, 0.8); 
}

비디오 장의 시작 시간은 다음 CSS 클래스 선택기에 의해 제어됩니다.

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime

비디오 장 시작 시간의 CSS 속성

예 - 회색 세로 10픽셀 버다나 글꼴을 사용하여 장 시작 시간을 설정하고 오른쪽에는 열 픽셀 패딩이 있습니다.

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime { 
color: #dddddd; 
font-family: Verdana,Arial,Helvetica,sans-serif; 
font-size: 10px; 
padding-right: 10px; 
}

비디오 장 제목은 다음 CSS 클래스 선택기에 의해 제어됩니다.

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7title

비디오 장 제목의 CSS 속성

예 - 흰색, 굵은 10픽셀 버다나 글꼴을 사용하는 비디오 장 제목을 설정하려면 다음을 수행하십시오.

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7title { 
color: #ffffff; 
font-family: Verdana,Arial,Helvetica,sans-serif; 
font-size: 10px; 
font-weight: bold; 
}

비디오 장 설명은 다음 CSS 클래스 선택기에 의해 제어됩니다.

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7description

비디오 장 설명의 CSS 속성

예 - 어두운 회색의 11픽셀 Verdana 글꼴과 밝은 회색 배경을 사용하여 비디오 장 설명을 설정하려면 다음을 수행하십시오. 5픽셀 라인 높이, 12픽셀 수평 패딩, 12픽셀 위쪽 패딩 및 9픽셀 아래쪽 패딩입니다.

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

장 버블의 맨 아래에 있는 웨지 커넥터는 다음 CSS 클래스 선택기에 의해 제어됩니다.

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail

웨지 커넥터의 CSS 속성

예 - 회색의 6개 픽셀 웨지 커넥터를 설정하려면 다음을 수행합니다.

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail { 
border-color: rgba(221, 221, 221, 0.9) transparent transparent; 
border-width: 6px 6px 0; 
margin: 0 0 0 -6px; 
}