비디오 스크러버 video-scrubber
비디오 스크러버는 사용자가 현재 재생 중인 비디오 내의 모든 시간 위치를 동적으로 찾을 수 있는 가로 슬라이더 컨트롤입니다.
비디오가 재생될 때 스크러버 '손잡이'도 움직여서 재생 중 비디오의 현재 시간 위치를 가리킨다. 비디오 스크러버는 항상 컨트롤 막대의 전체 너비를 사용합니다. CSS를 사용하여 비디오 스크러버의 스킨을 만들고 높이 및 세로 위치를 변경할 수 있습니다.
비디오 스크러버의 일반적인 모양은 다음 CSS 클래스 선택기로 제어됩니다.
.s7videoviewer .s7videoscrubber
.s7videoviewer .s7videoscrubber .s7videotime
.s7videoviewer .s7videoscrubber .s7knob
비디오 스크러버의 CSS 속성
다음 CSS 클래스 선택기는 배경, 재생 및 로드 지표를 추적합니다.
.s7videoviewer .s7videoscrubber .s7track
.s7videoviewer .s7videoscrubber .s7trackloaded
.s7videoviewer .s7videoscrubber .s7trackplayed
트랙의 CSS 속성
다음 CSS 클래스 선택기는 손잡이를 제어합니다.
.s7videoviewer .s7videoscrubber .s7knob
노브의 CSS 속성
다음 CSS 클래스 선택기는 재생된 시간 버블을 제어합니다.
.s7videoviewer .s7videoscrubber .s7videotime
재생된 시간의 CSS 속성
비디오 스크러버 도구 팁을 현지화할 수 있습니다. 자세한 내용은 사용자 인터페이스 요소의 지역화를 참조하십시오.
예 - 사용자 지정 트랙 색상으로 비디오 스크러버를 사용하여 비디오 뷰어를 설정합니다. 스크러버는 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 속성
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 속성
예 - 높이 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 속성
예 - 회색 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 속성
예 - 흰색, 굵게, 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 속성
예 - 밝은 회색 배경의 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 속성
예 - 회색 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;
}