Player

Player

new Player(element, optionsopt)

Source:
Parameters:
Name Type Attributes Description
element jQuery Element when player will init
options Object <optional>
Name Type Attributes Default Description
autoplay Boolean <optional>
 false When present, the video will automatically start playing as soon as it can do so without stopping.
height String | Number <optional>
 'auto' Height of video container
width String <optional>
 Width of video container
loop Boolean <optional>
 false When present, it specifies that the video will start over again, every time it is finished.
muted Boolean <optional>
 false When present, it specifies that the audio output of the video should be muted.
preload String <optional>
 'metadata' Can be ('auto'|'metadata'|'none')
poster String <optional>
 Path to poster of video
svgPath String <optional>
 Path to svg sprite for icons
rate Object <optional>
 Rate options
Name Type Attributes Default Description
step Number <optional>
 0.25 Step of increase/decrease by rate control
min Number <optional>
 0.5 Min of rate
max Number <optional>
 4.0 Max of rate
default Number <optional>
 1
playback Object <optional>
 Playback options
Name Type Attributes Description
step Object <optional>
Name Type Attributes Default Description
short Nubmer <optional>
 5
medium Nubmer <optional>
 30
long Nubmer <optional>
 60
controls Obejct <optional>
 Object of controls
Name Type Attributes Description
common Array.<String> <optional>
 Array of controls for default view
fullscreen Array.<String> <optional>
 Array of control for fullsreen view
mini Array.<String> <optional>
 Array of control for miniplayer
excludeControls Object <optional>
 Object of exclude controls. Structure is the same as that of options.controls
volume Object <optional>
 Volume's options
Name Type Attributes Default Description
default Number <optional>
 0.4 Default volume
mutelimit Number <optional>
 0.05 Delta when volume is muted
step Number <optional>
 0.05
keybinding Array.<Object> <optional>
 Object with keybinding options, when key it's name of key binding, and value it's key binding settings
