비디오 스크러버

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

비디오가 재생될 때 스크러버 '손잡이'도 움직여서 재생 중 비디오의 현재 시간 위치를 가리킨다. 비디오 스크러버는 항상 컨트롤 막대의 전체 너비를 사용합니다. 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 속성

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

Business.Adobe.com 리소스

Ecommerce Integrations Customer Communications Asset Collections Personalized Communications Responsive Forms Dynamic Forms