Media player for Video and Audio

HTML5 video and audio player with fallback to Flash/Native video player.

The player supports .mp4, .ogv, .3gp and .mov for video and .mp3, .ogg and .wav for audio.

It automatically changes the extension of the request url to fit your browser support. For example, if you load a .mov in Firefox, Safari and Chrome, the file extension will switch to .mp4, while in older Firefox' it will switch to .ogv.

It comes with and extensive set of methods and callbacks, and allows you to easily implement a video player in your webpage and customize interaction to your specific needs.

The player has an optional controller panel with Play/Pause/FF/RW buttons, ready for your custom layout.

It also supports autoplay detection for inline and muted inline playback on iOS and Android.

Functions

Util.videoPlayer

Definition

Name
Util.videoPlayer
Syntax
Node videoPlayer = Util.videoPlayer( [JSON _options ] );

Description

Returns video player node, extended with controller methods and event callbacks. This is just a shorthand version of u.mediaPlayer({type:"video"}). See Util.mediaPlayer for parameter and callback documentation.

Parameters

_options
JSON Optional, JSON object with options as specified for u.mediaPlayer.

Returns

node DIV.videoplayer (videoPlayer) containing video.

Examples

var player = u.videoPlayer();

Returns simple div.videoplayer.

var player = u.videoPlayer({muted:true, controls:{"playpause":true}});

Returns muted div.videoplayer with Play/Pause button.

Uses

JavaScript

none

Manipulator
  • Util.mediaPlayer

Util.audioPlayer

Definition

Name
Util.audioPlayer
Syntax
Node audioPlayer = Util.audioPlayer( [JSON _options ] );

Description

Return audio player node, extended with controller methods and event callbacks. This is just a shorthand version of u.mediaPlayer({type:"audio"}). See Util.mediaPlayer for parameter and callback documentation.

Parameters

_options
JSON Optional, JSON object with options as specified for u.mediaPlayer.

Returns

node DIV.audioplayer (audioPlayer) containing audio.

Examples

var player = u.audioPlayer();

Returns simple div.audioplayer

var player = u.audioPlayer({muted:true, controls:{"playpause":true}});

Return muted div.audioplayer with Play/Pause button

Uses

JavaScript

none

Manipulator
  • Util.mediaPlayer

Util.mediaPlayer

Definition

Name
Util.mediaPlayer
Syntax
Node mediaPlayer = Util.mediaPlayer( [JSON _options ] );

Description

Return media player node (audio/video), extended with controller methods and event callbacks.

Autoplay detection will be performed and make callback to node.ready when result is ready. This will make two variables available on the player, node.can_autoplay and node.can_autoplay_muted so you can deal with browser conditions appropriately.

Parameters

_options
JSON Optional, JSON object with options for player and controls.
Options
type
Type of player - default video
autoplay
Set initial autoplay state - default false
loop
Set initial loop state - default false
muted
Set initial muted state - default false
playsinline
Set initial playsinline state - default false
crossorigin
Set initial crossorigin state for CORS - default anonymous
ff_skip
Time in seconds to skip ahead for Fast Forward. Default: 2s.
rw_skip
Time in seconds to jump back for Rewind. Default: 2s.
controls
Set controls state - default false. Set to true for native controls, or specify custom controls in controls object.
controls.playpause
Inject custom controls div with Play/Pause button
controls.play
Inject custom controls div with Playbutton
controls.pause
Inject custom controls div with Pause button
controls.stop
Inject custom controls div with Stop button
controls.search
Inject custom controls div with FF/RW buttons

Returns

node DIV.audioplayer containing audio-tag or node DIV.videoplayer containing video-tag.

Callbacks

mediaPlayer.ready(event)
when autoplay detection is done.
mediaPlayer.loading(event)
when data is loading
mediaPlayer.canplaythrough(event)
when enough data is loaded to perform uninterrupted playback
mediaPlayer.playing(event)
when playback is begun
mediaPlayer.paused(event)
when playback is paused
mediaPlayer.stalled(event)
when playback is stalling
mediaPlayer.error(event)
On playback error
mediaPlayer.ended(event)
when playback has ended
mediaPlayer.loadedmetadata(event)
when metadata is loaded (duration, title, etc.)
mediaPlayer.loadeddata(event)
when entire source is loaded
mediaPlayer.timeupdate(event)
when playback time is updated

