HTML5 Video and Audio Player Plugin - MediaElement.js

HTML5 Video and Audio Player Plugin - MediaElement.js
File Size: 2.03 MB
Views Total: 10380
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

MediaElement.js is a flexible and robust jQuery/JavaScript Audio and Video player plugin based on HTML5 mediaelement API.

Supports almost all audio and video formats like MP4, MP3, WebM as well as Dailymotion, Facebook, SoundCloud, Twitch, Vimeo, and Youtube.

Table Of Contents:

How to use it:

1. Load the core MediaElement.js JavaScript library, OPTIONAL renders, and language files in the document.

<!-- jQuery is OPTIONAL -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Core -->
<link rel="stylesheet" href="/path/to/build/mediaelementplayer.min.css" />
<script src="/path/to/build/mediaelement-and-player.js"></script>
<!-- Dailymotion Renderer -->
<script src="/path/to/build/renderers/dailymotion.js"></script>
<!-- Facebook Video Renderer -->
<script src="/path/to/build/renderers/facebook.js"></script>
<!-- Soundcloud Renderer -->
<script src="/path/to/build/renderers/soundcloud.js"></script>
<!-- Twitch Renderer -->
<script src="/path/to/build/renderers/twitch.js"></script>
<!-- Vimeo Renderer -->
<script src="/path/to/build/renderers/vimeo.js"></script>
<!-- Youtube Renderer -->
<script src="/path/to/build/renderers/youtube.js"></script>
<!-- All Languages -->
<script src="/path/to/build/lang/ca.js"></script>
<script src="/path/to/build/lang/cs.js"></script>
<script src="/path/to/build/lang/de.js"></script>
<script src="/path/to/build/lang/es.js"></script>
<script src="/path/to/build/lang/fa.js"></script>
<script src="/path/to/build/lang/fr.js"></script>
<script src="/path/to/build/lang/hr.js"></script>
<script src="/path/to/build/lang/hu.js"></script>
<script src="/path/to/build/lang/it.js"></script>
<script src="/path/to/build/lang/ja.js"></script>
<script src="/path/to/build/lang/ko.js"></script>
<script src="/path/to/build/lang/ms.js"></script>
<script src="/path/to/build/lang/nl.js"></script>
<script src="/path/to/build/lang/pl.js"></script>
<script src="/path/to/build/lang/pt.js"></script>
<script src="/path/to/build/lang/ro.js"></script>
<script src="/path/to/build/lang/ru.js"></script>
<script src="/path/to/build/lang/sk.js"></script>
<script src="/path/to/build/lang/sv.js"></script>
<script src="/path/to/build/lang/tr.js"></script>
<script src="/path/to/build/lang/uk.js"></script>
<script src="/path/to/build/lang/zh-cn.js"></script>
<script src="/path/to/build/lang/zh.js"></script>

2. Intialize the MediaElement.js on your HTML5 video or audio and done.

