Page History

소개

• W Player API를 이용해 W Player의 특화 기능을 자유롭게 사용할 수 있습니다. W Player API는 웹 패키지(HTML, CSS, JS) 형태의 웹 콘텐츠 요소 안에서 사용하며 웹 표준 스크립트 방식을 지원합니다.
• W Player API를 통해 W Player의 다양한 응용 웹 콘텐츠 요소를 생성할 수 있습니다.

개요

1. 응용 웹 콘텐츠 요소 기본 구조

   Stylesheet
   class screen
   Image Removed

   • ContentApi: LFD 콘텐츠 내 페이지(page)와 페이지의 이미지, 텍스트 및 비디오 요소 속성을 변경하거나 가져올 수 있습니다.
   • LocalApi: 응용 웹 콘텐츠 요소가 실행되는 로컬(Local)환경의 정보를 가져올 수 있습니다.
   • DeviceApi: W Player, Tizen 등 기기(Device) 관련 정보를 가져올 수 있습니다.
   • UtilityApi: 응용 웹 콘텐츠 요소 개발용 유틸리티들을 사용할 수 있습니다.
   • Event CallBack: 응용 웹 콘텐츠 요소의 수명 주기 이벤트, 데이터링크(datalink) 및 외부 소스로부터 전달되는 데이터를 수신하는 콜백(Callback) 함수를 제공합니다.

2. 응용 웹 콘텐츠 요소 수명 주기

   응용 웹 콘텐츠 요소는 다음 수명 주기를 가지며 각 상태 진입 시점을 callback으로 전달받을 수 있습니다. Ready와 Play 상태를 활용하면 원활하게 재생할 수 있습니다.

   Stylesheet
   class screen
   Image Removed

   • Ready: 페이지(Page) 내의 모든 요소를 모두 로드(Load)하면 응용 웹 콘텐츠 요소가 W Player API를 사용할 수 있는 시점을 전달합니다. 응용 웹 콘텐츠 요소는 iframe 형태로 로드(Load)하며 화면에 표시하기 전 상태(Back Page Layer, 현재 화면에는 이전 콘텐츠를 재생하고 있는 상태)입니다. 화면에 나타나기 전에 필요한 초기화를 진행할 수 있습니다.

   • Play: 응용 웹 콘텐츠 요소가 화면에 표시되는 시점(Front Page layer)을 전달합니다.

     • Page Changed: 재생 중 페이지가 전환되는 시점을 전달합니다. (단, 웹 콘텐츠가 공통 페이지에 속해 있을 경우에만 동작합니다.)
   • Stop: 응용 웹 콘텐츠 요소가 종료되기 전 시점을 전달합니다. 응용 웹 콘텐츠 요소 내에 사용된 리소스를 반환할 수 있습니다. (예: clearInterval, clearTimeout, $wp = null)

   Warning
   title 주의
   정상적으로 반환되지 않은 리소스에서 메모리 누수가 발생하면, W Player 재생이 영향을 받을 수 있습니다. Web Author에서 저작 시 ‘Sync Timeline’ 옵션 설정을 통해 화면 표시 시점(Play 상태)에 load와 play를 순차적으로 실행할 수 있고 화면 표시 이후에는 Ready, Play 및 Stop 상태가 전달됩니다.(다만, 로드 수행 시 깜박임이 발생할 수 있습니다.)

Tutorials

...

시작하기

• Step 1 = Set Up

  • 라이브러리 다운로드

    • W Player API lib를 다운로드하세요.

  • Web Author에서 웹 콘텐츠 속성 설정하기

    • W Player API 사용을 위해 필요한 웹 콘텐츠 요소에 대한 설정을 수행하세요.

• Step 2 = Code 작성

  • 제공되는 W Player API로 다양한 응용 웹 콘텐츠 요소 구현용 code를 작성하세요.

• Step 3 = 업로드 및 미리 보기(Preview) (UDP 시뮬레이션 포함)

• Step 4 = 스케줄 배포(로그 수집)

W Player API Reference

...

$wp

$wp는 W Player API의 모든 인터페이스 (content, device, local, utility, callback)를 포함하는 네임스페이스(Namespace)입니다.

setDefaultCallback()

...

설명: W Player로부터 이벤트(Event)를 전달받는 리스너(Listener)를 추가할 수 있습니다. Life cycle에 대한 상태 이벤트를 수신하기 위해서는 초기 생성 단계에 추가가 필요합니다.

