비디오 스크러버는 사용자가 현재 재생 중인 비디오 내의 임의의 시간 위치를 동적으로 찾을 수 있도록 해주는 가로 슬라이더 컨트롤입니다.
또한 스크러버 '노브'는 비디오가 재생되는 동안 비디오의 현재 시간 위치를 나타내기 위해 재생될 때 이동합니다. 비디오 스크러버는 항상 컨트롤 막대의 전체 너비를 사용합니다. 비디오 스크러버를 스킨하고 CSS로 높이 및 세로 위치를 변경할 수 있습니다.
비디오 스크러버의 일반 모양은 다음 CSS 클래스 선택기를 사용하여 제어됩니다.
.s7videoviewer .s7videoscrubber
.s7videoviewer .s7videoscrubber .s7videotime
.s7videoviewer .s7videoscrubber .s7knob
비디오 스크러버의 CSS 속성
최상위 |
패딩을 포함하여 위쪽 테두리에서 위치를 지정합니다. |
하단 |
패딩을 포함하여 아래쪽 테두리에서 위치를 지정합니다. |
height |
비디오 스크러버의 높이입니다. |
배경색 |
비디오 스크러버의 색입니다. |
다음 CSS 클래스 선택기는 배경, 재생 및 로드 표시기를 추적합니다.
.s7videoviewer .s7videoscrubber .s7track
.s7videoviewer .s7videoscrubber .s7trackloaded
.s7videoviewer .s7videoscrubber .s7trackplayed
트랙의 CSS 속성
높이 |
해당 트랙의 높이입니다. |
배경색 |
해당 트랙의 색입니다. |
다음 CSS 클래스 선택기는 노브를 제어합니다.
.s7videoviewer .s7videoscrubber .s7knob
노브의 CSS 속성
최상위 |
수직 노브 오프셋. |
width |
손잡이의 폭입니다. |
높이 |
손잡이의 높이입니다. |
배경 이미지 |
아트웍을 노브. |
배경 위치 |
CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 위치를 지정합니다. 자세한 내용은 CSS Sprite . |
다음 CSS 클래스 선택기는 재생되는 시간을 제어합니다.
.s7videoviewer .s7videoscrubber .s7videotime
재생되는 시간의 CSS 속성
font-family |
시간 표시 텍스트에 사용할 글꼴 모음입니다. |
font-size |
시간 표시 텍스트에 사용할 글꼴 크기입니다. |
color |
시간 표시 텍스트에 사용할 글꼴 색입니다. |
너비 |
버블 영역 너비입니다. |
높이 |
버블 영역 높이입니다. |
패딩 |
버블 영역 패딩. |
배경 이미지 |
아트웍의 버블. |
배경 위치 |
CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 위치를 지정합니다. 자세한 내용은 CSS Sprite . |
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;
}
를 사용하여 비디오 chapter가 활성화된 경우 navigation
매개 변수에서 장 위치가 비디오 스크러버 트랙 위에 마커로 표시됩니다.
비디오 장 마커는 다음 CSS 클래스 선택기에 의해 제어됩니다.
.s7videoviewer .s7videoscrubber .s7navigation
비디오 장 마커의 CSS 속성
너비 |
비디오 장 마커 너비. |
높이 |
비디오 장 마커 높이. |
배경 이미지 |
비디오 장 마커 아트웍입니다. |
배경 위치 |
CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 위치를 지정합니다. 자세한 내용은 CSS Sprite . |
이 버튼은 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 속성
최대 너비 |
비디오 장 버블의 최대 폭입니다. |
하단 |
비디오 스크러버 트랙에서 수직 오프셋입니다. |
예 - 비디오 스크러버 트랙 아래쪽에서 235픽셀이고 8픽셀인 비디오 장 버블을 설정하려면
.s7videoviewer .s7videoscrubber .s7chapter {
max-width:235px;
bottom:8px;
}
비디오 장 버블은 선택적 헤더와 콘텐츠로 구성됩니다. 헤더에는 선택적 장 시작 시간 및 장 제목이 있습니다.
헤더는 다음 CSS 클래스 선택기에 의해 제어됩니다.
.s7videoviewer .s7videoscrubber .s7chapter .s7header
비디오 장 버블 헤더의 CSS 속성
높이 |
비디오 장 버블 헤더 높이입니다. |
패딩 |
비디오 장 버블 헤더 텍스트의 내부 패딩. |
배경색 |
비디오 장 버블 헤더 배경색입니다. |
라인 높이 |
비디오 장 버블 헤더 텍스트 줄 높이. |
예 - 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 속성
색상 |
텍스트 색상. |
font-weight |
글꼴 가중치입니다. |
font-size |
글꼴 크기입니다. |
font-family |
글꼴 패밀리. |
오른쪽 패딩 |
시작 시간과 장 제목 사이의 패딩. |
예 - 회색 10픽셀의 버다나 글꼴을 사용하여 장 시작 시간을 설정하고 오른쪽에는 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 속성
색상 |
비디오 장 제목 텍스트 색입니다. |
font-weight |
비디오 장 제목 글꼴 가중치입니다. |
font-size |
비디오 장 제목 글꼴 크기입니다. |
font-family |
비디오 장 제목 글꼴 패밀리입니다. |
예 - 흰색, 굵게, 10픽셀 버다나 글꼴을 사용하는 비디오 장 제목을 설정하려면
.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 속성
색상 |
비디오 장 설명 텍스트 색입니다. |
배경색 |
비디오 장 설명 배경색입니다. |
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 속성
테두리 색상 |
웨지 커넥터 색상. 로 정의됨 <color> 투명 따라서 위쪽 테두리 색상만 정의되고 나머지 테두리는 투명하게 유지됩니다. |
테두리 폭 |
웨지 커넥터 너비. 로 정의됨 <width> <width> 0 따라서 위쪽 및 가로 테두리에만 동일한 너비가 정의되고 아래쪽 테두리 너비는 0 . |
margin |
음수 아래쪽 여백만 정의합니다. 값은 와 같아야 합니다 테두리 폭 . |
예 - 회색의 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;
}