ejMediaPlayer

4 Feb 201918 minutes to read

Media player is a HTML5 component that is used to embed web videos, YouTube, and audio files in web pages.

Syntax

$(element).ejMediaPlayer(options)

Example

HTML

<div id="basicPlayer"></div>

<script>
// Create Media Player
$("#basicPlayer").ejMediaPlayer();
</script>

Requires

module:jQuery
module:ej.globalize.js
module:ej.data.js
module:ej.scroller.js
module:ej.touch.js
module:ej.button.js
module:ej.checkbox.js
module:ej.togglebutton.js
module:ej.slider.js
module:ej.waitingpopup.js
module:ej.listview.js
module:ej.listbox.js
module:ej.mediaplayer.js

NOTE

jQuery.easing external dependency has been removed from version 14.3.0.49 onwards. Kindly include this jQuery.easing dependency for versions lesser than 14.3.0.49 in order to support animation effects.

Members

autoPlay `boolean`

Enables/disables the player automatically.

Default value

true

HTML

<div id="basicPlayer"></div>

<script>
//To set autoPlay API during initialization
   $("#basicPlayer").ejMediaPlayer({ autoPlay:false });
</script>

autoHide `boolean`

Hides the toolbar and header content when mouseout of the content area. The default value is true.

Default value

true

HTML

<div id="basicPlayer"></div>
<script>
//To set autoHide API during initialization
 $("#basicPlayer").ejMediaPlayer({ autoHide:false });
</script>

autoHideTime `number`

Specifies the duration (seconds) when toolbar and content need to be hidden.

Default value

HTML

<div id="basicPlayer"></div>
<script>
//To set autoHideTime API during initialization
        $("#basicPlayer").ejMediaPlayer({ autoHideTime:5 });
</script>

contentType `string|enum`

Sets the content type of the player such as video or audio.

Default value

“video”

HTML

<div id="basicPlayer"></div>
<script>
////To set contentType API during initialization
        $("#basicPlayer").ejMediaPlayer({contentType:"audio" });
</script>

cssClass `string`

Sets the root CSS class for media player theme, which is used to customize alignment, color, and more.

Default value

””

HTML

<div id="basicPlayer"></div>
<script>
 //To set cssClass API during initialization 
        $("#basicPlayer").ejMediaPlayer({ cssClass:"gradient-lime" });
</script>

disableKeys `boolean`

Enables/disables keyboard shortcuts using disableKeys property. It is false, by default.

Default value

false

HTML

<div id="basicPlayer"></div>
<script>
//To set disableKeys API during initialization 
        $("#basicPlayer").ejMediaPlayer({ disableKeys:true });
</script>

forwardTime `number`

Forwards the current audio/video source of the media player from the current time to the specified time (seconds).

Default value

HTML

<div id="basicPlayer"></div>
<script>
//To set forwardTime API during initialization 
        $("#basicPlayer").ejMediaPlayer({ forwardTime : 30 });
</script>

locale `string`

Sets the language for the media player control using locale property.

Default value

“en-US”

HTML

<div id="basicPlayer"></div>
<script>
 //To set locale API during initialization  
        $("#basicPlayer").ejMediaPlayer({  locale: "en-US"});
</script>

height `string`

Specifies the height of the media player.

Default value

“100%”

HTML

<div id="basicPlayer"></div>
<script>
  //To set height API during initialization 
        $("#basicPlayer").ejMediaPlayer({ height: "400px" });
</script>

mute `boolean`

Mutes the media player.

Default value

false

HTML

<div id="basicPlayer"></div>
<script>
 //To set mute API during initialization  
        $("#basicPlayer").ejMediaPlayer({ mute:true });
</script>

playSpeed `number`

Returns the speed of the audio/video player.

Default value

HTML

<div id="basicPlayer"></div>
<script>
  //To set playSpeed API during initialization 
        $("#basicPlayer").ejMediaPlayer({ playSpeed:2 });
</script>

repeat `boolean`

Enables/disables repeat functionality of the play list.

Default value

false

HTML

<div id="basicPlayer"></div>
<script>
  //To set repeat API during initialization 
        $("#basicPlayer").ejMediaPlayer({ repeat: true});