Name Type Attributes Description
key Number <optional>
 Code of key binding (for example 32 it's space)
info Array.<String> <optional>
 Array of keystrokes order
description String Description of key binding
fn function Callback
miniplayer Object | Boolean <optional>
 false
Name Type Attributes Description
width String <optional>
 Width of miniplayer container
width String <optional>
 MiniPlayer's width
sectionContainer String <optional>
 Selector for sections
plugins Object <optional>
 Keys of objects are name of plugin, value - plugin options
data String | Object <optional>
 Url or JSON with data for player
Name Type Attributes Description
sections Array <optional>
 Sections array

Extends

  • Component

Members

(static) getComponent

Get by name registered component
Source:

(static) getControl

Register control
Source:

(static) registerComponent

Register component
Source:
Example
Player.registerComponent('ErrorDisplay', ErrorDisplay);

(static) registerControl

Get by name registered control
Source:
Example
Player.registerControl('backward', BackwardControl);

(static) secondsToTime

Convert seconds to format string 'hh?:mm:ss'
Source:

Player#currentTime :Nubmer

Get and set the current playback position in the audio/video (in seconds) Getter and setter
Source:
Type:
  • Nubmer

Player#duration :Nubmer

Returns the length of the current audio/video (in seconds) Getter
Source:
Type:
  • Nubmer

Player#ended :Boolean

Returns whether the playback of the audio/video has ended or not Getter
Source:
Type:
  • Boolean

Player#error :MediaError|String

Returns and set whether the playback of the audio/video has ended or not Getter and setter
Source:
Type:
  • MediaError | String
Fires:

Player#height :Number

Return the height of player. If you want get height only of video element, use this.video.height or whatever
Source:
Type:
  • Number

Player#videoHeight :Number

Return unnecessary video heigth
Source:
Type:
  • Number

Player#view :String

Set and get player view. View Can be 'common', 'fullscreen', 'mini'w
Source:
Type:
  • String

this.element :jQuery

DOM container to hold all player
Source:
Type:
  • jQuery

this.errorDisplay :ErrorDisplay

Error display component.
Source:
Type:
  • ErrorDisplay

this.innerElement :jQuery

DOM container to hold inner of player
Source:
Type:
  • jQuery

this.playButton :PlayButton

Play button component.
Source:
Type:
  • PlayButton

this.splashIcon :SplashIcon

Splash icon component.
Source:
Type:
  • SplashIcon

this.video :Entity

Video html5 component
Source:
Type:
  • Entity

userActive :Boolean

Source:
Type:
  • Boolean

Methods

(static) plugin(name, fn)

Static helper for creating a plugins for leplayer
Source:
Parameters:
Name Type Description
name String The name of plugin
fn function Plugin init function
Example
Player.plugin('helloWorld', function(pluginOptions) {
   const player = this;
   player.on('click', () => console.log('Hello world'));
})

(static) preset(name, fn)

Static helper for creating a plugins for leplayer
Source:
Parameters:
Name Type Description
name String The name of plugin
fn function | Object Plugin init function
Example
Player.preset('common', {
    width : '100%',
    plugins : {
        miniplayer : true
    }
});

changeQuality(quality)

Change source and save time, rate
Source:
Parameters:
Name Type Description
quality Object
Name Type Attributes Description
title String <optional>
 The name of qualitut e.x SD or HD
url String

createElement()

Remove unnecessary attributes, and set some attrs from options (loop, poster etc...). Create main DOM objects
Source:

exitFullscreen()

Exit fullscreen
Source:
Fires:

getControls(name) → {ControlCollection}

Get ControlCollection of Player by name (e.x 'common', 'fullscreen')
Source:
Parameters:
Name Type Description
name String Name of ControlCollection
Returns:
Type:
ControlCollection

getData() → {jQuery.promise}

Get some data for player
Source:
Returns:
Type:
jQuery.promise
Promise

getWidth() → {Number}

Return the width of player.
Source:
Returns:
Type:
Number
Width in px

load()

Begin loading the src data
Source:

onDelView(view) → {Player}

On del view callback
Source:
Parameters:
Name Type Description
view String View name
Returns:
Type:
Player
this
Example
const player = new Player($('#video'), options);
player.onDelView('mini', () => console.log('Exit miniplayer')

onSetView(view) → {Player}

On set view callback
Source:
Parameters:
Name Type Description
view String View name
Returns:
Type:
Player
this
Example
const player = new Player($('#video'), options);
player.onSetView('mini', () => console.log('Miniplayer yeah!')
    .onSetView('fullscreen', () => console.log('Fullscreen boom!')
    .onSetView('common', () => console.log('Common view - lol');

pause()

Pauses the currently playing video
Source:

play()

Starts playing the video
Source:
Example
const player = new Player($("#video"),options);
$('.some-button').on('click', () => player.play());

requestFullscreen()

Request fullscreen
Source:
Fires:

toggleFullscreen()

Toggle fullscreen
Source:
Fires:

togglePlay()

Toggle the currently playing video
Source:

Events

canplay

canplay html5 media event
Source:

canplaythrough

canplaythrough html5 media event
Source:

dbclick

dblclick
Source:

dbclick

dblclick
Source:

durationchange

durationchange player event
Source:

ended

ended html5 media event
Source:

error

error event
Properties:
Name Type Description
error MediaError
Source:
Example
const player = new Player($('#video'), options);
player.on('error', (e, data) => console.error(data.error));

firstplay

First play event
Source:

fullscreenchange

fullscreenchange html5 media event
Source:

inited

Player init event
Source:

loadstart

loadstart player event
Source:

pause

pause html5 media event
Source:

play

play html5 media event
Source:

playing

playing html5 media event
Source:

progress

progress html5 media event
Source:

qualitychange

qualitychange html5
Source:

rate

rate html5 media event
Source:

sectionsinit

Sections init event
Source:
Example
const player = new Player($('#video'), options);
player.on('sectionsinit', (e, data) => cosnole.log(data));

seeked

seeked html5 media event
Source:

seeking

seeking html5 media event
Source:

timeupdate

timeupdate html5 media event
Source:

trackschange

qualitychange html5
Source:

useractive

User active event
Source:

volumechange

volumechange html5 media event
Source:

waiting

waiting html5 media event
Source: