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

    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()