</script>

renderMode `string|enum`

The three rendering layouts in the media player are basic, advanced, and mobile.

*ej.MediaPlayer.RenderMode.Basic
*ej.MediaPlayer.RenderMode.Advanced
*ej.MediaPlayer.RenderMode.Mobile

Default value

“basic”

HTML

<div id="basicPlayer"></div>
<script>
//To set renderMode API during initialization 
        $("#basicPlayer").ejMediaPlayer({ renderMode: "mobile"});
</script>

rewindTime `number`

Rewinds the current audio/video source of the media player from the current time to the specified time (seconds).

Default value

HTML

<div id="basicPlayer"></div>
<script>
 //To set rewindTime API during initialization 
        $("#basicPlayer").ejMediaPlayer({  rewindTime : 30 });
</script>

showPlaylist `boolean`

Shows the play list panel.

Default value

false

HTML

<div id="basicPlayer"></div>
<script>
//To set showPlaylist API during initialization 
        $("#basicPlayer").ejMediaPlayer({ showPlaylist: true });
</script>

source `object|Array`

Consist of the following items.

url: Specifies the URL link of the required file.
title: Specifies the title of the required file.
posterUrl: Specifies the background image for the required file.
author: Specifies the name of the author.

Default value

[]

HTML

<div id="basicPlayer"></div>
<script>
//To set source API during initialization 
        $("#basicPlayer").ejMediaPlayer({  source: [
                        {
                            "url": "http://files2.syncfusion.com/Videos/samples/Managing+Static+Files+in+ASP.NET+Core%2C+presented+by+Ugo+Latt.mp4",
                            "title": "Managing Static Files in ASP.NET",
                            "posterUrl": "images/media player/SFFlatLicense.png",
                            "author": "syncfusion"
                        }
                       ]
                    });
</script>

playlistTitle `string`

Shows the title of the play list panel.

Default value

“Playlist”

HTML

<div id="basicPlayer"></div>
<script>
 //To set playlistTitle API during initialization 
        $("#basicPlayer").ejMediaPlayer({ playlistTitle: "Syncfusion" });
</script>

showPoster `boolean`

Shows/hides the poster by setting showPoster property. It is set to true, by default.

Default value

true

HTML

<div id="basicPlayer"></div>
<script>
//To set showPoster API during initialization 
        $("#basicPlayer").ejMediaPlayer({ showPoster:false});
</script>

showTitle `boolean`

Shows/hides the title by setting the showTitle property. It is set to true, by default.

Default value

true

HTML

<div id="basicPlayer"></div>
<script>
//To set showTitle API during initialization 
 $("#basicPlayer").ejMediaPlayer({ showTitle:false });
</script>

shuffle `boolean`

Enables/disables the shuffle functionality of the play list.

Default value

false

HTML

<div id="basicPlayer"></div>
<script>
//To set shuffle API during initialization 
        $("#basicPlayer").ejMediaPlayer({  shuffle: true});
</script>

toolbarHeight `string`

Specifies the height of the toolbar.

Default value

“45px”

HTML

<div id="basicPlayer"></div>
<script>
//To set toolbarHeight API during initialization 
        $("#basicPlayer").ejMediaPlayer({ toolbarHeight:"50px"});
</script>

volume `number`

Defines the volume (0-100) of the player.

Default value

HTML

<div id="basicPlayer"></div>
<script>
//To set volume API during initialization 
        $("#basicPlayer").ejMediaPlayer({ volume: 60});
</script>

width `string`

Specifies the width of the media player.

Default value

“100%”

HTML

<div id="basicPlayer"></div>
<script>
//To set width API during initialization 
$("#basicPlayer").ejMediaPlayer({width: "700px"});
</script>

Methods

exitFullScreen()

Used to exit the full screen of the player.

Example

HTML

<div id="basicPlayer"></div>

<script>
$("#basicPlayer").ejMediaPlayer();
// Create Media Player instance
var playerObj = $("#basicPlayer").data("ejMediaPlayer");
playerObj.exitFullScreen(); // exit full screen
</script>

getCurrentMediaIndex()

Returns the current index of the play list..

