API Docs for: 0.2.41
Show:

Playback Class

Extends UIObject
Module: base

An abstraction to represent a generic playback, it's like an interface to be implemented by subclasses.

Constructor

Playback

()

Item Index

Properties

Methods

$

(
  • selector
)
HTMLElement
selects within the component.

Parameters:

  • selector String
    a selector to find within the component.

Returns:

HTMLElement: an element, if it exists.

Example:

fullScreenBarUIComponent.$('.button-full') //will return only .button-full within the component

_ensureElement

() private
ensures the creation of this ui component

canPlay

(
  • source
  • [mimeType]
)
Boolean static

checks if the playback can play a given source If a mimeType is provided then this will be used instead of inferring the mimetype from the source extension.

Parameters:

  • source String

    the given source ex: http://example.com/play.mp4

  • [mimeType] String optional

    the given mime type, ex: 'application/vnd.apple.mpegurl'

Returns:

Boolean:

true if the playback is playable, otherwise false

constructor

(
  • options
  • i18n
)

Inherited from BaseObject but overwritten in src/base/playback.js:50

Parameters:

  • options Object

    the options object

  • i18n Strings

    the internationalization component

delegateEvents

(
  • events
)
UIObject
delegates all the original events on element to its callbacks

Parameters:

Returns:

UIObject: itself

destroy

()

destroys the playback, removing it from DOM

getDuration

() Number

gets the duration in seconds

Returns:

Number:

duration (in seconds) of the current source

getPlaybackType

() String

gets the playback type ('vod', 'live', 'aod')

Returns:

String:

you should write the playback type otherwise it'll assume 'no_op'

Example:

html5VideoPlayback.getPlaybackType() //vod
html5AudioPlayback.getPlaybackType() //aod
html5VideoPlayback.getPlaybackType() //live
flashHlsPlayback.getPlaybackType() //live

getStartTimeOffset

() Number

The time that "0" now represents relative to when playback started. For a stream with a sliding window this will increase as content is removed from the beginning.

Returns:

Number:

time (in seconds) that time "0" represents.

isHighDefinitionInUse

() Boolean

checks if the playback is in HD.

Returns:

Boolean:

true if the playback is playing in HD, otherwise false

isPlaying

() Boolean

checks if the playback is playing.

Returns:

Boolean:

true if the current playback is playing, otherwise false

listenTo

(
  • obj
  • name
  • callback
  • context
)

Inherited from Events: src/base/events.js:171

listen to an event indefinitely for a given obj

Parameters:

Example:

this.listenTo(this.core.playback, Events.PLAYBACK_PAUSE, this.callback)

listenToOnce

(
  • obj
  • name
  • callback
  • context
)

Inherited from Events: src/base/events.js:183

listen to an event once for a given obj

Parameters:

Example:

this.listenToOnce(this.core.playback, Events.PLAYBACK_PAUSE, this.callback)

off

(
  • name
  • callback
  • context
)

Inherited from Events: src/base/events.js:94

stop listening to an event

Parameters:

on

(
  • name
  • callback
  • context
)

Inherited from Events: src/base/events.js:62

listen to an event indefinitely, if you want to stop you need to call off

Parameters:

once

(
  • name
  • callback
  • context
)

Inherited from Events: src/base/events.js:77

listen to an event only once

Parameters:

pause

()

pauses the playback.

play

()

plays the playback.

remove

() UIObject
removes the ui component from DOM

Returns:

UIObject: itself

render

() UIObject
render the component, usually attach it to a real existent element

Returns:

UIObject: itself

seek

(
  • time
)

seeks the playback to a given time in seconds

Parameters:

  • time Number

    should be a number between 0 and the video duration

seekPercentage

(
  • time
)

seeks the playback to a given percentage in percentage

Parameters:

  • time Number

    should be a number between 0 and 100

setElement

(
  • element
  • delegate
)
UIObject
set element to el and $el

Parameters:

Returns:

UIObject: itself

stop

()

stops the playback.

stopListening

(
  • obj
  • name
  • callback
)

Inherited from Events: src/base/events.js:148

stop listening an event for a given object

Parameters:

tagName

() String
gets the tag name for the ui component

Returns:

String: tag's name

