비디오 스크러버는 사용자가 현재 재생 중인 비디오 내의 모든 시간 위치를 동적으로 찾을 수 있는 가로 슬라이더 컨트롤입니다.
비디오가 재생될 때 스크러버 '손잡이'도 움직여서 재생 중 비디오의 현재 시간 위치를 가리킨다. 비디오 스크러버는 항상 컨트롤 막대의 전체 너비를 사용합니다. CSS를 사용하여 비디오 스크러버의 스킨을 만들고 높이 및 세로 위치를 변경할 수 있습니다.
비디오 스크러버의 일반적인 모양은 다음 CSS 클래스 선택기로 제어됩니다.
.s7videoviewer .s7videoscrubber
.s7videoviewer .s7videoscrubber .s7videotime
.s7videoviewer .s7videoscrubber .s7knob
비디오 스크러버의 CSS 속성
최상위 |
패딩을 포함하여 위쪽 테두리에서 위치. |
하단 |
패딩을 포함하여 아래쪽 테두리에서 위치합니다. |
height |
비디오 스크러버의 높이입니다. |
background-color |
비디오 스크러버 색입니다. |
다음 CSS 클래스 선택기는 배경, 재생 및 로드 지표를 추적합니다.
.s7videoviewer .s7videoscrubber .s7track
.s7videoviewer .s7videoscrubber .s7trackloaded
.s7videoviewer .s7videoscrubber .s7trackplayed
트랙의 CSS 속성
height |
해당 트랙의 높이입니다. |
background-color |
해당 트랙의 색입니다. |
다음 CSS 클래스 선택기는 손잡이를 제어합니다.
.s7videoviewer .s7videoscrubber .s7knob
노브의 CSS 속성
최상위 |
세로 손잡이 오프셋. |
width |
손잡이 폭. |
height |
손잡이 높이. |
background-image |
손잡이 아트워크. |
background-position |
CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 배치합니다. 다음을 참조하십시오 CSS 스프라이트 . |
다음 CSS 클래스 선택기는 재생된 시간 버블을 제어합니다.
.s7videoviewer .s7videoscrubber .s7videotime
재생된 시간의 CSS 속성 버블
font-family |
시간에 사용할 글꼴 모음 표시 텍스트입니다. |
font-size |
시간 표시 텍스트에 사용할 글꼴 크기입니다. |
color |
시간 표시 텍스트에 사용할 글꼴 색상입니다. |
width |
버블 영역 폭. |
height |
거품 영역 높이입니다. |
패딩 |
버블 영역 패딩. |
background-image |
버블 아트워크. |
background-position |
CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 배치합니다. 다음을 참조하십시오 CSS 스프라이트 . |
text-align |
텍스트를 버블 영역과 정렬합니다. |
비디오 스크러버 도구 팁을 현지화할 수 있습니다. 다음을 참조하십시오 사용자 인터페이스 요소의 현지화 추가 정보.
예 - 사용자 지정 트랙 색상으로 비디오 스크러버를 사용하여 비디오 뷰어를 설정합니다. 스크러버는 10픽셀이어야 하며, 컨트롤 막대의 위쪽 및 왼쪽 가장자리에서 10픽셀과 35픽셀을 배치해야 합니다.
.s7videoviewer .s7videoscrubber {
top:10px;
left:35px;
height:10px;
background-color:#AAAAAA;
}
.s7videoviewer .s7videoscrubber .s7track {
height:10px;
background-color:#444444;
}
.s7videoviewer .s7videoscrubber .s7trackloaded {
height:10px;
background-color:#666666;
}
.s7videoviewer .s7videoscrubber .s7trackplayed {
height:10px;
background-color:#888888;
}
비디오 챕터가 활성화된 경우 navigation
매개 변수, 챕터 위치는 비디오 스크러버 트랙 맨 위에 마커로 표시됩니다.
비디오 챕터 마커는 다음 CSS 클래스 선택기에 의해 제어됩니다.
.s7videoviewer .s7videoscrubber .s7navigation
비디오 챕터 마커의 CSS 속성
width |
비디오 챕터 마커 폭. |
height |
비디오 챕터 마커 높이. |
background-image |
비디오 챕터 마커 아트워크. |
background-position |
CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 배치합니다. 다음을 참조하십시오 CSS 스프라이트 . |
이 버튼은 state
속성 선택기: 다른 단추 상태에 다른 스킨을 적용하는 데 사용할 수 있습니다. 특히, selected='default'
는 기본 비디오 챕터 마커 상태에 해당하며, selected='over'
마우스 오버 또는 터치 제스처로 비디오 챕터 마커가 활성화될 때 사용됩니다.
예 - 5 x 8 픽셀이고 "기본" 및 "초과" 상태에 다른 아트를 사용하는 비디오 챕터 마커를 설정합니다.
.s7videoviewer .s7videoscrubber .s7navigation {
width:5px;
height:8px;
}
.s7videoviewer .s7videoscrubber .s7navigation[state="default"] {
background-image: url("images/v2/VideoScrubberDiamond.png");
}
.s7videoviewer .s7videoscrubber .s7navigation[state="over"] {
background-image: url("images/v2/VideoScrubberDiamond_over.png");
}
비디오 챕터 버블은 비디오 챕터 마커의 맨 위에 위치하며 지정된 챕터의 제목, 시작 시간 및 설명을 표시합니다. 비디오 스크러버 트랙에 대해 최대 버블 폭과 수직 오프셋을 제어할 수 있다. 나머지는 구성 요소에 의해 자동으로 계산됩니다.
비디오 챕터 버블은 다음 CSS 클래스 선택기에 의해 제어됩니다.
.s7videoviewer .s7videoscrubber .s7chapter
비디오 챕터 버블의 CSS 속성
최대 폭 |
비디오 챕터 버블의 최대 폭입니다. |
하단 |
비디오 스크러버 트랙에서의 수직 오프셋입니다. |
예 - 비디오 스크러버 트랙의 맨 아래에서 8픽셀 위로 235픽셀 너비의 비디오 챕터 버블을 설정합니다.
.s7videoviewer .s7videoscrubber .s7chapter {
max-width:235px;
bottom:8px;
}
비디오 챕터 버블은 선택적 헤더와 콘텐츠로 구성됩니다. 헤더에는 선택적 챕터 시작 시간 및 챕터 제목이 있습니다.
헤더는 다음 CSS 클래스 선택기에 의해 제어됩니다.
.s7videoviewer .s7videoscrubber .s7chapter .s7header
비디오 챕터 버블 헤더의 CSS 속성
height |
비디오 챕터 버블 헤더 높이. |
패딩 |
비디오 챕터 버블 헤더 텍스트에 대한 내부 패딩입니다. |
background-color |
비디오 챕터 버블 헤더 배경색입니다. |
선 높이 |
비디오 챕터 버블 헤더 텍스트 줄 높이. |
예 - 높이 22픽셀, 선 높이 22픽셀, 가로 여백 12픽셀 및 회색 배경인 비디오 챕터 버블 헤더를 설정합니다.
.s7videoviewer .s7videoscrubber .s7chapter .s7header {
height:22px;
padding:0 12px;
line-height:22px;
background-color: rgba(51, 51, 51, 0.8);
}
비디오 챕터의 시작 시간은 다음 CSS 클래스 선택기에 의해 제어됩니다.
.s7videoviewer .s7videoscrubber .s7chapter .s7header .s7starttime
비디오 챕터 시작 시간의 CSS 속성
color |
텍스트 색상. |
font-weight |
글꼴 두께. |
font-size |
글꼴 크기입니다. |
font-family |
글꼴 모음. |
오른쪽 패딩 |
시작 시간과 챕터 제목 사이의 패딩. |
예 - 회색 10픽셀 Verdana 글꼴을 사용하여 챕터 시작 시간을 설정하고 오른쪽에 10픽셀 패딩이 있습니다.
.s7videoviewer .s7videoscrubber .s7chapter .s7header .s7starttime {
color: #dddddd;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
padding-right: 10px;
}
비디오 챕터 제목은 다음 CSS 클래스 선택기에 의해 제어됩니다.
.s7videoviewer .s7videoscrubber .s7chapter .s7header .s7title
비디오 챕터 제목의 CSS 속성
color |
비디오 챕터 제목 텍스트 색상. |
font-weight |
비디오 챕터 제목 글꼴 두께입니다. |
font-size |
비디오 챕터 제목 글꼴 크기입니다. |
font-family |
비디오 챕터 제목 글꼴 모음 |
예 - 흰색, 굵게, 10픽셀 Verdana 글꼴을 사용하는 비디오 챕터 제목을 설정합니다.
.s7videoviewer .s7videoscrubber .s7chapter .s7header .s7title {
color: #ffffff;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
font-weight: bold;
}
비디오 챕터 설명은 다음 CSS 클래스 선택기에 의해 제어됩니다.
.s7videoviewer .s7videoscrubber .s7chapter .s7description
비디오 챕터 설명의 CSS 속성
color |
비디오 챕터 설명 텍스트 색상. |
background-color |
비디오 챕터 설명 배경색입니다. |
font-weight |
비디오 챕터 설명 글꼴 두께입니다. |
font-size |
비디오 챕터 설명 글꼴 크기입니다. |
font-family |
비디오 챕터 설명 글꼴 모음 |
선 높이 |
비디오 챕터 설명 줄 높이입니다. |
패딩 |
비디오 챕터 설명 내부 패딩. |
예 - 밝은 회색 배경의 11픽셀 Verdana 글꼴을 사용하여 비디오 챕터 설명을 설정합니다. 마지막으로 에서는 5개의 픽셀 라인 높이, 12개의 픽셀 가로 패딩, 12개의 픽셀 위쪽 패딩 및 9개의 픽셀 아래쪽 패딩을 사용합니다.
.s7videoviewer .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 클래스 선택기에 의해 제어됩니다.
.s7videoviewer .s7videoscrubber .s7chapter .s7tail
쐐기 커넥터의 CSS 속성
border-color |
쐐기 커넥터 색상. 다음으로 정의됨 <color> 투명 따라서 위쪽 테두리 색상만 정의되고 나머지 테두리는 투명하게 유지됩니다. |
border-width |
쐐기 커넥터 너비. 다음으로 정의됨 <width> <width> 0 따라서 동일한 너비가 위쪽 및 가로 테두리에 대해서만 정의되고 아래쪽 테두리 너비는 0 . |
margin |
음수 하단 여백만 정의합니다. 값과 동일해야 합니다. border-width . |
예 - 회색 6픽셀 쐐기 커넥터를 설정하려면 다음을 수행합니다.
.s7videoviewer .s7videoscrubber .s7chapter .s7tail {
border-color: rgba(221, 221, 221, 0.9) transparent transparent;
border-width: 6px 6px 0;
margin: 0 0 0 -6px;
}