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 / | 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모드로 영상 재생이 됩니다.
드래그를 통해 영상 위치 이동이 가능하며 페이지 전환에도 시청이 가능합니다.
