본 가이드는 VOD사용자들께서 다른 페이지 전환 시에도 콜러스 VOD를 동시에 볼 수 있는 PIP 관련 가이드 입니다.
v4, v3 html5 플레이어에서만 작동됩니다.
사용방법
Code Block |
---|
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에게 요청 하시면 됩니다.
Code Block |
---|
<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에 따라 지원 범위가 다르니 확인해 주시길 바랍니다.
브라우저 지원 범위
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모드로 영상 재생이 됩니다.
드래그를 통해 영상 위치 이동이 가능하며 페이지 전환에도 시청이 가능합니다.