// As a jQuery plugin
$('video, audio').mediaelementplayer({
  // more configuration here

// As a Vanilla JavaScript plugin
var player = new MediaElementPlayer('player', {
    // more configurations here

3. Possible options to config the media player. Note that the plugin supports all native HTML5 video and audio attributes. See <video /> and <audio /> for more details.

$('video, audio').mediaelementplayer({

  /* Core Options */

  // List of renderers to use
  renderers: [],

  // Name of the container
  fakeNodeName: mediaelementwrapper,

  //  Path where Flash shims are located
  pluginPath: 'build/',

  // path where the svg icon sprite is located
  iconSprite: 'mejs-controls.svg',

  // Possible values: always (CDN version) or sameDomain (local files)
  shimScriptAccess: 'sameDomain',

  // Success callback
  // media: the wrapper that mimics all the native events/properties/methods for all renderers
  // node: the original HTML video, audio or iframe tag where the media was loaded originally
  success: function(media, node) {},

  // Error callback
  error: function(media, node) {},

  // Dailymotion options
  // See:
  dailymotion: {},

  // Dash options
  // See:
  dash: {},

  // Facebook Video options
  // See:
  facebook: {},

  // flv.js options
  // See:
  flv: {},

  // hls.js options
  // See:
  hls: {},

  // Youtube options
  // See:
  youtube: {
    nocookie: false,
    imageQuality: 'default', // hqdefault, mqdefault, sddefault and maxresdefault
    // Youtube options here

  // Class prefix for player elements
  classPrefix: 'mejs__',

  // Poster URL
  poster: '',

  // Show the poster when the video is ended
  showPosterWhenEnded: false,

  // Show the poster when the video is paused
  showPosterWhenPaused: false,

  // Default video width/height
  defaultVideoWidth: 480,
  defaultVideoHeight: 270,

  // video width/height
  videoWidth: -1,
  videoHeight: -1,

  // Default audio width/height
  defaultAudioWidth: 400,
  defaultAudioHeight: 30,

  // audio width/height
  audioWidth : -1  Width of audio player
  audioHeight: -1  Height of audio player

  // Default amount to move back when back key is pressed
  defaultSeekBackwardInterval: function(media) {return (media.duration * 0.05);},

  // Default amount to move forward when forward key is pressed
  defaultSeekForwardInterval: function(media) {return (media.duration * 0.05);},

  // Set dimensions via JS instead of CSS
  setDimensions: true,

  // Initial volume when the player starts
  startVolume: 0.8,

  // Infinite loop
  loop: false,

  // Auto rewind when the media ends
  autoRewind: true,

  // Auto resize
  enableAutosize: true,

  // Time format
  timeFormat: 'mm:ss',

  // Always show hours
  alwaysShowHours: false,

  // Show frame count in timecode (##:00:00:00)
  showTimecodeFrameCount: false,

  // Frames per second
  framesPerSecond: 25,

  // Automatically calculate the width of the progress bar based on the sizes of other elements
  autosizeProgress: true,

  // Hide controls when playing and mouse is not over the video
  alwaysShowControls: false,

  // Hide the video control when the media is loading
  hideVideoControlsOnLoad: false,

  // Hide the video controls when the media is paused
  hideVideoControlsOnPause: false,

  // Clicking video element to toggle play/pause
  clickToPlayPause: true,

  // Time in ms to hide controls
  controlsTimeoutDefault: 1500,

  // Time in ms to trigger the timer when your mouse moves
  controlsTimeoutMouseEnter: 2500,

  // Time in ms to trigger the timer when your mouse leaves
  controlsTimeoutMouseLeave: 1000,

  // Use iPad's native controls
  iPadUseNativeControls: false,

  // Use iPhone's native controls
  iPhoneUseNativeControls: false,

  // Use Android's native controls
  AndroidUseNativeControls: false,

  // List of features/plugin to use in the player
  features: [playpause, current, progress, duration, tracks, volume, fullscreen],

  // Use all the default controls
  useDefaultControls: false,

  // Only for dynamic purposes
  isVideo: true,

  // Stretching modes for video player
  // or 'fill'
  stretching: 'auto',

  // Enable keyboard
  enableKeyboard: true,

  // Pause other players when the current one is playing
  pauseOtherPlayers: true,

  // Ignore pauseOtherPlayers option on the current player
  ignorePauseOtherPlayersOption: true,

  // Number of decimal places to show if frames are shown
  secondsDecimalLength: 0,

  // Custom error
  // string or function
  customError: function(media, node){},

  // Keyboard actions
  keyActions: {keys: [1,2,3...], action: function(player, media) { ... }},

  // Start point
  duration: -1,

  // Separator between the current time and the total duration
  timeAndDurationSeparator: '<span> &#124; </span>' 

  // Hide the volume on touch devices
  hideVolumeOnTouchDevices: true,

  // Enable tooltip on the progress bar
  enableProgressTooltip: true,

  // Enable smooth behavior when hovering over the progress bar
  useSmoothHover: true,

  // If set to true, the Live Broadcast message will be displayed and progress bar will be hidden, no matter if duration is a valid number
  forceLive: false,

  // Position of volume slider
  audioVolume: 'horizontal',
  videoVolume: 'vertical',

  // Activate detection of Pointer events when on the fullscreen mode
  usePluginFullScreen: true,

  // Bypass native capabilities on mobile devices and use the fake-fullscreen mode
  useFakeFullscreen: false,

  // Make a screen reader speak captions over an audio track.
  tracksAriaLive: false,

  // Remove the [cc] button when no <track kind="subtitles"> are present
  hideCaptionsButtonWhenEmpty: true,

  // Preprocess the caption text before it is displayed. 
  // If set, it expects a function which takes in caption text and returns a preprocessed version thereof. 
  captionTextPreprocessor: null,

  // If true and we only have one track, change captions to toggle button
  toggleCaptionsButtonWhenOnlyOne: false,

  // Automatically turn on a <track> element. 
  startLanguage: '',

  // Selector of slides.
  slidesSelector: '',

  // Text for accessibility
  tracksText: null,
  chaptersText: null,
  muteText: null,
  unmuteText: null,
  allyVolumeControlText: null,
  fullscreenText: null,
  playText: null,
  pauseText: null,


4. Properties:

// returns true or false

// returns an object representing the buffered parts of the audio/video

// returns true or false

// returns the URL

// returns the current playback position in the audio/video

// returns the length in seconds

// returns true or false

// returns a MediaError object representing the error state

// returns true or false

// returns true or false

// returns true or false

// return the current ready state

// returns true or false

// return the current source

// returns the volume

5. API methods:

// enable/disable autoplay

// show/hide controls

// set the current time

// enable/disable loop

// mute/unmute

// sets the source

// sets the volume

// reload

// play;

// pause

// stop

// destroy

// determine whether current player can/cannot play a specific media type
// type is MIME type and each renderer has a whitelist of them

// set player's width and height
myPlayer.setPlayerSize(width, height);

// set poster

// mute/unmute the player

// set a new time

// get the current time

// set a volume leveal (between 0 and 1)

// retrieve the current volume level

// set a new URL for the player

// retrieve the media URL/path


v5.0.4 (2021-11-05)

  • Switch data-src to src

v5.0.3 (2021-11-01)

  • Add attribute aria-describedby to horizontal-volume button
  • Reinclude type="button" to the button, to prevent submit in forms
  • Consistent usage of space and return keys in all browsers

v5.0.2 (2021-10-19)

  • Reflect correct aria-pressed status of overlay play button when clicked for the first time
  • Reflect toggling aria-pressed status of the overlay play button correctly *Minimizing necessary tabs for Firefox by setting audio/video-element to tabindex="-1"

v5.0.1 (2021-10-07)

  • Fix for fullscreen video not centering in mobile view
  • Fix for volume-current and volume-total becoming non-distinguishable with custom high-contrast settings enabled

v5.0.0 (2021-09-17)

  • Change default value for fakeNodeName to div
  • Copy all files from /demo folder to /build folder with grunt task
  • Replace background sprite for controls with svg icon sprite
  • New option iconSprite: path where the svg icon sprite is located, see standalone documentation
  • Change px to rem values in styles
  • Add attribute aria-describedby to volume button

v4.2.1.7 (2021-07-05)

  • Fix player.options.startVolume overwritten by 0
  • Fix some html comments typos, Strip out old 404 sources
  • Fix issues with fullscreen under Safari
  • Get correct mime type for mov files
  • Fix enableAutosize:false bug
  • Fix rare issue with offscreen.remove()
  • Fix DFXP parsing: remove remnants of jQuery use
  • Use the same rendererName variable when calculating isNative

This awesome jQuery plugin is developed by johndyer. For more Advanced Usages, please check the demo page or visit the official website.