Examples

var player = u.mediaPlayer();

Returns simple div.videoplayer

var player = u.mediaPlayer({controls:{"playpause":true}});

Return div.videoplayer with Play/Pause button.

var player = u.mediaPlayer({type:"audio", controls:{"playpause":true}});

Return div.audioplayer with Play/Pause button.

var player = u.mediaPlayer({type:"video", muted:true, playsinline:true, autoplay:true, controls:{"play":true, "stop":true}});

Returns muted inline autoplaying div.videoplayer with a Play and a Stop button, that works in modern tablet and smartphone browsers.

Uses

JavaScript
  • document.createElement
  • document.removeChild
  • document.removeAttribute
  • document.setAttribute
  • String.match
  • String.replace
  • switch ... case
  • typeof
  • for ... in
Manipulator
  • Util.addClass
  • Util.removeClass
  • Util.hasClass
  • Util.appendElement
  • Util.Events.addEvent
  • Util.Events.removeEvent
  • Util.randomString
  • Util.applyStyles
  • Util.Animation.transition

mediaPlayer.load

Definition

Name
mediaPlayer.load
Syntax
Void = mediaPlayer.load( String src [, JSON _options ] );

Description

Load src into media player. Source is automatically changed to format supported by browser.

Parameters

src
String media src to load
options
JSON Optional, JSON object with options for player and controls.
Options
autoplay
Set initial autoplay state - default false
loop
Set initial loop state - default false
muted
Set initial muted state - default false
playsinline
Set initial playsinline state - default false
crossorigin
Set initial crossorigin state for CORS - default anonymous
ff_skip
Time in seconds to skip ahead for Fast Forward. Default: 2s.
rw_skip
Time in seconds to jump back for Rewind. Default: 2s.
controls
Set controls state - default false. Set to true for native controls, or specify custom controls in controls object.
controls.playpause
Inject custom controls div with Play/Pause button
controls.play
Inject custom controls div with Playbutton
controls.pause
Inject custom controls div with Pause button
controls.stop
Inject custom controls div with Stop button
controls.search
Inject custom controls div with FF/RW buttons

Returns

Void

Examples

var player = u.mediaPlayer(); var scene = u.qs(".scene"); u.ae(scene, player); player.load("/assets/video/1.mp4");

Injects video into div.scene and loads "/assets/media_1.mp4", without beginning playback.

var player = u.videoPlayer(); var scene = u.querySelector(".scene"); u.appendElement(scene, player); player.ready = function() { if(this.can_autoplay) { this.load("/assets/video/1.mov", {autoplay:true, playsinline:true}); } else if(this.can_autoplay_muted) { this.load("/assets/video/1.mov", {muted:true, autoplay:true, playsinline:true}); } else { alert("Sustainable living. We applaud it."); } }

Injects media into div.scene and waits for autoplay detection to make callback to ready, before deciding what to do. If autoplay is supported, it loads "/assets/video/1.mov", and starts playback immediately.

Uses

JavaScript
  • switch ... case
  • typeof
  • for ... in
Manipulator
  • Util.hasClass

mediaPlayer.play

Definition

Name
mediaPlayer.play
Syntax
Promise = mediaPlayer.play( Number position );

Description

Play currently loaded src at beginning or specified position.

Parameters

src
Number position in seconds

Returns

Promise returned by audio.play or video.play.

Examples

var player = u.mediaPlayer(); var scene = u.qs(".scene"); u.ae(scene, player); player.load("/assets/video/1.mov"); player.play(1);

Injects video into div.scene and loads "/assets/video/1.mov", starts playback at 1sec.

Uses

JavaScript
  • switch ... case
  • typeof
  • for ... in
Manipulator
  • Util.hasClass

mediaPlayer.loadAndPlay

Definition

Name
mediaPlayer.loadAndPlay
Syntax
Void = mediaPlayer.loadAndPlay( String src [, JSON _options ] );

Description

Load src into media player. Source is automatically changed to format supported by browser. Playback is begun as soon as canplaythrough event occurs.

Parameters