Example

HTML

<div id="basicPlayer"></div>
<script>
$("#basicPlayer").ejMediaPlayer();
// Create Media Player instance
var playerObj = $("#basicPlayer").data("ejMediaPlayer");
 playerObj.getCurrentMediaIndex(); // returns current index of play list
</script>

getCurrentTime()

Returns the current playing time (seconds).

Example

HTML

<div id="basicPlayer"></div>
<script>
$("#basicPlayer").ejMediaPlayer();
// Create Media Player instance
var playerObj = $("#basicPlayer").data("ejMediaPlayer");
 playerObj.getCurrentTime(); // returns current playing time. 
</script>

getCurrentMediaType

Returns the following types of current source.

ej.MediaPlayer.Types.Audio
ej.MediaPlayer.Types.Video
ej.MediaPlayer.Types.YouTube

Example

HTML

<div id="basicPlayer"></div>
<script>
$("#basicPlayer").ejMediaPlayer();
// Create Media Player instance
var playerObj = $("#basicPlayer").data("ejMediaPlayer");
 playerObj.getCurrentMediaType(); // returns current media type
</script>

getDuration()

Returns the whole duration (seconds) of the current source (video/audio).

Example

HTML

<div id="basicPlayer"></div>
<script>
$("#basicPlayer").ejMediaPlayer();
// Create Media Player instance
var playerObj = $("#basicPlayer").data("ejMediaPlayer");
 playerObj.getDuration(); // returns duration of current source
</script>

getMediaSpeed()

Returns the media speed.

Example

HTML

<div id="basicPlayer"></div>
<script>
$("#basicPlayer").ejMediaPlayer();
// Create Media Player instance
var playerObj = $("#basicPlayer").data("ejMediaPlayer");
playerObj.getMediaSpeed(); // returns speed of the media
</script>

getVolume()

Returns the volume of the player.

Example

HTML

<div id="basicPlayer"></div>
<script>
$("#basicPlayer").ejMediaPlayer();
// Create Media Player instance
var playerObj = $("#basicPlayer").data("ejMediaPlayer");
 playerObj.getVolume(); // returns player volume
</script>

hidePlaylist()

Hides the play list panel.

Example

HTML

<div id="basicPlayer"></div>
<script>
$("#basicPlayer").ejMediaPlayer();
// Create Media Player instance
var playerObj = $("#basicPlayer").data("ejMediaPlayer");
playerObj.hidePlaylist(); // hides the play list
</script>

makeFullScreen()

Enables full screen mode for the player.

Example

HTML

<div id="basicPlayer"></div>
<script>
$("#basicPlayer").ejMediaPlayer();
// Create Media Player instance
var playerObj = $("#basicPlayer").data("ejMediaPlayer");
playerObj.makeFullScreen(); // make full screen
</script>

mute()

Allows muting the media player.

Example

HTML

<div id="basicPlayer"></div>
<script>
$("#basicPlayer").ejMediaPlayer();
// Create Media Player instance
var playerObj = $("#basicPlayer").data("ejMediaPlayer");
 playerObj.mute(); 
</script>

next()

Allows playing the next audio/video source of the media player.

Example

HTML

<div id="basicPlayer"></div>
<script>
$("#basicPlayer").ejMediaPlayer();
// Create Media Player instance
var playerObj = $("#basicPlayer").data("ejMediaPlayer");
 playerObj.next(); 
</script>

pause()

Allows pausing the current audio/video source of the media player.

Example

HTML

<div id="basicPlayer"></div>
<script>
$("#basicPlayer").ejMediaPlayer();
// Create Media Player instance
var playerObj = $("#basicPlayer").data("ejMediaPlayer");
 playerObj.pause(); 
</script>

previous()

Plays the previous audio/video source of the media player.

Example

HTML

<div id="basicPlayer"></div>
<script>
$("#basicPlayer").ejMediaPlayer();
// Create Media Player instance
var playerObj = $("#basicPlayer").data("ejMediaPlayer");
playerObj.previous(); 
</script>

play()

Plays the current audio/video source of the media player.

Example

HTML

