mediaplayer

jme element class

mediaplayer

prefered elements

div

jme pseudo classes

media state classes

state-idle

state-waiting

state-playing

state-initial

state-ended

state-error

user state classes

focusenter

useractive

fover

(:hover)

jme content attributes

controlbar

controls

jme interface

{
				property boolean controlbar;
				property boolean fullscreen;
				readonly property jQuery media; 
				jQuery addControls(controls);
				readonly property string embedUrl;
				jQuery getIframe([width, height]);
			};

Using jme pseudo classes to build the user interface.

		
			.mediaplayer .media-controls {
				transition: all 400ms ease 0s;
			}
			/* hide player controls, if mediaelement is playing,... */
			.mediaplayer.state-playing .media-controls {
				opacity: 0;
			}
			/* ...but show controls if user is moving his mouse */
			.mediaplayer.useractive .media-controls {
				opacity: 1;
			}
		
	

Using jme interface to switch to custom styleable controls:

		
			$('div.mediaplayer').jmeProp('controlbar', true);
		
	

Using jme interface to toggle fullscreen:

		
			$('div.mediaplayer').jmeProp('fullscreen', function(i, state){
				return !state;
			});
		
	

Dynamically add a new control to a mediaplayer:

		
			$('div.mediaplayer')
				.jmeFn('addControls', $('<button class="play-pause">play/pause</button>').prependTo('body') )
			;
		
	

JME extensions for native audio/video element

elements

audio

video

jme interface

{
				readonly property jQuery player;
				property mixed srces;
				readonly property boolean isPlaying;
				readonly property number progress;
				jQuery togglePlay();
				Rangearray concerningRange([type:string ("buffered"), time:string (currentTime)]);
				formatedTime formatTime(seconds:number[, format:Array]); 
			};

play-pause button

jme element class

play-pause

prefered elements

button

jme pseudo classes

state-paused, state-playing

jme interface

{
				readonly property jQuery player;
				readonly property jQuery media;
			};

mute-unmute button

jme element class

mute-unmute

prefered elements

button

jme pseudo classes

state-mute, state-unmute

jme interface

{
				readonly property jQuery player;
				readonly property jQuery media;
			};

buffer-progress

jme element class

buffer-progress

prefered elements

div

jme interface

{
				readonly property jQuery player;
				readonly property jQuery media;
				readonly proptery Number progress;
			};

volume-slider

jme element class

volume-slider

prefered elements

div

jme interface

{
				readonly property jQuery player;
				readonly property jQuery media;
			};

time-slider

jme element class

time-slider

prefered elements

div

jme content attributes

format

jme interface

{
				readonly property jQuery player;
				readonly property jQuery media;
				property mixed format; //not implemented yet
			};

currenttime-display

jme element class

currenttime-display

prefered elements

div

jme content attributes

format

countdown

jme interface

{
				readonly property jQuery player;
				readonly property jQuery media;
				property boolean countdown;
				property mixed format;
			};

duration-display

jme element class

currenttime-display

prefered elements

div

jme content attributes

format

jme interface

{
				readonly property jQuery player;
				readonly property jQuery media;
				property mixed format;
			};