This interface provides APIs required for using the loaded current pages and elements from W Player.
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’);
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)”));
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');
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);
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
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’);
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);
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’);
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);
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”);
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()