trigger

(
  • name
)

Inherited from Events: src/base/events.js:130

triggers an event given its name

Parameters:

undelegateEvents

() UIObject
undelegats all the events

Returns:

UIObject: itself

volume

(
  • value
)

sets the volume for the playback

Parameters:

  • value Number

    a number between 0 (muted) to 100 (max)

Properties

$el

HTMLElement
the dom element wrapped by $

AOD

String static

a playback type for audio on demand

attributes

Object
a literal object mapping attributes and values to the element element's attribute name and the value the attribute value

Example:


class MyButton extends UIObject {
   constructor(options) { super(options) }
   get attributes() { return { class: 'my-button'} }
}

// MyButton.el.className will be 'my-button'

buffering

Boolean

Determine if the playback is having to buffer in order for playback to be smooth. (i.e if a live stream is playing smoothly, this will be false)

cid

String
a unique id prefixed with 'c', c1, c232

el

HTMLElement
the dom element itself

ended

Boolean

Determine if the playback has ended.

events

Object
a literal object mapping element's events to methods

Example:


class MyButton extends UIObject {
  constructor(options) {
    super(options)
    this.myId = 0
  }
  get events() { return { 'click': 'myClick' } }
  myClick(){ this.myId = 42 }
}

// when you click on MyButton the method myClick will be called

i18n

Strings

The internationalization plugin.

isAudioOnly

Boolean

Determine if the playback does not contain video/has video but video should be ignored.

isReady

Boolean true if the current playback is ready, otherwise false

checks if the playback is ready.

LIVE

String static

a playback type for live video

NO_OP

String static

a default playback type

options

Object

returns the object options

type

String static

the plugin type

uniqueId

String

a unique id prefixed with 'o', o1, o232

VOD

String static

a playback type for video on demand

Events

CONTAINER_BITRATE

Inherited from Events: src/base/events.js:540

Fired when the container updates its bitrate

Event Payload:

  • bitrate Object

    Data bitrate object

    • [bandwidth] Number optional

      bitrate bandwidth when it's available

    • [width] Number optional

      playback width (ex: 720, 640, 1080)

    • [height] Number optional

      playback height (ex: 240, 480, 720)

    • [level] Number optional

      playback level when it's available, it could be just a map for width (0 => 240, 1 => 480, 2 => 720)

CONTAINER_HIGHDEFINITIONUPDATE

Inherited from Events: src/base/events.js:647

Fired when container updates its video quality

Event Payload:

  • isHD true Boolean

    when is on HD, false otherwise

CONTAINER_LOADEDMETADATA

Inherited from Events: src/base/events.js:565

Fired when the container loaded its metadata

Event Payload:

  • metadata Object

    Data settings object

    • [duration] Number optional

      the playback duration

    • [data] Object optional

      extra meta data

CONTAINER_LOADEDTEXTTRACK

Inherited from Events: src/base/events.js:578

Fired when a text track is loaded and available on container for display

CONTAINER_MEDIACONTROL_HIDE

Inherited from Events: src/base/events.js:662

Fired when the media control hides

CONTAINER_MEDIACONTROL_SHOW

Inherited from Events: src/base/events.js:656

Fired when the media control shows

CONTAINER_OPTIONS_CHANGE

Inherited from Events: src/base/events.js:672

Fired when the options were changed for the container

CONTAINER_PLAYBACKSTATE

Inherited from Events: src/base/events.js:529

Fired when the container internal state changes

Event Payload:

  • state Object

    Data state object

    • [type] String optional

      the playback type

CONTAINER_PROGRESS

Inherited from Events: src/base/events.js:597

Fired when the container is downloading the media

Event Payload:

  • progress Object

    Data progress object

    • [start] Number optional

      initial downloaded content

    • [current] Number optional

      current dowloaded content

    • [total] Number optional

      total content to be downloaded

CONTAINER_READY

Inherited from Events: src/base/events.js:558

Fired when the container is ready

CONTAINER_SEEK

Inherited from Events: src/base/events.js:620

Fired when the container seeks the video

Event Payload:

  • time Number

    the current time in seconds

CONTAINER_SETTINGSUPDATE

Inherited from Events: src/base/events.js:641

