플레이어 API와 임베드

할 수 있는 일

• 반응형, 고정 크기, 팝오버 라이트박스, 또는 <pellio-player> 웹 컴포넌트로 임베드해요.
• play(), pause(), seek(seconds), mute(), volume(), rate(), identify(email)을 호출해요.
• play, progress, complete, lead, chapter, interaction 같은 이벤트를 수신해요.
• 플레이어 URL에서 autoplay, start, captions, background, resume, seeklock, dnt 같은 옵션을 설정해요.

설정 방법

1. Pellio에서 동영상을 열고 Embed & share 탭으로 이동하세요.
2. Web component를 선택하거나, iframe을 쓰려면 Responsive를 선택하고 재생 옵션을 설정하세요.
3. 코드를 페이지에 복사하세요. 웹 컴포넌트는 <script src="https://play.pellio.io/assets/embed.js" async></script>와 <pellio-player video="VIDEO_ID"></pellio-player> 형태예요.
4. 요소에서 이벤트를 수신하세요. 예: player.addEventListener('pellio:progress', …)
5. iframe에서는 postMessage({ pellio: true, method: 'play' }, '*')로 명령을 보내고, 플레이어에서 오는 message 이벤트를 수신하세요.

알아 두면 좋은 점

• 웹 컴포넌트는 스크롤해서 화면에 보일 때 로드돼요. 바로 로드하려면 eager를 추가하세요.
• 웹 컴포넌트는 동영상 이벤트를 Google Analytics와 Tag Manager로도 자동 전송해요.
• progress 이벤트는 고유 시청 초가 아니라 재생 위치 기준이에요.
• identify나 email= 옵션을 사용하면 분석에 시청자 이름이 표시되고 이메일 양식을 건너뛰어요.
• 먼저 동영상이 내 도메인에서 재생될 수 있는지 확인하세요. Only play on my allowed domains를 참고하세요.

전체 가이드: 플레이어 API, 임베드와 플레이어 옵션