src
String media src to load
options
JSON Optional, JSON object with options for player and controls.
Options
position
Set initial playback position - default 0
autoplay
Set initial autoplay state - default false
loop
Set initial loop state - default false
muted
Set initial muted state - default false
playsinline
Set initial playsinline state - default false
crossorigin
Set initial crossorigin state for CORS - default anonymous
ff_skip
Time in seconds to skip ahead for Fast Forward. Default: 2s.
rw_skip
Time in seconds to jump back for Rewind. Default: 2s.
controls
Set controls state - default false. Set to true for native controls, or specify custom controls in controls object.
controls.playpause
Inject custom controls div with Play/Pause button
controls.play
Inject custom controls div with Playbutton
controls.pause
Inject custom controls div with Pause button
controls.stop
Inject custom controls div with Stop button
controls.search
Inject custom controls div with FF/RW buttons

Returns

Promise returned by audio.play or video.play.

Examples

var player = u.mediaPlayer(); var scene = u.qs(".scene"); u.ae(scene, player); player.loadAndPlay("/assets/video/1.mov");

Injects video into div.scene loads "/assets/video/1.mov", and begins playback when canplaythrough event occurs.

Uses

JavaScript
  • switch ... case
  • typeof
  • for ... in
Manipulator
  • Util.hasClass

mediaPlayer.pause

Definition

Name
mediaPlayer.pause
Syntax
Void = mediaPlayer.pause();

Description

Pause current playback but stay at current position.

Returns

Void

Examples

var player = u.mediaPlayer(); var scene = u.qs(".scene"); u.ae(scene, player); player.load("/media/media/media_1.mov"); player.play(1); player.pause();

Injects video into div.scene and loads "/media/media/media_1.mov", starts playback at 1sec, and pauses immidately.

Uses

JavaScript
  • switch ... case
  • typeof
  • for ... in
Manipulator
  • Util.hasClass

mediaPlayer.stop

Definition

Name
mediaPlayer.stop
Syntax
Void = mediaPlayer.stop();

Description

Pause current playback and returns to postion 0.

Returns

Void

Examples

var player = u.mediaPlayer(); var scene = u.qs(".scene"); u.ae(scene, player); player.load("/media/media/media_1.mov"); player.play(1); player.stop();

Injects media into div.scene and loads "/media/media/media_1.mov", starts playback at 1sec, and stops immidately, returning to position 0.

Uses

JavaScript
  • switch ... case
  • typeof
  • for ... in
Manipulator
  • Util.hasClass

mediaPlayer.ff

Definition

Name
mediaPlayer.ff
Syntax
Void = mediaPlayer.ff();

Description

Fast forward through media, in steps of ff_skip (default 2 secs).

Returns

Void

Examples

No examples

Uses

JavaScript
  • none
Manipulator
  • none

mediaPlayer.rw

Definition

Name
mediaPlayer.rw
Syntax
Void = mediaPlayer.rw();

Description

Rewinds through media, in steps of rw_skip (default 2 secs).

Returns

Void

Examples

No examples

Uses

JavaScript
  • none
Manipulator
  • none

Files

Main file

  • u-media.js

Segment support files

  • beta-u-media-desktop_light.js

Segment dependencies

desktop_edge
u-media.js + u-events.js + u-dom.js + u-timer.js
desktop_ie11
u-media.js + u-events.js + u-dom.js + u-timer.js
desktop
u-media.js + u-events.js + u-dom.js + u-timer.js
desktop_ie10
u-media.js + u-events.js + u-dom.js + u-dom-desktop_ie10.js + u-timer.js
desktop_ie9
u-media.js + u-events.js + u-dom.js + u-dom-desktop_ie10.js + u-timer.js
desktop_light - BETA
beta-u-media-desktop_light.js + u-events.js + u-dom.js + u-timer.js + u-string.js + u-flash.js
tablet
u-media.js + u-events.js + u-dom.js + u-timer.js
tablet_light
u-media.js + u-events.js + u-dom.js + u-timer.js
smartphone
u-media.js + u-events.js + u-dom.js + u-timer.js
mobile - BETA
beta-u-media-desktop_light.js + u-events.js + u-dom.js + u-timer.js + u-string.js + u-flash.js
mobile_light
not tested
tv - BETA
beta-u-media-desktop_light.js + u-events.js + u-dom.js + u-timer.js + u-string.js + u-flash.js
seo
not supported