<div id="basicPlayer"></div>
<script>
$("#basicPlayer").ejMediaPlayer();
// Create Media Player instance
var playerObj = $("#basicPlayer").data("ejMediaPlayer");
 playerObj.play(); 
</script>

stop()

Stops the current audio/video source of the media player.

Example

HTML

<div id="basicPlayer"></div>
<script>
$("#basicPlayer").ejMediaPlayer();
// Create Media Player instance
var playerObj = $("#basicPlayer").data("ejMediaPlayer");
 playerObj.stop(); 
</script>

unmute()

Allows to unmute the media player.

Example

HTML

<div id="basicPlayer"></div>
<script>
$("#basicPlayer").ejMediaPlayer();
// Create Media Player instance
var playerObj = $("#basicPlayer").data("ejMediaPlayer");
 playerObj.unmute(); 
</script>

Events

onActionBegin

Triggers when any action begins.

Example

HTML

<div id="basicPlayer"></div>
<script>
$("#basicPlayer").ejMediaPlayer({
    onActionBegin: function(args){}
});
</script>

onActionComplete

Triggers when any action ends.

Example

HTML

<div id="basicPlayer"></div>
<script>
$("#basicPlayer").ejMediaPlayer({
    onActionComplete: function(args){}
});
</script>

onTogglePlaylist

Triggers when showing/hiding the play list (through showPlaylist API).

Example

HTML

<div id="basicPlayer"></div>
<script>
$("#basicPlayer").ejMediaPlayer({
    showPlaylist: true,
    onTogglePlaylist: function(args){}
});
</script>

onPlaying

Triggers while playing current media source.

Example

HTML

<div id="basicPlayer"></div>
<script>
$("#basicPlayer").ejMediaPlayer({
    onPlaying: function(args){}
});
</script>

onRepeat

Triggers on toggling repeat functionality. Get the enabled or disabled repeat status using “isRepeat” parameter.

Example

HTML

<div id="basicPlayer"></div>
<script>
$("#basicPlayer").ejMediaPlayer({
    onRepeat: function(args){}
});
</script>

onShuffle

Triggers on toggling shuffle functionality. Get the enabled or disabled shuffle status using isShuffle” parameter.

Example

HTML

<div id="basicPlayer"></div>
<script>
$("#basicPlayer").ejMediaPlayer({
    onShuffle: function(args){}
});
</script>

onMediaComplete

Triggers when the player successfully reaches the end of the current media source.

Example

HTML

<div id="basicPlayer"></div>
<script>
$("#basicPlayer").ejMediaPlayer({
    onMediaComplete: function(args){}
});
</script>

ejMediaPlayer

Syntax

Example

Requires

Members

autoPlay boolean

Default value

autoHide boolean

Default value

autoHideTime number

Default value

contentType string|enum

Default value

cssClass string

Default value

disableKeys boolean

Default value

forwardTime number

Default value

locale string

Default value

height string

Default value

mute boolean

Default value

playSpeed number

Default value

repeat boolean

Default value

renderMode string|enum

Default value

rewindTime number

Default value

showPlaylist boolean

Default value

source object|Array

Default value

playlistTitle string

Default value

showPoster boolean

Default value

showTitle boolean

Default value

shuffle boolean

Default value

toolbarHeight string

Default value

volume number

Default value

width string

Default value

Methods

exitFullScreen()

Example

getCurrentMediaIndex()

Example

getCurrentTime()

Example

getCurrentMediaType

Example

getDuration()

Example

getMediaSpeed()

Example

getVolume()

Example

hidePlaylist()

Example

makeFullScreen()

Example

mute()

Example

next()

Example

pause()

Example

previous()

Example

play()

Example

autoPlay `boolean`

autoHide `boolean`

autoHideTime `number`

contentType `string|enum`

cssClass `string`

disableKeys `boolean`

forwardTime `number`

locale `string`

height `string`

mute `boolean`

playSpeed `number`

repeat `boolean`

renderMode `string|enum`

rewindTime `number`

showPlaylist `boolean`

source `object|Array`

playlistTitle `string`

showPoster `boolean`

showTitle `boolean`

shuffle `boolean`

toolbarHeight `string`

volume `number`

width `string`