You have English selected as language but this page has not been translated yet. Translate the page or view the content in the default space language below.
Display defaultW 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);
기타
주요 기능에 대한 자세한 내용은 다음을 참고하세요. ▶ 상태 이벤트 전달받기
$wp.content
이 인터페이스(Interface)는 W Player에서 현재 로드(Load)된 페이지(Page) 및 요소(Element)를 사용하기 위한 API들을 제공합니다.
getPage()
설명
페이지 객체를 리턴(return)합니다.
상태 이벤트에서 전달한 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 재생에 영향을 미칠 수 있습니다.
코드 예제:
$wp.content.getPage(pageId).setProperty('background-color', “rgba(255, 0, 0, 1)”));
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
반환값: 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();
$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'
SIZE
'size'
POSITION
'position'
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 상태와 같이 사용하면 페이지 변경에 대한 추가 정보를 얻을 수 있습니다.
다음을 참고하세요. ▶ setDefaultCallback()
wp.device
이 인터페이스는 W Player, Tizen 등의 Device 관련 리소스 정보를 얻기 위한 API들을 제공합니다.
getProperty ()
설명: Device의 속성값을 구합니다.
구문: function getProperty (‘name’);
파라미터
name: 속성명
name
반환값
유형 설명 player_version
string
value: w player version
fw_version
string
value: firmware version
variable_tag
array
value: tag list
mis_ip
string
value: mis ip address
mac
string
value: mac address
ipaddress
string
value: ip address
resolution
object
{ width: 1920, height: 1080 }
orientation
string
value: landscape/portrait
반환값
Type: 위 표 참고
API가 성공적으로 수행된 경우: 정상값
API가 성공적으로 수행되지 않은 경우: undefined Type: bool
코드 예제
$wp.device.getProperty(‘mac’);
getPropertyType()
설명: Device 인터페이스에서 제공하는 속성들의 이름을 가져올 수 있습니다.
속성명
반환값
PLAYER_VERSION
'player_version'
FIRMWARE_VERSION
'fw_version'
VARIABLE_TAG
'variable_tag'
MIS_IP
'mis_ip'
MACADDRESS
'mac'
IPADDRESS
'ipaddress'
RESOLUTION
'resolution'
ORIENTATION
'orientation'
구문: function getPropertyType();
파라미터
None
반환값
성공: object(속성명), 실패: 항상 성공
코드 예제
$wp.device.getPropertyType();
기타
$wp.device.getPropertyType();로부터 반환되는 객체를 변수화해 사용하면 오타 방지 등의 편리함이 있습니다.
var devicePropertyType = $wp.device.getPropertyType();
$wp.device.getProperty(devicePropertyType.MACADDRESS);
$wp.local
이 인터페이스는 웹 콘텐츠 요소가 실행되는 local 환경 정보를 얻기 위한 API들을 제공합니다.
getApiVersion ()
설명: 웹 콘텐츠가 가져온 W Player API Lib의 버전을 알 수 있습니다.
구문: function getApiVersion();
파라미터
None
반환값
성공: string (version), 실패: 항상 성공
코드 예제
$wp.local.getApiVersion();
기타
$wp.utility.getApiVersion();과 함께 사용해 버전 관리를 할 수 있습니다.
getRootDirectory ()
설명: 웹 콘텐츠가 로드된 루트 디렉터리를 알 수 있습니다.
구문: function getRootDirectory();
파라미터
none
반환값
성공: string (Root Directory), 실패: 항상 성공
코드 예제
$wp.local. getRootDirectory();
기타
웹 콘텐츠에 추가한 asset은 getRootDirectory()를 통해 전달받은 루트 디렉터리 경로 하위에 저장됩니다.
$wp.utility
이 인터페이스는 응용 웹 콘텐츠 요소 개발을 위한 여러 utility API들을 제공합니다.
log ()
설명: 웹 콘텐츠가 가져온 W Player API Lib의 버전을 알 수 있습니다.
구문: function log(“message”);
파라미터
message: string
반환값
Type: void
코드 예제
$wp.utility.log(“Hello World!”);
기타
로그를 원격으로 가져올 수 있습니다. 다음을 참고하세요. ▶ 로그 가져오기
getApiVersion ()
설명: 웹 콘텐츠가 실행되는 W Player가 지원하는 W Player API Lib의 버전을 알 수 있습니다.
구문: function getApiVersion();
파라미터
none
반환값
성공: string (version), 실패: 항상 성공
코드 예제
$wp.utility.getApiVersion();
기타
$wp.local.getApiVersion();과 함께 사용해 버전 관리를 할 수 있습니다.