개요: 페이지 내 경험 클라이언트 API

서문

페이지 내 경험 클라이언트 API는 플레이어의 동작을 제어하는 데 브라이트코브 플레이어 API가 사용되는 방식과 유사하게 런타임 시 페이지 내 경험의 동작을 관리하는 데 도움이 되는 JavaScript 라이브러리입니다. 이 API는 하나 이상의 브라이트코브 임베디드 환경을 실행하는 모든 페이지에서 사용할 수 있습니다. 타사 브라이트코브 경험 통합을 지원하도록 설계되었습니다. 재생 관련 이벤트의 리스너뿐만 아니라 현재 플레이어, 비디오 및 상태 정보에 액세스할 수 있습니다.

사용 가능한 메서드 및 이벤트에 대한 자세한 내용은 전체API 참조를참조하십시오.

시작하기

<div data-experience="5bb2134180b4990011750f06"></div>
<script src="https://players.brightcove.net/1752604059001/experience_5bb2134180b4990011750f06/live.js"></script>

경험에 대한 참조를 얻는 가장 쉬운 방법은id ( div태그에) 을 제공하는 것입니다. 는 페이지 내에서 고유하지만 경험 ID 자체가 스크립트의 URL에 있기 때문에 (위의 코드의 강조 표시된 부분 참조) 다음을 사용할 수도 있습니다. id

<div data-experience="5bb2134180b4990011750f06" id="experience_5bb2134180b4990011750f06"></div>
<script src="https://players.brightcove.net/1752604059001/experience_5bb2134180b4990011750f06/live.js"></script>

이제 JavaScript에서의 경험에 대한 참조를 얻을 준비가 되었습니다. 경험은 에서iframe구현되므로 상위 페이지의 스크립트에서 쉽게 통신할 수 없습니다. 대신 경험 자체의사용자 정의 HTML 블록에스크립트를 배치해야합니다.

var experience = window.top.bcov.gal.getEmbed('experience_5bb2134180b4990011750f06');

경험에 대한 참조가 있으면 API에서 메서드를 호출 할 수 있습니다. 모든 메소드는 자식clientApi객체에 있습니다.

var experience = window.top.bcov.gal.getEmbed('experience_5bb2134180b4990011750f06'),
experienceApi,
video,
current_video = document.getElementById('current_video'),
video_paused = document.getElementById('video_paused');

experienceApi = experience.clientApi;

// get initial video
video = experienceApi.getCurrentVideo();
current_video.textContent = video.name;

// event listeners
experienceApi.on('videoChanged', function() {
  video = experienceApi.getCurrentVideo();
  current_video.textContent = video.name;
});

experienceApi.on('videoStarted', function() {
  video_paused.textContent = 'false';
});

experienceApi.on('videoPaused', function() {
  video_paused.textContent = 'true';
});