Used to access the chrome elements. Can be used to add elements to the player

Methods

Chrome(di)

Item Value
Scope Constructor
Returns Video

Parameters

Parameter Description
Object di DI object

Initialise the chrome plugin. Handles the building and adding of the player chrome/skin


Properties

chromeEl

Item Value
Scope public
Returns HTMLElement div

controlBar

Item Value
Scope public
Returns HTMLElement div

playPauseBtn

Item Value
Scope public
Returns HTMLElement a

Only available after buildchrome has been run


nextBtn

Item Value
Scope public
Returns HTMLElement a

Only available after buildchrome has been run


previousBtn

Item Value
Scope public
Returns HTMLElement a

Only available after buildchrome has been run


volumeBtn

Item Value
Scope public
Returns HTMLElement a

Only available after buildchrome has been run


fullscreenBtn

Item Value
Scope public
Returns HTMLElement a

Only available after buildchrome has been run


seekBarContainer

Item Value
Scope public
Returns HTMLElement div

Only available after buildchrome has been run


seekBar

Item Value
Scope public
Returns HTMLElement div

Only available after buildchrome has been run


bufferBar

Item Value
Scope public
Returns HTMLElement div

Only available after buildchrome has been run


timecode

Item Value
Scope public
Returns HTMLElement div

Only available after buildchrome has been run


hidden

Item Value
Scope public
Returns Boolean

Is the chrome hidden


Events

chromePluginInitialised

Fired on plugin being initialised


chromePluginReady

Fired on plugin being ready to interact with


Listeners

buildchrome

creates the controls and adds them to the dom


showChrome

shows the chrome


hideChrome

hide the chrome


addLozenge

Parameters

Parameter Description
Object lozenge An object representing the lozenge object

adds a lozenge at the specified position, dimensions, opacity with an optional link

{
    data: {
        url: 'http://mywebsite.com/logo.png',
        href: 'http://mywebsite.com',
        x: '20px',
        y: '20px',
        width: '150px', // optional uses original dimensions if not set
        height: '50px', // optional 
        opacity: 0.6
    }
}

addChromeElement

Parameters

Parameter Description
HTMLElement element A DOM element to be added to the player chrome

parent - inserts as a child of this element as the last child
prepend - boolean which is only valid with parent. If true then adds as the first child
before - inserts before this element
after - inserts after this element

adds a div to the chrome as a child of the control bar

{
    data: {
        name: 'myCustomButton'
        element: document.createElement('a')
        parent: player.chrome.controlBar,
    }
}