Fired when the container changes any settings (volume, seek and etc)

CONTAINER_STATE_BUFFERFULL

Inherited from Events: src/base/events.js:635

Fired when the container filled the buffer

CONTAINER_STATE_BUFFERING

Inherited from Events: src/base/events.js:629

Fired when container is buffering

CONTAINER_TIMEUPDATE

Inherited from Events: src/base/events.js:585

Fired when the time is updated on container

Event Payload:

  • progress Object

    Data progress object

    • [current] Number optional

      current time

    • [total] Number optional

      total time

CORE_CONTAINERS_CREATED

Inherited from Events: src/base/events.js:488

Fired when the containers are created

CORE_FULLSCREEN

Inherited from Events: src/base/events.js:506

Fired when the fullscreen state change

Event Payload:

  • whether Boolean

    or not the player is on fullscreen mode

CORE_OPTIONS_CHANGE

Inherited from Events: src/base/events.js:494

Fired when the options were changed for the core

CORE_READY

Inherited from Events: src/base/events.js:500

Fired after creating containers, when the core is ready

CORE_SCREEN_ORIENTATION_CHANGED

Inherited from Events: src/base/events.js:513

Fired when the screen orientation has changed. This event is trigger only for mobile devices.

Event Payload:

  • screen Object

    An object with screen orientation screen object

    • [event] Object optional

      window resize event object

    • [orientation] String optional

      screen orientation (ie: 'landscape' or 'portrait')

MEDIACONTROL_CONTAINERCHANGED

Inherited from Events: src/base/events.js:727

Fired when the container was changed

MEDIACONTROL_FULLSCREEN

Inherited from Events: src/base/events.js:681

Fired when the player enters/exit on fullscreen

MEDIACONTROL_HIDE

Inherited from Events: src/base/events.js:693

Fired when the media control hides

MEDIACONTROL_MOUSELEAVE_SEEKBAR

Inherited from Events: src/base/events.js:707

Fired when mouse leaves the seekbar

Event Payload:

  • event the Object

    javascript event

MEDIACONTROL_MOUSEMOVE_SEEKBAR

Inherited from Events: src/base/events.js:699

Fired when mouse enters on the seekbar

Event Payload:

  • event the Object

    javascript event

MEDIACONTROL_NOTPLAYING

Inherited from Events: src/base/events.js:721

Fired when the media is not being played

MEDIACONTROL_PLAYING

Inherited from Events: src/base/events.js:715

Fired when the media is being played

MEDIACONTROL_SHOW

Inherited from Events: src/base/events.js:687

Fired when the media control shows

PLAYBACK_BITRATE

Inherited from Events: src/base/events.js:372

Fired when playback updates its bitrate

Event Payload:

  • bitrate Object

    Data bitrate object

    • [bandwidth] Number optional

      bitrate bandwidth when it's available

    • [width] Number optional

      playback width (ex: 720, 640, 1080)

    • [height] Number optional

      playback height (ex: 240, 480, 720)

    • [level] Number optional

      playback level when it's available, it could be just a map for width (0 => 240, 1 => 480, 2 => 720)

PLAYBACK_BUFFERFULL

Inherited from Events: src/base/events.js:335

Fired when the playback has enough in the buffer to be able to play smoothly, after previously being unable to do this.

This corresponds to the playback buffering property being false.

PLAYBACK_BUFFERING

Inherited from Events: src/base/events.js:325

Fired when the playback starts having to buffer because playback can currently not be smooth.

This corresponds to the playback buffering property being true.

PLAYBACK_DVR

Inherited from Events: src/base/events.js:423

Fired when DVR becomes enabled/disabled.

Event Payload:

  • state Boolean

    true if dvr enabled

PLAYBACK_ENDED

Inherited from Events: src/base/events.js:434

Fired when the media for a playback ends.

Event Payload:

  • name String

    the name of the playback

PLAYBACK_ERROR

Inherited from Events: src/base/events.js:469

Fired if an error occurs in the playback.

Event Payload:

  • error Object

    An object containing the error details

  • name String

    Playback name

PLAYBACK_HIGHDEFINITIONUPDATE

Inherited from Events: src/base/events.js:364

Fired when playback updates its video quality

