MediaControls

function

MediaControls()

Option name	Type	Description
selector	domelement_or_querystring_or_jqueryobject	The element that wraps the controls HTML
options	object	Object containing the settings for the controls fade boolean:false If set to true, the controls will show and hide via a simple fade slide boolean:false If set to true, the controls will show and hide by sliding into view from the bottom. This requires selector to have a style of overflow:hidden delay number: 1000 The length of idle mouse time to wait before hiding the controls duration number: 300 The length of time a fade of hide animation takes to play easing string: "linear" The easing function to use during a show or hide of the controls mobileMode boolean: false If true, controls functionality will not be enabled, except for the large play button that covers a video. When clicked, this button will be hidden so that default controls can be accessed handlePositioning string: "outside" This is an option for the progress bar. "inside" keeps the handle within it's progress bar, whereas "outside" considers the handle to be positioned about it's center, and will allow it to poke out the left and right sides of the progress bar

Dependencies:

NATION.Utils
NATION.EventDispatcher
Either NATION.Animation or jQuery
Optional NATION.ProgressBar if a progress bar is required

About:

Controls for use with audio and video players. Has support for play/pause button, mute button, progress bar, full screen button, current time display, duration display, and a play/pause area over a video

Each button is optional. The class will look for elements within selector and enable them if it finds them. Below are the classnames to use for each feature:

.js-play-button or .play-button for the play/pause toggle
.js-progress-bar or .progress-bar for the draggable progress bar
.js-video-overlay or .video-overlay for the large transparent play/pause button that sits over the video
.js-mute-button or .mute-button for the mute/unmute toggle
.js-full-screen-button or .full-screen-button for the enter/exit full screen toggle
.js-current-time or .current-time for the element that will contain the current video play time
.js-duration or .duration for the element that will contain the full length of the video

Example

PLAY_CLICKED

property

MediaControls.prototype.PLAY_CLICKED

Event that fires when the play button has been clicked

PAUSE_CLICKED

property

MediaControls.prototype.PAUSE_CLICKED

Event that fires when the pause button has been clicked

MUTE_CLICKED

property

MediaControls.prototype.MUTE_CLICKED

Event that fires when the mute button has been clicked

UNMUTE_CLICKED

property

MediaControls.prototype.UNMUTE_CLICKED

Event that fires when the unmute button has been clicked

PROGRESS_CLICKED

property

MediaControls.prototype.PROGRESS_CLICKED

Event that fires when the progress bar has been clicked

ENTER_FULL_SCREEN_CLICKED

property

MediaControls.prototype.ENTER_FULL_SCREEN_CLICKED

Event that fires when the 'enter full screen' button has been clicked

EXIT_FULL_SCREEN_CLICKED

property

MediaControls.prototype.EXIT_FULL_SCREEN_CLICKED

Event that fires when the 'exit full screen' button has been clicked

HANDLE_MOUSE_DOWN

property

MediaControls.prototype.HANDLE_MOUSE_DOWN

Event that fires when the user has pressed down on the handle and is about to start dragging

HANDLE_DRAGGED

property

MediaControls.prototype.HANDLE_DRAGGED

Event that is fired each time the user moves their mouse horizontally while clicked down on the handle

HANDLE_RELEASED

property

MediaControls.prototype.HANDLE_RELEASED

Event that fires when the handle has been released by the user

OVERLAY_HIDDEN

property

MediaControls.prototype.OVERLAY_HIDDEN

Event that fires when the large play button over the video has been hidden (mobileMode only)

setProgress

method

MediaControls.prototype.setProgress()

Option name	Type	Description
percentage	number	Percentage to set progress bar to, between 0 and 1

Set play progress percentage

setDisplayedDuration

method

MediaControls.prototype.setDisplayedDuration()

Option name	Type	Description
timeString	string	This can be any string at all, which will be shown as the media duration

Set the string shown in the .js-duration/.duration element (if one exists)

setDisplayedCurrentTime

method

MediaControls.prototype.setDisplayedCurrentTime()

Option name	Type	Description
timeString	string	This can be any string at all, which will be shown as the media's current timestamp

Set the string shown in the .js-current-time/.current-time element (if one exists)

setLoaded

method

MediaControls.prototype.setLoaded()

Option name	Type	Description
percentage	number	Percentage between 0 and 1
adjustHitArea	boolean	Match clickable hitarea to loaded bar

Set the percentage loaded

getRequestedPercentage

method

MediaControls.prototype.getRequestedPercentage() ->number

Returns the percentage the user wants to scan to, between 0 and 1

getControlsShowing

method

MediaControls.prototype.getControlsShowing() ->boolean

Returns whether controls are currently visible or not

showPlayButton

method

MediaControls.prototype.showPlayButton()

Switches play button to 'not currently playing' state

showPauseButton

method

MediaControls.prototype.showPauseButton()

Switches play button to 'currently playing' state

show

method

MediaControls.prototype.show()

Show the controls

hide

method

MediaControls.prototype.hide()

Hide the controls

startAutoHiding

method

MediaControls.prototype.startAutoHiding()

Start the automatic hiding of controls after a period of idle mouse movement

showLargePlayButton

method

MediaControls.prototype.showLargePlayButton()

Shows large play button that sits over the video

hideLargePlayButton

method

MediaControls.prototype.hideLargePlayButton()

Hides the large play button. This means users can click directly on the YouTube video

showMuteButton

method

MediaControls.prototype.showMuteButton()

Show the mute button (ie. the sound is currently on)

showUnMuteButton

method

MediaControls.prototype.showUnMuteButton()

Show the unmute button (ie. the sound is currently off)