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

JAVASCRIPT

$(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

• 3

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

• 10s

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

• 1

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

• 10s

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

• 50

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>