Options
All
  • Public
  • Public/Protected
  • All
Menu

Progress bar element.

description

This class creates a progress bar to track how much time media has been played, downloaded and its current time, using semantic markup, such as input range and progress elements.

see

https://codepen.io/mi-lee/post/an-overview-of-html5-semantics

see

https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player#Progress

see

https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/buffering_seeking_time_ranges

class

Progress

implements

PlayerComponent

Hierarchy

  • Progress

Implements

Index

Constructors

Properties

Methods

Object literals

Constructors

constructor

Properties

Private buffer

buffer: HTMLProgressElement

Element that displays the media's downloaded amount.

type

HTMLProgressElement

memberof

Progress

Private forcePause

forcePause: boolean

Flag that pauses and then plays media properly (if media was played) when clicking in the progress bar.

type

{boolean}

memberof

Progress

Private played

played: HTMLProgressElement

Element that displays the media's played time.

type

HTMLProgressElement

memberof

Progress

Private player

player: Player

Instance of OpenPlayer.

type

Player

memberof

Progress

Private progress

progress: HTMLDivElement

Container for progress bar elements (buffered, played and slider input).

type

HTMLDivElement

memberof

Progress

Private slider

slider: HTMLInputElement

Element that allows changing media's current position (time).

type

HTMLInputElement

memberof

Progress

Private tooltip

tooltip: HTMLSpanElement

Element that displays the current media time when hovering in the progress bar.

type

HTMLSpanElement

memberof

Progress

Methods

create

  • create(): void

destroy

  • destroy(): void
  • Remove HTML associated to specific OpenPlayer's element.

    This method must include the removal of its previously set events.

    memberof

    PlayerComponent

    Returns void

Object literals

Private events

events: object

Events that will be triggered in Progress element:

  • container (to display tooltip when hovering in the progress bar)
  • global (to hide tooltip once user moves out of the progress bar)
  • media (to capture different states of the current time and duration in the time rail)
  • slider (events to be triggered when clicking or sliding time rail)
type

EventsList

memberof

Progress

container

container: object

Type declaration

global

global: object

Type declaration

media

media: object

Type declaration

slider

slider: object

Type declaration

Generated using TypeDoc