PIP(Picture In Picture)모드 사용 가이드



본 가이드는 VOD사용자들께서 다른 페이지 전환 시에도 콜러스 VOD를 동시에 볼 수 있는 PIP 관련 가이드 입니다. 

  • v4, v3 html5 플레이어에서만 작동됩니다. 

사용방법

https://v.kr.kollus.com/[MEDIA_CONTENT_KEY]?enable_pip=true https://v.kr.kollus.com/s?jwt=[생성한 JWT]&custom_key=[사용자 키]&enable_pip=true

PIP모드는 query string을 통해 적용 할 수 있습니다. 영상 호출 주소 뒤에 enable_pip=true을 추가하면 PIP모드가 활성화 됩니다. 또는 query string없이 전체 콘텐츠에 pip기능 추가를 원하시면 담당 AM에게 요청 하시면 됩니다. 

<body> <iframe width="560" height="315" src="https://v.kr.kollus.com/s?jwt=[생성한 JWT]&custom_key=[사용자 키]&enable_pip=true" frameborder="0" allow="accelerometer; autoplay; encrypted-media; fullscreen; picture-in-picture;" allowfullscreen></iframe> </body>

또한 iframe allow 속성에 picture-in-picture를 추가합니다. 

유의 사항

PIP모드는 브라우저와 OS에 따라 지원 범위가 다르니 확인해 주시길 바랍니다. 

브라우저 지원 범위

OS

Desktop

iOS

Android

Browser

IE

Edge

Firefox

Chrome

Safari

Opera

Safari /
Chrome

Android
Browser

Chrome
for Android

Firefox
for Android

Samsung
Internet

Version

-

79+

-

69+

13.1+

56+

13.4+

-

-

-

-

기능 지원 범위 

OS

Desktop

iOS 13.4+

OS

Desktop

iOS 13.4+

Browser

Edge

Chrome

Safari

Opera

Safari /
Chrome

자막

in Browser

in Browser

in Browser

in Browser

in PIP window

재생/일시정지 단축키
(space)

O

O

O

O

-

뒤로 감기(<)

X

X

O

X

-

앞으로 감기(>)

X

X

O

X

-

기능 설명 

  • 영상 호출 주소에 PIP쿼리문(enable_pip=true)을 추가하시면 PIP기능을 이용할 수 있는 플레이어가 뜹니다. 플레이어 왼쪽 하단에 PIP모드 활성화 버튼을 누르면 PIP모드로 전환됩니다.



         

  • 아래와 같이 플레이어 영역을 벗어나 PIP모드로 영상 재생이 됩니다. 

          

  • 드래그를 통해 영상 위치 이동이 가능하며 페이지 전환에도 시청이 가능합니다.

 

           



Copyright © CATENOID, lnc. All Rights Reserved.
E-mail. support@catenoid.net | Tel. 1544-4367