비디오 플레이어 위젯(테마 적용 가능)
비디오 플레이어 위젯(테마 적용 가능)을 사용하면 매쉬업에 비디오를 포함하고 재생할 수 있습니다. 비디오 플레이어는 자동 재생, 축소판 이미지 추가, 컨트롤 모양새 제어 등을 포함한 여러 옵션을 지원합니다. 일관된 사용자 경험을 위해 테마를 지원하는 반응형 위젯입니다.
 |
비디오 플레이어는 위젯과 웹 구성 요소로 제공되며, ThingWorx Web Component SDK에서 가져와 사용자 정의할 수 있습니다.
|
구조
1. 비디오 플레이어 레이블
2. 비디오 영역
3. 축소판 이미지 미리 보기
4. 플레이어 컨트롤
바로 가기 키
다음 표에는 이 위젯과 상호 작용하는 데 사용할 수 있는 바로 가기 키가 구성 요소별로 그룹화되어 나열되어 있습니다.
|
구성 요소
|
버튼/컨트롤
|
키
|
설명
|
|---|---|---|---|
|
탐색
|
위젯의 여러 구성 요소 간 탐색을 제어합니다.
|
TAB 및 SHIFT+TAB
|
플레이어의 하위 구성 요소 사이를 앞으로 또는 뒤로 이동합니다.
|
|
플레이어
|
재생/중지 컨트롤
|
스페이스바 또는 ENTER 키
|
비디오를 재생하거나 중지합니다.
|
|
타임라인 막대
|
위쪽 화살표 또는 오른쪽 화살표
|
10초 빨리 감습니다.
|
|
|
아래쪽 화살표 또는 왼쪽 화살표
|
10초 되감습니다.
|
||
|
PAGE UP
|
1분 빨리 감습니다.
|
||
|
PAGE DOWN
|
1분 되감습니다.
|
||
|
HOME
|
비디오의 시작 부분으로 이동합니다.
|
||
|
END
|
비디오의 끝 부분으로 이동합니다.
|
||
|
오디오
|
음소거 버튼
|
스페이스바 또는 ENTER 키
|
비디오를 음소거 또는 음소거 해제합니다.
|
|
볼륨 슬라이더
|
위쪽 화살표 또는 오른쪽 화살표
|
볼륨을 5% 높입니다.
|
|
|
아래쪽 화살표 또는 왼쪽 화살표
|
볼륨을 5% 줄입니다.
|
||
|
HOME
|
볼륨을 0%로 설정합니다.
|
||
|
END
|
볼륨을 100%로 설정합니다.
|
||
|
다운로드
|
다운로드 버튼
|
스페이스바 또는 ENTER 키
|
비디오 파일을 다운로드합니다.
|
|
전체 화면
|
전체 화면 버튼
|
스페이스바 또는 ENTER 키
|
전체 화면을 시작합니다.
|
|
ESCAPE
|
전체 화면을 종료하고 창 모드로 돌아갑니다.
|
플레이어 컨트롤의 레이아웃 구성
OverlayControls 속성을 사용하면 비디오 플레이어 컨트롤의 위치를 구성할 수 있습니다. 이 속성을 true로 설정하면 컨트롤이 비디오 콘텐츠 위에 나타납니다. false로 설정하면 컨트롤이 비디오 아래에 나타납니다. 컨트롤이 오버레이되면 위젯에 사용되는 세로 공간의 양이 줄어듭니다.
축소판 이미지 추가
Thumbnail 속성을 사용하면 비디오가 시작되기 전에 미리 보기 이미지를 표시할 수 있습니다. 사용자가 재생 버튼을 선택할 때까지 이미지가 비디오 대신 나타납니다. 이 기능은 콘텐츠의 컨텍스트, 브랜딩 또는 미리 보기를 제공하는 데 유용합니다. 재생이 시작되면 축소판 이미지가 비디오로 바뀝니다.
재생 설정 구성
매쉬업이 로드될 때 비디오 재생을 자동으로 시작하도록 AutoPlay 속성을 활성화할 수 있습니다. AutoPlay가 활성화되면 비디오는 기본적으로 음소거됩니다. 오디오를 활성화하려면 사용자가 비디오 재생을 시작한 후 수동으로 음소거 해제해야 합니다. 오디오를 구성하려면 위젯 Mute 속성을 활성화 또는 비활성화하거나 바인딩을 만들어 오디오를 동적으로 제어할 수 있습니다.
다운로드 버튼 추가
EnableDownload 속성을 사용하면 플레이어에 다운로드 버튼을 표시할 수 있습니다. 활성화되면 이 버튼으로 사용자는 URL을 기반으로 비디오를 다운로드할 수 있습니다. 이 기능을 사용하여 오프라인 보기를 지원하거나 비디오 콘텐츠를 공유합니다.
|
|
CSP 규칙과 같은 보안 설정으로 인해 다운로드가 차단된 경우 메시지가 표시됩니다.
|
CSP 규칙 구성
ThingWorx 환경에서 CSP(콘텐츠 보안 정책) 규칙이 활성화된 경우 비디오 플레이어 위젯이 올바르게 작동하도록 하려면 비디오를 로드하는 외부 도메인을 포함하도록 media-src 지시문을 업데이트해야 합니다. 예를 들면, 다음과 같습니다.
media-src 'self' https://cdn.com https://video-location.com;
CSP 규칙 구성에 대한 자세한 내용은 콘텐츠 보안 정책을 참조하십시오.
위젯 속성
다음 표에는 위젯 속성이 나열되어 있습니다.
|
속성 이름
|
설명
|
기본 유형
|
기본값
|
바인딩 가능 여부 (Y/N)
|
로컬리제이션 가능 여부 (Y/N)
|
|---|---|---|---|---|---|
|
Label
|
위젯 레이블의 텍스트를 지정합니다.
|
STRING
|
Y
|
Y
|
|
|
LabelAlignment
|
레이블 텍스트를 위젯의 왼쪽, 오른쪽 또는 가운데에 정렬합니다.
|
STRING
|
left
|
N
|
N
|
|
VideoURL
|
재생할 비디오의 URL을 지정합니다.
|
NUMBER
|
없음
|
Y
|
N
|
|
EnableDownload
|
사용자가 비디오를 다운로드할 수 있는 다운로드 버튼을 플레이어 컨트롤에 추가합니다.
|
BOOLEAN
|
False
|
Y
|
N
|
|
Thumbnail
|
비디오의 축소판 이미지를 지정합니다.
|
NUMBER
|
없음
|
Y
|
N
|
|
AutoPlay
|
위젯이 로드될 때 비디오를 자동으로 재생할지 여부를 지정합니다. AutoPlay가 활성화된 경우 비디오가 음소거된 상태로 재생됩니다.
|
BOOLEAN
|
False
|
N
|
N
|
|
Mute
|
비디오를 음소거합니다.
|
BOOLEAN
|
False
|
Y
|
N
|
|
OverlayControls
|
플레이어 컨트롤을 비디오에 오버레이하여 플레이어가 레이아웃에서 차지하는 공간을 줄입니다. 컨트롤은 비디오를 마우스 커서로 가리킬 때만 표시됩니다. 비활성화할 경우 플레이어 컨트롤이 항상 표시됩니다.
|
BOOLEAN
|
False
|
Y
|
N
|
|
Width
|
비디오 플레이어의 너비를 지정합니다.
|
NUMBER
|
480
|
Y
|
N
|
|
Height
|
비디오 플레이어의 높이를 지정합니다.
|
NUMBER
|
314
|
Y
|
N
|
|
CustomClass
|
위젯의 최상위 div에 적용할 사용자 정의 CSS 클래스입니다. 여러 클래스를 공백으로 구분하여 입력할 수 있습니다.
|
NUMBER
|
없음
|
Y
|
N
|
|
TabSequence
|
위젯의 탭 순서를 지정합니다.
|
NUMBER
|
0
|
N
|
N
|
유효성 검사 속성
다음 표에는 위젯 유효성 검사 속성이 나열되어 있습니다.
|
속성 이름
|
설명
|
기본 유형
|
기본값
|
바인딩 가능 여부 (Y/N)
|
로컬리제이션 가능 여부 (Y/N)
|
|---|---|---|---|---|---|
|
PlaybackErrorMessage
|
CSP 규칙으로 인해 비디오 파일이 차단될 때 표시할 메시지입니다.
|
STRING
|
토큰: [[Widgets.VideoPlayer.Validation.PlaybackErrorMessage]]
값: 재생 오류
|
Y
|
Y
|
|
PlaybackErrorMessageDetails
|
CSP 규칙으로 인해 비디오 파일이 차단될 때 메시지 아래에 표시할 세부 정보입니다.
|
STRING
|
[[Widgets.VideoPlayer.Validation.PlaybackErrorMessageDetails]]
비디오 형식이 지원되고 네트워크 연결이 작동하는지 확인한 다음 다시 시도하십시오.
|
Y
|
Y
|
|
NetworkErrorMessage
|
네트워크 오류로 인해 비디오가 로드되지 않을 때 표시할 메시지입니다.
|
STRING
|
[[Widgets.VideoPlayer.Validation.NetworkErrorMessage]]
네트워크 문제
|
Y
|
Y
|
|
NetworkErrorMessageDetails
|
네트워크 오류로 인해 비디오가 로드되지 않을 때 메시지 아래에 표시할 세부 정보입니다.
|
STRING
|
[[Widgets.VideoPlayer.Validation.NetworkErrorMessageDetails]]
네트워크 연결을 확인하고 다시 시도하십시오.
|
Y
|
Y
|
|
DownloadBlockedMessage
|
액세스 권한 문제로 인해 비디오를 다운로드할 수 없을 때 표시할 메시지입니다.
|
STRING
|
[[Widgets.VideoPlayer.Validation.DownloadBlockedMessage]]
다운로드 차단됨
|
Y
|
Y
|
|
DownloadBlockedMessageDetails
|
액세스 권한 문제로 인해 비디오를 다운로드할 수 없을 때 메시지 아래에 표시할 세부 정보입니다.
|
STRING
|
[[Widgets.VideoPlayer.Validation.DownloadBlockedMessageDetails]]
다운로드가 플랫폼에 의해 차단되었습니다. 플랫폼 CSP 규칙이 올바르게 구성되었는지 확인하고 다시 시도하십시오.
|
Y
|
Y
|
|
PlaybackBlockedMessage
|
CSP 규칙으로 인해 비디오 파일이 차단될 때 표시할 메시지입니다.
|
STRING
|
[[Widgets.VideoPlayer.Validation.PlaybackBlockedMessage]]
이 콘텐츠는 차단되었습니다.
|
Y
|
Y
|
|
PlaybackBlockedMessageDetails
|
CSP 규칙으로 인해 비디오 파일이 차단될 때 메시지 아래에 표시할 세부 정보입니다.
|
STRING
|
[[Widgets.VideoPlayer.Validation.PlaybackBlockedMessageDetails]]
사이트 소유자에게 문의하여 이 문제를 해결하십시오.
|
Y
|
Y
|
|
ValidationFailureIcon
|
유효성 검사가 실패했을 때 표시할 아이콘을 지정합니다.
|
STRING
|
cds:icon_error
|
N
|
N
|