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)입니다.
...
파라미터: 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);
기타
주요 기능에 대한 자세한 내용은 다음을 참고하세요. ▶ 상태 이벤트 전달받기
$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
Info title 참고 자세한 내용은 다음을 참고하세요. ▶ 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();
$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), 실패: 항상 성공
코드 예제
...
기타
웹 콘텐츠에 추가한 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();과 함께 사용해 버전 관리를 할 수 있습니다.
...
주요 기능 코드 예제
Text 요소 폰트 색상 변경하기
현재 페이지에서 ‘Text1’이라는 이름을 갖는 텍스트 요소(Text Element)의 폰트 색상(Font Color)을 변경할 수 있습니다.
Info title 참고 요소 이름은 요소 ‘이름 변경 설명’에서 변경할 수 있습니다.
Code Block <html> <head> <script src="wplayer-api-v1.0.0.js"></script> <script> const contentPropertyType = $wp.content.getPropertyType(); $wp.content.getPage().getElement('Text1').setProperty(contentPropertyType.FONTCOLOR,rgba(255, 0, 0, 1)); </script> </head> </html>상태 이벤트 전달받기
수명 주기에 해당하는 state를 전달받을 수 있습니다.
Code Block <html> <head> <script src="wplayer-api-v1.0.0.js"></script> <script> var PageID = null; $wp.setDefaultCallback(function(object) { switch (object.type) { case 'state': switch (object.sub) { case 'ready': $wp.utility.log(`ElementHtml get 'ready' state`); PageID = object.pageId; //getPage() 함수 호출 시 Id 값으로 사용 break; case 'play': $wp.utility.log(`ElementHtml get 'play' state`); break; case 'stop': $wp.utility.log(`ElementHtml get 'stop' state`); $wp = null; //stop 시 null 설정을 통해 리소스 반환 진행 break; default: break; } break; default: break; } }); </script>User 데이터 전달받기
상태 이벤트에서 객체로 Web Author에서 저작 시 설정한 user data를 key: value 형식으로 전달받을 수 있습니다.
User data는 getProperty의 USERDATA를 이용해 구할 수도 있습니다.
Code Block <html> <head> <script src="wplayer-api-v1.0.0.js"></script> <script> const contentPropertyType = $wp.content.getPropertyType(); $wp.setDefaultCallback(function(object) { switch (object.type) { case 'state': switch (object.sub) { case 'ready': $wp.content.getPage(object.pageId).getElement('Text1').setProperty(contentPropertyType.TEXT, `${JSON.stringify(object.data)} from User Data`); break; default: break; } break; default: break; } }); </script> </head> </html>UDP 데이터 전달받기
UDP port로 전달되는 데이터를 사용할 수 있습니다.
Web Author에서 저작 시 웹 콘텐츠의 External Data > UDP Listener 속성이 설정되어 있어야 합니다.
Web Author에서 미리 보기(Preview)를 이용해 UDP 동작을 시뮬레이션 할 수 있습니다.
Code Block <html> <head> <script src="wplayer-api-v1.0.0.js"></script> <script> var PageID = null; const contentPropertyType = $wp.content.getPropertyType(); $wp.setDefaultCallback(function(object) { switch (object.type) { case 'state': switch (object.sub) { case 'ready': PageID = object.pageId; //getPage() 함수 호출 시 Id 값으로 사용 break; } case 'udp': $wp.content.getPage(PageID).getElement('Text1').setProperty(contentPropertyType.TEXT, `${object.data} from UDP`); break; default: break; } }); </script> </head> </html>
Datalink 테이블 전달받기
Datalink에서 전달되는 table data를 사용할 수 있습니다.
Web Author에서 저작 시 웹 콘텐츠의 EXT. DATA DATALINK 속성이 설정되어 있어야 합니다.
Code Block <html> <head> <script src="wplayer-api-v1.0.0.js"></script> <script> var PageID = null; const contentPropertyType = $wp.content.getPropertyType(); $wp.setDefaultCallback(function(object) { switch (object.type) { case 'state': switch (object.sub) { case 'ready': PageID = object.pageId; //getPage() 함수 호출 시 Id 값으로 사용 break; } case 'datalink': if (object.sub === ‘mytablename’) { $wp.content.getPage(PageID).getElement('Text1').setProperty(contentPropertyType.TEXT ,`${object.data} from Datalink`); } break; default: break; } }); </script> </head> </html>
클릭 이벤트 전달받기
현재 페이지에서 'Image1'이라는 이름을 갖는 image element의 클릭 이벤트를 전달받을 수 있습니다. 다음을 참고하세요. ▶ Datalink 테이블 전달받기
Code Block <html> <head> <script src="wplayer-api-v1.0.0.js"></script> <script> const contentPropertyType = $wp.content.getPropertyType(); $wp.content .getPage() .getElement('Image1') .addEventListener('click', (e) => { $wp.content.getPage().getElement('Text1').setProperty(contentPropertyType.TEXT, `Click Image1`); }); </script> </head> </html>
Sample 다운로드 및 주요 동작 학습하기
Sample LFD 를 다운로드 후 Web Author의 Open Local File 기능을 이용하여 Web Author에 Import 하면 Web Author의 Preview 기능 및 W Player에 배포를 통해 W Player API의 주요 동작 기능을 배울 수 있습니다.
...
4-1. Default Page
광고와 같은 기본 컨텐츠를 재생하다가 사용자가 화면을 touch 할 경우, 정보제공 등의 다른 컨텐츠를 포함하는 페이지로 전환하여 재생한다.
구성:
1) 화면에 재생될 배경 요소 (ex. 광고 동영상/이미지)
2) 다른 페이지로 전환하기 위한 touch 이벤트를 받을 요소
3) Player의 정보를 보여줄 버튼 및 텍스트 요소
4) Web Content
기능:
(1) 페이지 전환을 위한 요소로부터 touch 이벤트를 수신하여 페이지를 전환시킨다.
(2) player정보를 보여주기 위한 요소로부터 touch 이벤트를 수신하여 Player(device)의 ip address, mac address, version 등 정보를 보여준다.
(3) 리모컨의 keydown 이벤트 수신, udp메시지 수신을 통하여 페이지 전환 등의 기능을 동작한다.
Web Author 설정:
(1) User Data 설정: 다른 페이지로 전환하기 위하여 touch 이벤트를 수신할 요소의 이름을 ‘clickElement’(key)의 value에 저장하여 전달한다.
Stylesheet class screen 
(2) External Data 설정: UDP Listener를 활성화 시켜서 webContent가 UDP메시지를 수신할 수 있도록 설정한다.
Stylesheet class screen 
4-2. MenuBoard Page
Datalink를 통하여 메뉴 보드를 구성하고, sold-out 등의 이벤트에 따른 동작을 메뉴 보드에 추가하여 재생합니다. 사용자의 동작이 일정시간 동안 없을 경우, 기본 페이지로 전환합니다.
구성:
1) WebContent
기능:
(1) Datalink로부터 데이터를 받아서 메뉴 보드를 구성한다.
(2) 메뉴 보드 중 sold-out 상품일 경우, 적절한 효과를 적용한다.
(3) 일정시간 동안 사용자의 동작이 없을 경우, 기본 컨텐츠가 재생되는 페이지로 전환시킨다.
Web Author 설정: 사용자가 일정시간 동안 사용하지 않을 경우 다른 페이지로 전환하는데, 사용자의 사용 여부를 확인하는 일정 시간을 ‘timeout’(key)의 value에 저장하여 전달한다.
(1) 기본 컨텐츠가 포함된 페이지의 이름을 ‘defaultPageName’(key)의 value에 저장하여 전달한다.
Stylesheet class screen 
(2) External Data 설정: UDP Listener를 활성화 시켜서 webContent가 UDP메시지를 수신할 수 있도록 설정한다.
Stylesheet class screen 
DataLink Listener를 활성화 시키고 DataLink Table을 통하여 WebContent에 전달할 데이터를 설정한다.
Stylesheet class screen 
유용한 기능
...
W Player API 수행 실패 원인 확인
W Player API 수행 실패에 대한 원인은 $wp.setDefaultCallback()으로 설정된 callback 함수를 통해 error object로 전달받을 수 있습니다.
| Code Block |
|---|
$wp.setDefaultCallback(function(dataset) {
// dataset.type: ‘error’
// dataset.sub: ‘content.getPage.setProperty’
// dataset.data: ‘Error: setProperty: Requested property is not supported, property = ip
}
|
...
W Player API 수행 예외 확인
API 실행 중 예외 발생은 코드 내에 try catch를 추가해 확인할 수 있습니다.
| Code Block |
|---|
var Version = null;
try {
Version = $wp.utility.getApiVersion();
} catch (e) {
console.log("[getApiVersion] Exception occurred = ${e}");
}
|
...
웹 콘텐츠 내 Tizen API 사용
Tizen API를 사용해 장치의 기능(예: 리모콘 신호 수신)에 직접 접근할 수 있습니다. ▶ 자세한 내용은 Tizen 개발자 페이지를 참고하세요.)
...
Log 스크립트에 ‘wplayer_api_nopswd’를 입력해 가져오기를 진행하면 $wp.utility.log()를 이용해 남긴 로그를 파일로 가져올 수 있습니다.
| Stylesheet | ||
|---|---|---|
| ||
|
FAQ
Q: setProperty()를 이용한 요소의 속성 변경이 반영되지 않습니다.
A:
전달되는 error 정보를 통해 원인을 알 수 있습니다. ▶ 유용한 기능..실패 원인 확인 링크
Web Author를 이용한 저작 시 element 이름은 페이지 내에서만 고유합니다. Ready 상태에서 setProperty를 사용한다면 정확한 페이지 내 요소가 선택되었는지 확인하세요. 상태 이벤트시 전달된 pageId 값을 이용하면 현재 실행 중인 페이지 객체를 반환받을 수 있습니다. ▶ 주요 기능 User data 전달받기 링크
속성 중 name 입력값은 대소문자를 구별합니다.
Q: 웹 콘텐츠 내에 리모컨이나 키보드 입력은 전달되지 않습니다.
A:
웹 콘텐츠에서 키 입력을 사용할 창이나 문서에 포커스를 설정했는지 확인하세요.
Play 상태 단계에 포커스 코드를 추가할 것을 권장합니다.
Info title 참고 창과 문서의 포커스 설정 방법을 참고하세요.
여러 웹 콘텐츠에 포커스를 설정하면 나중에 Play 상태를 받은 웹 콘텐츠로 포커스가 이동해 원하는 동작과 다르게 실행될 수 있습니다. 포커스가 필요한 웹 콘텐츠만 설정하세요.
Q: UDP 데이터가 전달되지 않습니다.
A1:
Web Author를 이용한 UPD 설정이 올바른지 확인하세요. ▶ 저작 설명 링크A2:
Web Author에서 설정한 port 번호가 다른 프로세스에서 사용 중인지 확인하고 포트를 변경한 후 재시도하세요.Info title 참고 47475는 W Player 재생을 위한 port입니다. 해당 포트 사용을 금지하세요.
Q: Datalink 테이블 데이터가 전달되지 않습니다.
A1:
Web Author를 이용한 Datalink 설정 및 Datalink Server 설정이 올바른지 확인하세요. ▶ 저작/서버(Datalink 설정) 설명 링크A2:
Datalink Server와 W Player의 네트워크 환경이 통신 가능한지 확인하세요.
Q: W Player API를 이용해 웹 콘텐츠를 배포해 장시간 재생 시 재생 성능이 저하되거나 Player 재시작 등의 문제가 발생합니다.
A:
배포한 웹 콘텐츠 내에 메모리 누수가 발생하지 않는지 확인하세요. W Player API를 사용한다면 메모리 누수 방지를 위해 Stop 상태에서 $wp = null;을 추가하세요. (주요 기능 ▶ ‘상태 이벤트 전달받기’ 참고)
Q: 웹 콘텐츠 내 video 태그 이용 시 동영상이 정상적으로 재생 되지 않습니다.
A1:
동영상 파일 경로를 확인하세요. 웹 콘텐츠에 추가한 asset은 getRootDirectory() API로 가져온 루트 디렉터리 하위에 저장됩니다.A2:
동영상이 사용 중인 장치에서 지원하는 포맷인지 확인하세요. 다음 URL에서 확인할 수 있습니다.https://developer.samsung.com/smarttv/develop/specifications/media-specifications.html
A3:
W Player는 원활한 전환을 위해 Back Page layer와 Front Page layer에 총 2개의 페이지를 로드합니다. Back Page layer와 Front Page layer에 위치한 비디오 영역이 겹치는 경우, 정상적으로 재생되지 않으므로 서로 겹치지 않게 확인하세요.A4:
W Player는 원활한 전환을 위해 Back Page layer와 Front Page layer에 총 2개의 페이지를 로드합니다. Back Page layer와 Front Page layer에 위치한 비디오 개수가 3을 초과하는 경우 정상적으로 재생되지 않으므로 비디오 개수를 3개 이하가 되도록 조정하세요. 만약, 저작 시 Web content 속성 중 sync timeline을 설정하면 Front page layer에서만 (play 단계) video를 load 함으로 재생 제약을 극복 할 수 있습니다. 단, play 단계에서 재생 시점에 깜박임이 발생 할 수 있습니다. è sync timeline을 설정 링크 추가
| Sv translation | ||
|---|---|---|
| ||
| Sv translation | ||
|---|---|---|
| ||