PIP(Picture In Picture)모드 사용 가이드
- 현종 조 (Unlicensed)
- jisung yeom(염지성)
- Wonseok Jung(정원석)
- 김정현 (Unlicensed)
본 가이드는 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=truePIP모드는 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 | Edge | Firefox | Chrome | Safari | Opera | Safari / | Android | Chrome | Firefox | Samsung |
|---|---|---|---|---|---|---|---|---|---|---|
Version | 79+ | - | 69+ | 13.1+ | 56+ | 13.4+ | - | - | - | - |
현재 안드로이드 OS는 지원하지 않습니다.
참조: https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API
기능 지원 범위
OS | Desktop | iOS 13.4+ | |||
|---|---|---|---|---|---|
Browser | Edge | Chrome | Safari | Opera | Safari / |
자막 | in Browser | in Browser | in Browser | in Browser | in PIP window |
재생/일시정지 단축키 | O | O | O | O | - |
뒤로 감기(<) | X | X | O | X | - |
앞으로 감기(>) | X | X | O | X | - |
기능 설명
영상 호출 주소에 PIP쿼리문(enable_pip=true)을 추가하시면 PIP기능을 이용할 수 있는 플레이어가 뜹니다. 플레이어 왼쪽 하단에 PIP모드 활성화 버튼을 누르면 PIP모드로 전환됩니다.
아래와 같이 플레이어 영역을 벗어나 PIP모드로 영상 재생이 됩니다.
드래그를 통해 영상 위치 이동이 가능하며 페이지 전환에도 시청이 가능합니다.
Related content
Copyright © CATENOID, lnc. All Rights Reserved.
E-mail. support@catenoid.net | Tel. 1544-4367