페이지 이력

이 인터페이스는 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’);

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) 객체의 이름

  정보
  title 참고
  자세한 내용은 다음을 참고하세요. ▶ Web Author 콘텐츠 제작 화면 알아보기

• 반환값

  function getElement(‘name’);

  성공: 요소(Element) 객체 반환

  실패: undefined

• 코드 예제

  $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 단위:

This interface provides APIs required for using the loaded current pages and elements from W Player.

getPage()

• Description

  Returns the page object.

  Receives the page object to which it currently belongs by entering the ID, sent from the state event, as a parameter.

  It is possible to select elements loaded to the page, using function "getElement()."

• Syntax

  function getPage(‘pageId’);

• Parameter

  pageId: ID value sent from the state event

• Return value

  Success: Page object, fail: Always successful

• Constraints

  If an ID value is not entered or an invalid value is entered, the page object currently playing on the screen will be sent.

• Code example

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

setProperty()

• Description

  Configure page properties.

• Syntax

  function setProperty('name', 'value');

• Parameter

  name: Property name

  value: Property value

  name	value
  	Type	Description
  background-color	color	value: "rgba(0, 0, 0, 1)"

• Return value

  Type : bool

  If API has been run successfully: true

  If API has not been run successfully: false

• Constraints

  If you change a property that is not supported (e.g., a property that is not included in the parameter table), W Player playback may be affected.

• Code example

  $wp.content.getPage(pageId).setProperty('background-color', “rgba(255, 0, 0, 1)”));

getProperty()

• Description

  Find the property value of the page.

• Syntax

  function setProperty('name', 'value');

• Parameter

  name: Property name

  name	Return value
  	Type	Description
  name	string	string
  background-color	color	value: "rgba(0, 0, 0, 1)"

• Return value

  Type: Refer to the table above.

  If API has been run successfully: normal value

  If API has not been run successfully: undefined

• Code example

  $wp.content.getPage(pageId).getProperty('background-color');

getGlobalPage()

• Description

  Returns the common page object. Receives the common page object to which it belongs by entering the ID, sent from the state event, as a parameter.

  It is possible to select elements loaded to the common page, using function "getElement()."

• Syntax

  function getGlobalPage(‘pageId’);

• Parameter

  pageId: ID value sent from the state event

• Return value

  Success: Current global page object

  Fail: Always successful

• Constraints

  Property-related functions are not provided, unlike the getPage() API.

• Code example

  $wp.content.getGlobalPage(pageId);

getElement()

• Description

  Returns element objects that have names from the page.

  Allows each element to be controlled via API provided by the element.

• Syntax

  function getElement(‘name’);

• Parameter

  name: Name of the element object

  정보
  title Note
  Refer to the following for details. ▶ Web Author screen layout

• Return value

  function getElement(‘name’);

  Success: The element object is returned

  Fail: undefined

• Code example

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

setProperty()

• Description

  Configure the properties of an element. Supported properties have different values depending on the element.

• Syntax

  function setProperty('name', 'value') ;

• Parameter

  name: Property name

  value: Property value

  Supported elements	name	value
  		Type	Description
  common (Note that video elements are not supported)	width	number	Value unit: px
  	height	number	Value unit: px
  	left	number	Value unit: px
  	top	number	Value unit: 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	Absolute file path (This can be created by referring to getRootDirectory().)
  	flip	Object	valueObject = {x: false, y: false}
  video	source	string	Absolute file path (This can be created by referring to 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 unit: px (0-50)
  	horizontal-align	string	value: "left,right,center"
  	vertical-align	string	value: "top,middle,bottom"
  	text	string	string

• Return value

  Type: bool

  If API has been run successfully: true

  If API has not been run successfully: false

• Constraints

  If you edit a property that is not supported (e.g., a property that is not included in the parameter table), W Player playback may be affected.

• Code example

  $wp.content.getPage(pageId).getElement(‘Text1’).setProperty(‘text’, ‘Hello World!’);

• Others

  Image/Video elements - The parameter of a Source property can be set as follows:

  var imagePath = $wp.local.getRootDirectory() + “/testImage.png”;

  Refer to the following: ▶ $wp.local. getRootDirectory();

  $wp.content.getPage(pageId).getElement(‘Image1’).setProperty(‘source’, imagePath);

getProperty()

• Description

  Find the property value of an element.

• Syntax

  function getProperty (‘name’);

• Parameter

  name: Property name

  Supported elements	name	Return value
  		Type	Description
  common (Note that video elements, with the exception of Lock, are not supported)	width	number	Value unit: px
  	height	number	Value unit: px
  	left	number	Value unit: px
  	top	number	Value unit: 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	Absolute file path
  	flip	Object	{x: false, y: false}
  video	source	string	Absolute file path
  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 unit: px (0-50)
  	horizontal-align	string	value: "left,right,center"
  	vertical-align	string	value: "top,middle,bottom"
  	text	string	string

• Return value

  Type: Refer to the table above

  If API has been run successfully: Normal value

  If API has not been run successfully: undefined

• Code example

  $wp.content.getPage(pageId).getElement(‘Text1’).getProperty(‘text’);

addEventListener()

• Description

  Add a Listener that receives click events for the currently playing element.

• Syntax

  function addEventListener(type,myFunction);

• Parameter

  type: "click" ("Click" is only supported)

  myFunction: callback function

• Return value

  Type: bool

  If API has been run successfully: true

  If API has not been run successfully: false

• Constraints

  "Click" is only supported as Type.

  Supported elements: Images, video, text, stickers, and figures

  Click field: This is the most outer rectangular field among the element fields. (Note that a figure element is set based on the outer edge of the figure shape.)

• Code example

  $wp.content.getPage(pageId).getElement(‘Text1’). addEventListener(‘click’,myFunction);

getPropertyType()

• Description

  Import the names of properties provided in the content interface.

  Property name	Return value
  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'

• Syntax

  function getPropertyType();

• Parameter

  None

• Return value

  Success: object (property name), fail: Always successful

• Code example

  $wp.content.getPropertyType();

• Others

  If you convert objects returned from $wp.content.getPropertyType(); to variables, typos can be prevented.

  var contentPropertyType = $wp.content.getPropertyType();

  $wp.content.getPage().getElement('Text1').setProperty(contentPropertyType.TEXT, “TEST”);

movePage()

• Description

  Play content by moving between pages.

• Syntax

  function movePage(‘pageName’);

• Parameter

  page name

• Return value

  Type: bool

  If API has been run successfully: true

  If API has not been run successfully: false

• Constraints

  The movePage() API only works properly when the web content is played from the common page.

  If the movePage API is used from an HTML element located in a general page, a page transition takes place to perform playback on that general page and the existing HTML element stops operation.

• Code example

  $wp.content.movePage(‘pagename’);

• Others

  If used together with the pageChanged state under setDefaultCallback(), additional information about changes to the page can be obtained.

  Refer to the following: ▶ $setDefaultCallback()