Event Payload:

  • isHD true Boolean

    when is on HD, false otherwise

PLAYBACK_LEVEL_SWITCH_END

Inherited from Events: src/base/events.js:405

Fired when the playback ends the level switch

PLAYBACK_LEVEL_SWITCH_START

Inherited from Events: src/base/events.js:398

Fired when the playback starts to switch level

PLAYBACK_LEVELS_AVAILABLE

Inherited from Events: src/base/events.js:388

Fired when the playback has its levels

Event Payload:

  • levels the Array

    ordered levels, each one with the following format {id: 1, label: '500kbps'} ps: id should be a number >= 0

  • initial the Number

    initial level otherwise -1 (AUTO)

PLAYBACK_LOADEDMETADATA

Inherited from Events: src/base/events.js:352

Fired when playback loaded its metadata

Event Payload:

  • metadata Object

    Data settings object

    • [duration] Number optional

      the playback duration

    • [data] Object optional

      extra meta data

PLAYBACK_PAUSE

Inherited from Events: src/base/events.js:457

Fired when the media for a playback pauses.

PLAYBACK_PLAY

Inherited from Events: src/base/events.js:447

Fired when the media for a playback starts playing. This is not necessarily when the user requests play() The media may have to buffer first. I.e. isPlaying() might return true before this event is fired, because isPlaying() represents the intended state.

PLAYBACK_PLAY_INTENT

Inherited from Events: src/base/events.js:441

Fired when user requests play()

PLAYBACK_PLAYBACKSTATE

Inherited from Events: src/base/events.js:413

Fired when playback internal state changes

Event Payload:

  • state Object

    Data state object

    • [type] String optional

      the playback type

PLAYBACK_PROGRESS

Inherited from Events: src/base/events.js:291

Fired when the playback is downloading the media

Event Payload:

  • progress Object

    Data progress object

    • [start] Number optional

      start position of buffered content at current position

    • [current] Number optional

      end position of buffered content at current position

    • [total] Number optional

      total content to be downloaded

  • buffered Array

    array of buffered segments ({start, end}). [Only for supported playbacks]

PLAYBACK_READY

Inherited from Events: src/base/events.js:319

Fired when playback is ready

PLAYBACK_SETTINGSUPDATE

Inherited from Events: src/base/events.js:346

Fired when playback changes any settings (volume, seek and etc)

PLAYBACK_STOP

Inherited from Events: src/base/events.js:463

Fired when the media for a playback is stopped.

PLAYBACK_TIMEUPDATE

Inherited from Events: src/base/events.js:307

Fired when the time is updated on playback

Event Payload:

  • progress Object

    Data progress object

    • [current] Number optional

      current time

    • [total] Number optional

      total time

PLAYER_ENDED

Inherited from Events: src/base/events.js:247

Fired when player ends the video

PLAYER_ERROR

Inherited from Events: src/base/events.js:260

Fired when player receives an error

Event Payload:

PLAYER_FULLSCREEN

Inherited from Events: src/base/events.js:222

Fired when player changes its fullscreen state

Event Payload:

  • whether Boolean

    or not the player is on fullscreen mode

PLAYER_PAUSE

Inherited from Events: src/base/events.js:235

Fired when player pauses

PLAYER_PLAY

Inherited from Events: src/base/events.js:229

Fired when player starts to play

PLAYER_READY

Inherited from Events: src/base/events.js:209

Fired when the player is ready on startup

PLAYER_RESIZE

Inherited from Events: src/base/events.js:215

Fired when player resizes

Event Payload:

  • currentSize Object

    an object with the current size

PLAYER_SEEK

Inherited from Events: src/base/events.js:253

Fired when player seeks the video

Event Payload:

  • time Number

    the current time in seconds

PLAYER_STOP

Inherited from Events: src/base/events.js:241

Fired when player stops

PLAYER_TIMEUPDATE

Inherited from Events: src/base/events.js:267

Fired when the time is updated on player

Event Payload:

  • progress Object

    Data progress object

    • [current] Number optional

      current time

    • [total] Number optional

      total time

PLAYER_VOLUMEUPDATE

Inherited from Events: src/base/events.js:279

Fired when player updates its volume

Event Payload:

  • volume Number

    the current volume