Page History
소개
- W Player API를 이용해 W Player의 특화 기능을 자유롭게 사용할 수 있습니다. W Player API는 웹 패키지(HTML, CSS, JS) 형태의 웹 콘텐츠 요소 안에서 사용하며 웹 표준 스크립트 방식을 지원합니다.
- W Player API를 통해 W Player의 다양한 응용 웹 콘텐츠 요소를 생성할 수 있습니다.
개요
응용 웹 콘텐츠 요소 기본 구조
Stylesheet class screen 
- ContentApi: LFD 콘텐츠 내 페이지(page)와 페이지의 이미지, 텍스트 및 비디오 요소 속성을 변경하거나 가져올 수 있습니다.
- LocalApi: 응용 웹 콘텐츠 요소가 실행되는 로컬(Local)환경의 정보를 가져올 수 있습니다.
- DeviceApi: W Player, Tizen 등 기기(Device) 관련 정보를 가져올 수 있습니다.
- UtilityApi: 응용 웹 콘텐츠 요소 개발용 유틸리티들을 사용할 수 있습니다.
- Event CallBack: 응용 웹 콘텐츠 요소의 수명 주기 이벤트, 데이터링크(datalink) 및 외부 소스로부터 전달되는 데이터를 수신하는 콜백(Callback) 함수를 제공합니다.
응용 웹 콘텐츠 요소 수명 주기
응용 웹 콘텐츠 요소는 다음 수명 주기를 가지며 각 상태 진입 시점을 callback으로 전달받을 수 있습니다. Ready와 Play 상태를 활용하면 원활하게 재생할 수 있습니다.
Stylesheet class screen 
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 사용을 위해 필요한 웹 콘텐츠 요소에 대한 설정을 수행하세요. 자세한 내용은 다음을 참고하세요. ▶ Web Author를 사용해 콘텐츠 제작하기
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) 형태로 전달합니다.
Code Block { 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, 현재 화면에는 이전 콘텐츠를 재생하고 있는 상태)입니다. 화면에 나타나기 전에 필요한 초기화를 진행할 수 있습니다.Code Block data: { /* user_data object */ },user_data는 ready 상태에서 초기화에 이용 가능 합니다. (user_data는 getProperty 를 통해서도 구할 수 있습니다.)
Code Block { type: 'state', sub: 'play', name: 'name of Web Content element', pageId: 'id' }웹 콘텐츠 요소를 화면에 표시하는 시점(Front Page layer)을 전달합니다.
Code Block { type: 'state', sub: 'pageChanged', data: 'name of changed page', name: 'name of Web Content element', pageId: 'id' }재생 중 페이지 (Page)가 전환되는 시점을 전달합니다.(단, 웹 콘텐츠가 공통 페이지에 속해 있을 경우에만 동작합니다.)
data로 전달되는 pageName 을 통해 어떤 page 가 전환되었는지 확인 가능 합니다.
Code Block { type: 'state', sub: 'stop', name: 'name of Web Content element', pageId: 'id' }웹 콘텐츠 요소가 종료되기 전 시점을 전달합니다. 웹 콘텐츠 요소 내에 사용된 리소스를 반환할 수 있습니다. (예: clearInterval, clearTimeout, $wp = null)
※ 정상적으로 반환되지 않는 리소스는 메모리 누수 발생으로 W Player 재생이 영향을 받을 수 있습니다.
Code Block { type: 'error', sub: 'name of error api', data: { /* custom error object */ }, }W Player API 실행 오류 또는 기타 오류가 발생하면 실행됩니다.
오류에 대한 자세한 정보는 error object를 통해 확인할 수 있습니다.
Code Block { type: 'udp', sub: 'number of udp port', data: 'received data string from udp port' }UDP로 data가 전달되면 실행됩니다.
Port 등의 설정은 Web Author에서 저작 시 가능합니다.
Code Block { 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 객체가 전달됩니다.)
setProperty()
설명: 페이지의 속성을 설정합니다.
구문: function setProperty (‘name’,’value’);
파라미터:
name: 속성명
value: 속성값
name
value
유형 설명 background-color
color
value: "rgba(0, 0, 0, 1)"
반환값:
Type : bool
API 가 성공적으로 수행된 경우 : true
API 가 성공적으로 수행 되지 않은 경우 : false
제한 사항:
지원하지 않는 속성(파라미터의 Table에 작성되지 않은 property)을 변경할 경우, W Player 재생에 영향을 미칠 수 있습니다.
코드 예제:
지원하지 않는 속성(파라미터의 Table에 작성되지 않은 property)을 변경할 경우, W Player 재생에 영향을 미칠 수 있습니다.
getProperty()
설명: 페이지의 속성값을 구합니다.
구문: function setProperty (‘name’,’value’);
파라미터:
노트 > name: 속성명
name
반환값
유형 설명 name
string
string
background-color
color
value: "rgba(0, 0, 0, 1)"
반환값
Type : 위의 표 참고
API 가 성공적으로 수행된 경우 : 정상값
API 가 성공적으로 수행 되지 않은 경우 : undefined
코드 예제: $wp.content.getPage(pageId).getProperty('background-color');
getGlobalPage()
설명: 공통 페이지 객체를 반환합니다. 상태 이벤트에서 전달된 id를 파라미터로 입력해 자신이 속한 공통 페이지객체를 전달받습니다. getElement() 함수를 통해 공통 페이지에 로드된 element를 선택할 수 있습니다.
구문: function getGlobalPage(‘pageId’);
파라미터:
pageId: 상태 이벤트에서 전달된 id 값
반환값
성공: 현재의 글로벌 페이지 객체
실패: 항상 성공
제한 사항: getPage() API와 달리 속성 관련 기능은 제공하지 않습니다.
코드 예제: $wp.content.getGlobalPage(pageId);
getElement()
설명: 페이지로부터 name 값을 갖는 element 객체를 반환합니다.
각 element가 제공하는 API를 통해 element를 제어할 수 있습니다.
구문: function getElement(‘name’);
파라미터: name: element name
참조 > 자세한 내용은 다음을 참고하세요. ▶ Web Author layer Window
반환값: function getElement(‘name’);
성공: 현재의 글로벌 페이지 객체
실패: 항상 성공
코드 예제: $wp.content.getPage(pageId).getElement(‘Text1’);
setProperty()
설명: Element의 속성을 설정합니다. element마다 지원되는 속성은 다른 값을 가지고 있습니다.
구문: function setProperty (‘name’,’value’);
파라미터:
name: 속성명
value: 속성값
지원 element
name
value
유형 설명 common (단, video element는 지원하지 않음)
width
number
value 단위: px
height
number
value 단위: px
left
number
value 단위: px
top
number
value 단위: px
visibility
string
value: "visible,hidden"
opacity
number
value: 0.0~1.0
rotation
number
value: 0~360
size
Object
{width: 0, height: 0}
position
Object
{left: 0, top: 0}
image
flip-x
boolean
-
flip-y
boolean
-
source
string
file 절대 경로(getRootDirectory()를 참조하여 생성할 수 있습니다.)
flip
Object
valueObject = {x: false, y: false}
video
source
string
file 절대 경로(getRootDirectory()를 참조하여 생성할 수 있습니다.)
text
font-size
number
value: font size
font-variant
string
value: normal, small-caps
font-color
color
value: "rgba(0, 0, 0, 1)"
background-color
color
value: "rgba(0, 0, 0, 1)"
font-weight
string
value: normal, bold
font-style
string
value: normal, italic
text-decoration
string
value: none, line-through, underline
letter-spacing
number
value 단위: 'px' (0-50)
horizontal-align
string
value: left,right,center
vertical-align
string
value: top,middle,bottom
text
string
string
반환값:
Type: bool
API가 성공적으로 수행된 경우: true
API가 성공적으로 수행되지 않은 경우: false
제한 사항:
지원하지 않는 속성(파라미터의 Table에 작성되지 않은 property)을 수정할 경우, W Player 재생에 영향을 미칠 수 있습니다.
코드 예제: $wp.content.getPage(pageId).getElement(‘Text1’).setProperty(‘text’, ‘Test Text!’);
기타
Image/Video 요소 - Source 속성의 파라미터는 다음과 같이 설정할 수 있습니다.
var imagePath = $wp.local.getRootDirectory() + “/testImage.png”; ▶ $wp.local.getRootDirectory(); link
$wp.content.getPage(pageId).getElement(‘Image1’).setProperty(‘source’, imagePath);
getProperty()
설명: Element의 속성을 값을 구합니다.
구문: function getProperty (‘name’);
파라미터
name: 속성명
지원 element
name
반환값
유형 설명 common (단, video element는 Lock을 제외한 나머지는 지원하지 않음)
width
number
value 단위: px
height
number
value 단위: px
left
number
value 단위: px
top
number
value 단위: px
visibility
string
value: "visible,hidden"
opacity
number
value: 0.0~1.0
rotation
number
value: 0~360
size
Object
{width: 0, height: 0}
position
Object
{left: 0, top: 0}
lock-position-size
boolean
-
lock-design
boolean
-
lock-content
boolean
-
image
flip-x
boolean
-
flip-y
boolean
-
source
string
file 절대 경로
flip
Object
{x: false, y: false}
video
source
string
file 절대 경로
web content
user-data
Object
{"key","value"}
text
font-size
number
value: font size
font-variant
string
value: normal, small-caps
font-color
color
value: "rgba(0, 0, 0, 1)"
background-color
color
value: "rgba(0, 0, 0, 1)"
font-weight
string
value: normal, bold
font-style
string
value: normal, italic
text-decoration
string
value: none, line-through, underline
letter-spacing
number
value 단위: 'px' (0-50)
horizontal-align
string
value: left,right,center
vertical-align
string
value: top,middle,bottom
text
string
string
반환값
Type: 위 표 참고
API가 성공적으로 수행된 경우: 정상값
API가 성공적으로 수행되지 않은 경우: undefined: function getProperty (‘name’);
코드 예제: $wp.content.getPage(pageId).getElement(‘Text1’).getProperty(‘text’);
addEventListener()
설명: 현재 재생되고 있는 요소의 클릭 이벤트를 전달받는 리스너(Listener)를 추가할 수 있습니다.
구문: function addEventListener(type,myFunction);
파라미터
type: ‘click’ (click만 지원함)
myFunction: callback function
반환값
Type: bool
API가 성공적으로 수행된 경우: true
API가 성공적으로 수행되지 않은 경우: false
제한 사항
Type으로는 click만 지원합니다.
Click 영역: 요소 영역의 최외곽 사각형 영역입니다. (단, 도형 요소는 도형 모양 외곽 기준)
코드 예제
$wp.content.getPage(pageId).getElement(‘Text1’). addEventListener(‘click’,myFunction);
getPropertyType()
설명: 콘텐츠 인터페이스에서 제공하는 속성들의 이름을 가져올 수 있습니다.
속성명
반환값
width
‘width’
HEIGHT
‘height’
LEFT
'left'
TOP
''top''
VISIBILITY
'visibility'
OPACITY
'opacity'
ROTATION
'rotation'
FLIP_X
'flip-x'
FLIP_Y
'flip-y'
SOURCE
'source'
FLIP
'flip'
FONTFAMILY
'font-family'
FONTSIZE
'font-size'
FONTVARIANT
'font-variant'
FONTCOLOR
'font-color'
BACKGROUNDCOLOR
'background-color'
FONTWEIGHT
'font-weight'
FONTSTYLE
'font-style'
TEXTDECORATION
'text-decoration'
LETTERSPACING
'letter-spacing'
HORIZONTALALIGN
'horizontal-align'
VERTICALALIGN
'vertical-align'
TEXT
'text'
LOCKPOSITIONANDSIZE
'lock-position-size’
LOCKDESIGN
'lock-design'
LOCKCONTENT
'lock-content'
NAME
'name'
USERDATA
'user-data'
구문: function getPropertyType();
파라미터: none
반환값
성공: object (속성명), 실패: 항상 성공
코드예제
$wp.content.getPropertyType();
기타
$wp.content.getPropertyType();로부터 반환되는 객체를 변수화해 사용하면 오타 방지 등의 편리함이 있습니다.
var contentPropertyType = $wp.content.getPropertyType();
$wp.content.getPage().getElement('Text1').setProperty(contentPropertyType.TEXT, “TEST”);
movePage ()
설명: 페이지를 이동해 재생합니다.
구문: function movePage(‘pageName’);
파라미터
page name
반환값
Type: bool
API가 성공적으로 수행된 경우: true
API가 성공적으로 수행되지 않은 경우: false
제한 사항
movePage() API는 웹 콘텐츠가 공통 페이지에서 동작되는 경우에만 정상 동작합니다.
일반 페이지에 위치한 HTML 요소에서 movePage api를 사용할 경우 해당 페이지로 이동 재생되기 때문에 기존 HTML 요소는 더 이상 동작하지 않습니다.
코드 예제
$wp.content.movePage(‘pagename’);
기타
setDefaultCallback()의 pageChanged 상태와 같이 사용하면 페이지 변경에 대한 추가 정보를 얻을 수 있습니다.
wp.device