ejMediaPlayer

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>