Skin object

Data type: object

Configuration path: .skin

Description: Configuration for rendering HTML player skin.

Field nameTypeDescription
themestringThe name of the skin theme configuration to load during player initialization.
colorstringMain color of the player skin theme (optional).

NOTE: If the theme field is not provided, then all fields below are required.

Field nameTypeDescription
namestringThe name of the skin theme configuration.
layoutstringURL address of the skin theme layout template.
stylesarrayArray of URL addresses of the skin theme styles.
fontobjectConfiguration object of the skin theme font.
iconobjectConfiguration object of the skin theme core icons.
shareobjectConfiguration object of the skin theme share icons.

theme

Data type: string

Configuration path: .skin.theme

Description: If this parameter is set, then player will load skin theme configuration by given name value (check supported values). Also no other skin configurations are required. But it is possible to override loaded skin theme configuration

Currently supported values are: "disco", "gorilla", "jazz", "mole", "snake", "techno", "zebra".

Configuration example:

{
    "skin": {
        "theme": "disco",
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

color

Data type: string

Configuration path: .skin.color

Description: This parameter can be used to override player skin main color. Color defined in HEX format "#RRGGBB".

Configuration example:

{
    "skin": {
        "theme": "disco",
        "color": "#FF0000"
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

name

Data type: string

Configuration path: .skin.name

Description: The name of the skin theme configuration. The value can only contain lowercase letters [a-z], numbers [0-9], dashes [-], or underscores [_]. And it can’t start with a number.

As shown in the example below, by setting this property you can adjust the CSS styles of only one of multiple video players embedded in the same page and sharing the same theme.

Configuration example:

  • player configuration:
{
    "skin": {
        ...
        "name": "custom-theme-name",
        ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}
  • css styles:
[data-theme-name="custom-theme-name"] {
  // custom css
}

layout

Data type: string

Configuration path: .skin.layout

Description: The URL of the HTML file with the player theme skin template to load during player initialization.

Configuration example:

{
    "skin": {
        ...
        "layout": "https://example.com/layout.html",
        ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

styles

Data type: array

Configuration path: .skin.styles

Description: The URL of the CSS file with player theme skin styles to load during player initialization.

Configuration example:

{
    "skin": {
        ...
        "styles": ["https://example.com/styles.css"],
        ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

font

Data type: array

Configuration path: .skin.font

Description: A configuration object for the font used in the skin theme.

Field nameTypeDescription
font.idstringThe unique identifier for the font configuration.
font.namestringThe name of the font configuration.
font.srcstringThe URL of the font.
font.fetchbooleanMake request for font file.
font.sizestringFont size.
font.familyarrayFont family.

Configuration example:

{
    "skin": {
        ...
        "font": {
          "id": "custom_font_unique_id",
          "name": "custom_font_name",
          "src": "https://example.com/font.file",
          "fetch": true,
          "size": "14px",
          "family": [
            "custom_font_name",
            "sans-serif"
          ]
        },
        ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

font.id

Data type: string

Configuration path: .skin.font.id

Description: The unique identifier for the font configuration.

Configuration example:

{
    "skin": {
        ...
        "font": {
          ...
          "id": "custom_font_unique_id",
          ...
        },
        ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

font.name

Data type: string

Configuration path: .skin.font.name

Description: The name of the font configuration. Used also as name of font in CSS styles.

Configuration example:

{
    "skin": {
        ...
        "font": {
          ...
          "name": "custom_font_name",
          ...
        },
        ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

font.src

Data type: string

Configuration path: .skin.font.src

Description: The URL from which to load the font file.

Configuration example:

{
    "skin": {
        ...
        "font": {
          ...
          "src": "https://example.com/font.file",
          ...
        },
        ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

font.fetch

Data type: boolean

Configuration path: .skin.font.fetch

Description: Set to “true” if the player should request a font file, or “false” if the font will be available in the HTML document.

Configuration example:

{
    "skin": {
        ...
        "font": {
          ...
          "fetch": true,
          ...
        },
        ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

font.size

Data type: string

Configuration path: .skin.font.size

Description: The font size used in the skin theme.

Follow same rules and syntax as CSS font-size property.

Configuration example:

{
    "skin": {
        ...
        "font": {
          ...
          "size": "14px",
          ...
        },
        ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

font.family

Data type: array

Configuration path: .skin.font.family

Description: An array of font names to use as the font-family in the skin theme CSS styles.

Configuration example:

{
    "skin": {
        ...
        "font": {
          ...
          "family": [ "custom_font_name", "sans-serif"]
          ...
        },
        ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

icon

Data type: object

Configuration path: .skin.icon

Description: Configuration object of the skin theme core icons.

Currently, there are two ways to add icons to a skin theme. It can be a font or an SVG file with icons.

Field nameTypeDescription
icon.fontobjectConfiguration object of the skin theme core icons font.
or
icon.svgobjectConfiguration object of the skin theme core icons SVG.

Configuration example:

{
    "skin": {
        ...
        "icon": {
          "font": { ... },
          // or
          "svg": { ... },
        }
        ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

icon.font

Data type: object

Configuration path: .skin.icon.font

Description: A configuration object for the skin theme’s core icons when the source is a font file.

Field nameTypeDescription
icon.font.idstringThe unique identifier for the icon font configuration.
icon.font.namestringThe name of the icon font configuration.
icon.font.srcstringThe URL of the icon font.
icon.font.fetchstringMake request for icon font file.
icon.font.sizestringIcon font size.
icon.font.familyarrayIcon font family.
icon.font.variationobjectIcon font variation configuration.
icon.font.codeobjectIcon font Unicode’s configuration.

Configuration example:

{
    "skin": {
      "icon": {
        "font": {
          "id": "custom_icons_font",
          "name": "custom icons font",
          "src": "https://example.com/icon.font.file",
          "fetch": true,
          "family": ["custom_icons_font"],
          "size": "24px",
          "variation": { "FILL": 0, "wght": 400, "GRAD": 0, "opsz": 48 },
          "code": {
            ...
            "pause": "e034",
            "play": "e037",
            "replay": "e042",
            ...
          }
        }
      },
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

icon.font.id

Data type: string

Configuration path: .skin.icon.font.id

Description: The unique identifier for the icon font configuration.

Configuration example:

{
    "skin": {
        ...
        "icon": {
          "font": {
            ...
            "id": "custom_icon_font_unique_id",
            ...
          },
        },
        ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

icon.font.name

Data type: string

Configuration path: .skin.icon.font.name

Description: The name of the icon font configuration. Used also as name of icon font in CSS styles.

Configuration example:

{
    "skin": {
      ...
      "icon": {
        "font": {
          ...
          "name": "custom_icon_font_name",
          ...
        },
      },
      ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

icon.font.src

Data type: string

Configuration path: .skin.icon.font.src

Description: The URL from which to load the icon font file.

Configuration example:

{
    "skin": {
      ...
      "icon": {
        "font": {
          ...
          "src": "https://example.com/icon_font.file",
          ...
        },
      },
      ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

icon.font.fetch

Data type: boolean

Configuration path: .skin.icon.font.fetch

Description: Set to “true” if the player should request a icon font file, or “false” if the icon font will be available in the HTML document.

Configuration example:

{
    "skin": {
      ...
      "icon": {
        "font": {
          ...
          "fetch": true,
          ...
        },
      },
      ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

icon.font.size

Data type: string

Configuration path: .skin.icon.font.size

Description: The icon font size used in the skin theme.

Follow same rules and syntax as CSS font size property.

Configuration example:

{
    "skin": {
      ...
      "icon": {
        "font": {
          ...
          "size": "14px",
          ...
        },
      },
      ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

icon.font.family

Data type: array

Configuration path: .skin.icon.font.family

Description: An array of icon font names to use as the font-family in the skin theme CSS styles.

Configuration example:

{
    "skin": {
      ...
      "icon": {
        "font": {
          ...
          "family": [ "custom_font_name", "sans-serif"]
          ...
        },
      },
      ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

icon.font.variation

Data type: object

Configuration path: .skin.icon.font.variation

Description: An object of icon font variations to use as the font-variations in the skin theme CSS styles.

Configuration example:

{
    "skin": {
      ...
      "icon": {
        "font": {
          ...
          "variation": {
            "FILL": 0,
            "wght": 400,
            "GRAD": 0,
            "opsz": 48
          },
          ...
        },
      },
      ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

icon.font.code

Data type: object

Configuration path: .skin.icon.font.code

Description: An object containing Unicode icon code values ​​with the icon name as the key. Like: { "NAME": “UNICODE” }.

Configuration example:

{
    "skin": {
      ...
      "icon": {
        "font": {
          ...
          "code": {
            ...
            "pause": "e034",
            "play": "e037",
            "replay": "e042",
            ...
          }
          ...
        },
      },
      ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

icon.svg

Data type: object

Configuration path: .skin.icon.svg

Description: The skin theme’s core icon configuration object when the source is an SVG file.

The SVG file must contain definitions of symbols used as icons with the id property as the icon name.

Field nameTypeDescription
icon.svg.idstringThe unique identifier for the SVG icon set.
icon.svg.namestringThe name of the SVG icon set.
icon.svg.iconsetstringThe URL of the SVG icon set.
icon.svg.sizestringSVG icon size.

Example o SVG file:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
    <defs>
    <symbol id="unique-icon-id" viewBox="...">
      <path fill="currentColor" d="..." />
    </symbol>
    </defs>
</svg>

Configuration example:

{
    "skin": {
      ...
      "icon": {
        "svg": {
          "id": "custom_svg_iconset",
          "name": "custom svg iconset",
          "iconset": "https://example.com/iconset.svg",
          "size": "20px"
        }
      },
      ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

icon.svg.id

Data type: string

Configuration path: .skin.icon.svg.id

Description: The unique identifier for the icon SVG configuration.

Configuration example:

{
    "skin": {
      ...
      "icon": {
        "svg": {
          ...
          "id": "custom_svg_iconset",
          ...
        }
      },
      ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

icon.svg.name

Data type: string

Configuration path: .skin.icon.svg.name

Description: The name for the icon SVG configuration.

Configuration example:

{
    "skin": {
      ...
      "icon": {
        "svg": {
          ...
          "name": "custom svg iconset",
          ...
        }
      },
      ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

icon.svg.iconset

Data type: string

Configuration path: .skin.icon.svg.iconset

Description: The URL from which to load the SVG file.

Configuration example:

{
    "skin": {
      ...
      "icon": {
        "svg": {
          ...
          "iconset": "https://example.com/iconset.svg",
          ...
        }
      },
      ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

icon.svg.size

Data type: string

Configuration path: .skin.icon.svg.size

Description: The SVG icon size used in the skin theme.

Follow same rules and syntax as CSS font size property.

Configuration example:

{
    "skin": {
      ...
      "icon": {
        "svg": {
          ...
          "size": "20px",
          ...
        }
      },
      ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

share

Data type: object

Configuration path: .skin.share

Description: Configuration object of the skin theme share icons.

Currently, there are two ways to add share icons to a skin theme. It can be a font or an SVG file with icons.

Check configuration shareButtons for more details.

Field nameTypeDescription
share.fontobjectConfiguration object of the skin theme share icons font.
or
share.svgobjectConfiguration object of the skin theme share icons SVG.

Configuration example:

{
    "skin": {
        ...
        "share": {
          "font": { ... },
          // or
          "svg": { ... },
        }
        ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

share.font

Data type: object

Configuration path: .skin.share.font

Description: A configuration object for the skin theme’s share icons when the source is a font file.

Field nameTypeDescription
share.font.idstringThe unique identifier for the share icons font configuration.
share.font.namestringThe name of the share icons font configuration.
share.font.srcstringThe URL of the share icons font.
share.font.fetchstringMake request for share icons font file.
share.font.sizestringShare icon font size.
share.font.familyarrayShare icon font family.
share.font.variationobjectShare icon font variation configuration.
share.font.codeobjectShare icon font Unicode’s configuration.

Configuration example:

{
    "skin": {
      "share": {
        "font": {
          "id": "custom_share_font",
          "name": "custom share font",
          "src": "https://example.com/share.icons.css",
          "fetch": true,
          "family": [
            "custom-theme-share-icons"
          ],
          "size": "24px",
          "code": {
            ...
            "code": "e903",
            "mail": "e904",
            ...
          }
        }
      }
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

share.font.id

Data type: string

Configuration path: .skin.share.font.id

Description: The unique identifier for the share font configuration.

Configuration example:

{
    "skin": {
        ...
        "share": {
          "font": {
            ...
            "id": "custom_share_icons_font_unique_id",
            ...
          },
        },
        ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

share.font.name

Data type: string

Configuration path: .skin.share.font.name

Description: The name of the share font configuration. Used also as name of share font in CSS styles.

Configuration example:

{
    "skin": {
      ...
      "share": {
        "font": {
          ...
          "name": "custom_share_icons_font_name",
          ...
        },
      },
      ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

share.font.src

Data type: string

Configuration path: .skin.share.font.src

Description: The URL from which to load the share font file.

Configuration example:

{
    "skin": {
      ...
      "share": {
        "font": {
          ...
          "src": "https://example.com/share_icons_font.file",
          ...
        },
      },
      ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

share.font.fetch

Data type: boolean

Configuration path: .skin.share.font.fetch

Description: Set to “true” if the player should request a share font file, or “false” if the share font will be available in the HTML document.

Configuration example:

{
    "skin": {
      ...
      "share": {
        "font": {
          ...
          "fetch": true,
          ...
        },
      },
      ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

share.font.size

Data type: string

Configuration path: .skin.share.font.size

Description: The share font size used in the skin theme.

Follow same rules and syntax as CSS font size property.

Configuration example:

{
    "skin": {
      ...
      "share": {
        "font": {
          ...
          "size": "14px",
          ...
        },
      },
      ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

share.font.family

Data type: array

Configuration path: .skin.share.font.family

Description: An array of share font names to use as the font-family in the skin theme CSS styles.

Configuration example:

{
    "skin": {
      ...
      "share": {
        "font": {
          ...
          "family": [ "custom_font_name", "sans-serif"]
          ...
        },
      },
      ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

share.font.variation

Data type: object

Configuration path: .skin.share.font.variation

Description: An object of share font variations to use as the font-variations in the skin theme CSS styles.

Configuration example:

{
    "skin": {
      ...
      "share": {
        "font": {
          ...
          "variation": {
            "FILL": 0,
            "wght": 400,
            "GRAD": 0,
            "opsz": 48
          },
          ...
        },
      },
      ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

share.font.code

Data type: object

Configuration path: .skin.share.font.code

Description: An object containing Unicode share code values ​​with the share name as the key. Like: { "NAME": “UNICODE” }.

Configuration example:

{
    "skin": {
      ...
      "share": {
        "font": {
          ...
          "code": {
            ...
            "code": "e903",
            "mail": "e904"
            ...
          }
          ...
        },
      },
      ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

share.svg

Data type: object

Configuration path: .skin.share.svg

Description: The skin theme’s share icon configuration object when the source is an SVG file.

The SVG file must contain definitions of symbols used as icons with the id property as the icon name.

Field nameTypeDescription
share.svg.idstringThe unique identifier for the svg share icon set.
share.svg.namestringThe name of the svg share icon set.
share.svg.iconsetstringThe URL of the SVG share icon set.
share.svg.sizestringShare icons size.

Example o SVG file:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
    <defs>
    <symbol id="unique-icon-id" viewBox="...">
      <path fill="currentColor" d="..." />
    </symbol>
    </defs>
</svg>

Configuration example:

{
    "skin": {
      "share": {
        "svg": {
          "id": "custom_share_iconset",
          "name": "custom share theme",
          "iconset": "https://example.com/share.iconset.svg",
          "size": "20px"
        }
      }
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

share.svg.id

Data type: string

Configuration path: .skin.share.svg.id

Description: The unique identifier for the share icon SVG configuration.

Configuration example:

{
    "skin": {
      ...
      "share": {
        "svg": {
          ...
          "id": "custom_share_svg_iconset",
          ...
        }
      },
      ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

share.svg.name

Data type: string

Configuration path: .skin.share.svg.name

Description: The name for the share icon SVG configuration.

Configuration example:

{
    "skin": {
      ...
      "share": {
        "svg": {
          ...
          "name": "custom share svg iconset",
          ...
        }
      },
      ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

share.svg.iconset

Data type: string

Configuration path: .skin.share.svg.iconset

Description: The URL from which to load the SVG file.

Configuration example:

{
    "skin": {
      ...
      "share": {
        "svg": {
          ...
          "iconset": "https://example.com/share_iconset.svg",
          ...
        }
      },
      ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

share.svg.size

Data type: string

Configuration path: .skin.share.svg.size

Description: The SVG share icon size used in the skin theme.

Follow same rules and syntax as CSS font size property.

Configuration example:

{
    "skin": {
      ...
      "share": {
        "svg": {
          ...
          "size": "20px",
          ...
        }
      },
      ...
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}
Jump to