비디오 스크러버 video-scrubber

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

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

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

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

비디오 스크러버의 CSS 속성

최상위
패딩을 포함하여 위쪽 테두리에서 위치.
하단
패딩을 포함하여 아래쪽 테두리에서 위치합니다.
height
비디오 스크러버의 높이입니다.
background-color
비디오 스크러버 색입니다.

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

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

트랙의 CSS 속성

height
해당 트랙의 높이입니다.
background-color
해당 트랙의 색입니다.

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

.s7interactivevideoviewer .s7videoscrubber .s7knob

노브의 CSS 속성

최상위
세로 손잡이 오프셋.
width
손잡이 폭.
height
손잡이 높이.
background-image
손잡이 아트워크.
background-position

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

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

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

.s7interactivevideoviewer .s7videoscrubber .s7videotime

재생된 시간의 CSS 속성 버블

font-family
시간에 사용할 글꼴 모음 표시 텍스트입니다.
font-size
시간 표시 텍스트에 사용할 글꼴 크기입니다.
color
시간 표시 텍스트에 사용할 글꼴 색상입니다.
width
버블 영역 폭.
height
거품 영역 높이입니다.
패딩
버블 영역 패딩.
background-image
버블 아트워크.
background-position

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

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

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

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

- 비디오 스크러버와 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 속성

width
비디오 챕터 마커 폭.
height
비디오 챕터 마커 높이.
background-image
비디오 챕터 마커 아트워크.
background-position

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

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

NOTE
이 버튼은 state 속성 선택기: 다른 단추 상태에 다른 스킨을 적용하는 데 사용할 수 있습니다. 특히, selected='default' 는 기본 비디오 챕터 마커 상태에 해당하며, selected='over' 마우스 오버 또는 터치 제스처로 비디오 챕터 마커가 활성화될 때 사용됩니다.

- 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 속성

최대 폭
비디오 챕터 버블의 최대 폭입니다.
하단
비디오 스크러버 트랙에서의 수직 오프셋입니다.

- 비디오 스크러버 트랙의 맨 아래에서 8픽셀 위로 235픽셀 너비의 비디오 챕터 버블을 설정합니다.

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

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

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

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header

비디오 챕터 버블 헤더의 CSS 속성

height
비디오 챕터 버블 헤더 높이.
패딩
비디오 챕터 버블 헤더 텍스트에 대한 내부 패딩입니다.
background-color
비디오 챕터 버블 헤더 배경색입니다.
선 높이
비디오 챕터 버블 헤더 텍스트 줄 높이.

- 높이 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 속성

color
텍스트 색상.
font-weight
글꼴 두께.
font-size
글꼴 크기입니다.
font-family
글꼴 모음.
오른쪽 패딩
시작 시간과 챕터 제목 사이의 패딩.

- 회색 10픽셀 Verdana 글꼴을 사용하여 챕터 시작 시간을 설정하고 오른쪽에 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 속성

color
비디오 챕터 제목 텍스트 색상.
font-weight
비디오 챕터 제목 글꼴 두께입니다.
font-size
비디오 챕터 제목 글꼴 크기입니다.
font-family
비디오 챕터 제목 글꼴 모음

- 흰색, 굵게, 10픽셀 Verdana 글꼴을 사용하는 비디오 챕터 제목을 설정합니다.

.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 속성

color
비디오 챕터 설명 텍스트 색상.
background-color
비디오 챕터 설명 배경색입니다.
font-weight
비디오 챕터 설명 글꼴 두께입니다.
font-size
비디오 챕터 설명 글꼴 크기입니다.
font-family
비디오 챕터 설명 글꼴 모음
선 높이
비디오 챕터 설명 줄 높이입니다.
패딩
비디오 챕터 설명 내부 패딩.

- 밝은 회색 배경의 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 속성

border-color

쐐기 커넥터 색상.

다음으로 정의됨 <color> 투명 따라서 위쪽 테두리 색상만 정의되고 나머지 테두리는 투명하게 유지됩니다.

border-width

쐐기 커넥터 너비.

다음으로 정의됨 <width> <width> 0 따라서 동일한 너비가 위쪽 및 가로 테두리에 대해서만 정의되고 아래쪽 테두리 너비는 0 .

margin
음수 하단 여백만 정의합니다. 값과 동일해야 합니다. border-width .

- 회색 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;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8