비디오 플레이어 video-player

비디오 플레이어는 비디오 컨텐츠가 뷰어 내에 표시되는 사각형 영역입니다.

재생 중인 비디오의 치수가 비디오 플레이어의 치수와 일치하지 않으면 비디오 컨텐츠가 비디오 플레이어의 사각형 표시 영역 내에서 가운데에 표시됩니다.

다음 CSS 클래스 선택기는 비디오 플레이어의 모양을 제어합니다.

.s7mixedmediaviewer .s7videoplayer

비디오 플레이어의 CSS 속성

background-color
비디오 플레이어의 배경색입니다.

시스템에서 비디오를 재생할 수 없는 경우 표시되는 오류 메시지는 현지화할 수 있습니다. 다음을 참조하십시오 사용자 인터페이스 요소의 현지화 추가 정보.

예 - 비디오 플레이어를 투명하게 하려면 다음을 수행하십시오.

.s7mixedmediaviewer .s7videoplayer {
 background-color: transparent;
}

캡션은 비디오 플레이어 내부의 내부 컨테이너에 저장됩니다. 해당 컨테이너의 위치는 지원되는 WebVTT 위치 지정 연산자에 의해 제어됩니다. 캡션 텍스트 자체는 해당 컨테이너 내에 있으며, 해당 스타일은 다음 CSS 클래스 선택기로 제어됩니다.

.s7mixedmediaviewer .s7videoplayer .s7caption

캡션의 CSS 속성

CSS 속성
설명
background-color
캡션 텍스트 배경입니다.
color
캡션 텍스트 색입니다.
font-weight
글꼴 두께.
font-size
글꼴 크기입니다.
font-family
글꼴 모음.

예 - 반투명 검은색 배경에서 캡션 텍스트를 14픽셀 밝은 회색 Arial®로 설정하려면 다음을 수행하십시오.

.s7mixedmediaviewer .s7videoplayer .s7caption {
 background-color: rgba(0,0,0,0.75);
 color: #e6e6e6;
 font-weight: normal;
 font-size: 14px;
 font-family: Arial,Helvetica,sans-serif;
}

다음 CSS 클래스 선택기를 사용하여 버퍼링 애니메이션의 모양이 제어됩니다.

.s7mixedmediaviewer .s7videoplayer .s7waiticon

대기 아이콘의 CSS 속성

CSS 속성
설명
width
애니메이션 아이콘 너비.
height
애니메이션 아이콘 높이.
왼쪽 여백
애니메이션 아이콘의 왼쪽 여백은 일반적으로 아이콘 폭의 절반을 뺀 것입니다.
여백-상단
애니메이션 아이콘 위쪽 여백으로, 일반적으로 아이콘 높이의 절반을 뺍니다.
background-image
손잡이 아트워크.

예 - 버퍼링 애니메이션을 폭 101픽셀, 높이 29픽셀로 설정하려면 다음을 수행합니다.

.s7mixedmediaviewer .s7videoplayer .s7waiticon {
 width: 101px;
 height: 29px;
 margin-left: -50px;
 margin-top: -15px;
 background-image: url(images/sdk/busyicon.gif);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8