$wp.content: Pages and Elements (W Player API)
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 |
- 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 | |
| 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).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
- 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 |
| height | number | |
| left | number | |
| top | number | |
| visibility | string | |
| opacity | number | |
| rotation | number | |
| size | Object | |
| position | Object | |
| image | flip-x | |
| - | flip-y | |
| - | source | |
| Absolute file path (This can be created by referring to getRootDirectory().) | flip | |
| valueObject = {x: false, y: false} | video | |
| string | Absolute file path (This can be created by referring to getRootDirectory().) | |
| 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”; For details on getRootDirectory(), see $wp.local. $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 |
| height | number | |
| left | number | |
| top | number | |
| visibility | string | |
| opacity | number | |
| rotation | number | |
| size | Object | |
| position | Object | |
| lock-position-size | boolean | |
| lock-design | boolean | |
| lock-content | boolean | |
| image | flip-x | |
| - | flip-y | |
| - | source | |
| Absolute file path | flip | |
| {x: false, y: false} | video | |
| string | Absolute file path | |
| user-data | Object | {"key","value"} |
| text | font-size | number |
| font-variant | string | |
| font-color | color | |
| background-color | color | |
| font-weight | string | |
| font-style | string | |
| text-decoration | string | |
| letter-spacing | number | |
| horizontal-align | string | |
| vertical-align | string | |
| text | 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. For details on setDefaultCallback(), see $wp.