페이지 내 환경 클라이언트 API 샘플

서문

페이지 내 경험 클라이언트 API는 브라이트코브 플레이어 API와 유사한 JavaScript 라이브러리를 제공합니다. API는 페이지에서 페이지 내 경험을 상호 작용하고 제어할 수 있도록 단순화합니다.

이 기본 샘플에서는 다음 작업을 수행하는 방법을 보여 줍니다.

1. 경험에 대한 참조를 가져온 다음 메서드가 있는 ClientAPI 객체에 대한 참조를 가져옵니다.
2. API 메서드를 호출하여 다양한 이벤트에 대한 리스너를 설정하고 플레이어에 현재 로드된 비디오에 대한 정보를 가져옵니다.
3. 경험 UI에 추가하는 HTML 요소에 정보를 삽입합니다.

페이지 내 경험 예

샘플을 만드는 단계

1. 재생 목록을 사용하여 페이지 내 경험을 만듭니다 (재생 목록 표시 방법은 중요하지 않습니다).
2. 경험을 게시합니다.
3. 환경 임베드 코드를 복사하여 HTML 페이지에 붙여 넣습니다.
4. 추가id속성<div>태그, 값 : customized_in_page_experience .
5. Studio로 돌아가서 다음 코드를 사용하여 사용자 지정 HTML 구성 요소를 환경에 추가합니다.

   <div style="padding: .5em;border: 1px #64AAB2 solid; border-radius:.5em;">
     <p>Current Video: <span id="current_video" style="color:RGB(155, 37, 86);font-weight:bold;"></span></p>
     <p>Video Paused: <span id="video_paused" style="color:RGB(155, 37, 86);font-weight:bold;"></span></p>
     </div>
     <script>
       var BCLS = ( function (window, document) {
         var experience,
         experienceApi,
         video,
         current_video = document.getElementById('current_video'),
         video_paused = document.getElementById('video_paused');
   
         
         // code may execute before the experience has fully loaded
         // to ensure you get a reference to the experience,
         // try it, and if it fails keep waiting a second and try again
         function getExperience () {
           var t;
           experience = window.top.bcov.gal.getEmbed('YOUR_ExperienceID_Here');
           if (experience) {
             experienceApi = experience.clientApi;
             // get initial video
             experienceApi.once('videoLoaded', function() {
               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';
             });
   
           } else {
             t = window.setTimeout(getExperience, 1000);
           }
         }
   
         getExperience();
     
     
     
       })(window, document);
     </script>

6. 재생 전, 재생 및 재생 후 표시되도록 구성 요소를 설정합니다.
7. 변경 내용을 저장하고 환경을 다시 게시합니다.
8. 페이지를 탐색하면 “현재 비디오” 및 “플레이어 일시 중지됨” 메시지가 표시된 상자가 표시됩니다. 게시는 비동기식이므로 잠시 기다렸다가 브라우저 캐시를 지우고 페이지를 새로 고쳐 변경 내용을 볼 수 있습니다.