...

구문: function setDefaultCallback (myFunction(object));

파라미터: myFunction(object): 이벤트(Event)는 콜백(Callback)을 통해 다음과 같은 객체(Object) 형태로 전달합니다.

{ 
          type: 'state',
          sub: 'ready',
          data: {
                    /* user_data object */
          },
          name: 'name of Web Content element',
          pageId: 'id'
}

페이지(Page) 내의 모든 요소를 모두 로드(Load)하면 응용 웹 콘텐츠 요소가 W Player API를 사용할 수 있는 시점을 전달합니다. 응용 웹 콘텐츠 요소는 iframe 형태로 로드(Load)하며 화면에 표시하기 전 상태(Back Page Layer, 현재 화면에는 이전 콘텐츠를 재생하고 있는 상태)입니다. 화면에 나타나기 전에 필요한 초기화를 진행할 수 있습니다.

data: {
    /* user_data object */
  },

user_data는 ready 상태에서 초기화에 이용 가능 합니다. (user_data는 getProperty 를 통해서도 구할 수 있습니다.)

{ 
          type: 'state',
          sub: 'play',
          name: 'name of Web Content element',
          pageId: 'id'
}

웹 콘텐츠 요소를 화면에 표시하는 시점(Front Page layer)을 전달합니다.

{ 
          type: 'state',
          sub: 'pageChanged',
          data: 'name of changed page',
          name: 'name of Web Content element',
          pageId: 'id'
}

재생 중 페이지 (Page)가 전환되는 시점을 전달합니다.(단, 웹 콘텐츠가 공통 페이지에 속해 있을 경우에만 동작합니다.)

data로 전달되는 pageName 을 통해 어떤 page 가 전환되었는지 확인 가능 합니다.

{ 
          type: 'state',
          sub: 'stop',
          name: 'name of Web Content element',
          pageId: 'id'
}

웹 콘텐츠 요소가 종료되기 전 시점을 전달합니다. 웹 콘텐츠 요소 내에 사용된 리소스를 반환할 수 있습니다. (예: clearInterval, clearTimeout, $wp = null)

※ 정상적으로 반환되지 않는 리소스는 메모리 누수 발생으로 W Player 재생이 영향을 받을 수 있습니다.

{ 
          type: 'error',
          sub: 'name of error api',
          data: {
            /* custom error object */
          },
}

W Player API 실행 오류 또는 기타 오류가 발생하면 실행됩니다.

오류에 대한 자세한 정보는 error object를 통해 확인할 수 있습니다.

{ 
          type: 'udp',
          sub: 'number of udp port',
          data: 'received data string from udp port'
}

UDP로 data가 전달되면 실행됩니다.

Port 등의 설정은 Web Author에서 저작 시 가능합니다.

{ 
          type: 'datalink',
          sub: 'name of datalink table',
          data: {
                    /* data of datalink table */
          },
}

Datalink에서 data가 전달되면 실행됩니다.

Datalink 정보에 대한 설정은 Web Author에서 저작 시 가능합니다.

...

Type: void

...

코드 예제

$wp.setDefaultCallback(object);

...

기타

주요 기능 ▶ State event 전달 받기를 참조 하세요.

...

$wp.content

이 인터페이스(Interface)는 W Player에서 현재 로드(Load)된 페이지(Page) 및 요소(Element)를 사용하기 위한 API들을 제공합니다.getPage()

• 설명

  페이지 객체를 리턴(return)합니다.

  State 이벤트에서 전달한 id를 파라미터로 입력하여 현재 자신이 속해 있는 페이지(Page) 객체를 전달 받습니다.

  getElement() 함수를 통해 페이지에 로드된 element를 선택할 수 있습니다.

• 구문: function getPage(‘pageId’);

• 파라미터

  pageId: State 에서 전달된 id 값

• 반환값

  성공: Page 객체, 실패: 항상 성공

• 제한 사항

  id 값을 입력하지 않거나 잘못된 값이 입력되면, 현재 화면에 재생되는 page 객체가 전달됩니다.

• 코드 예제

  $wp.content.getPage(‘pageId’);

• 기타

  $wp.content.getPage(); (id 값을 입력하지 않으면 현재 화면에 재생되는 page 객체가 전달됩니다.)