HTML5 MediaElement API, Enabling a Consistent UI in All Browsers

MediaElementPlayer: HTML5 <video> and <audio> player is a complete HTML/CSS audio/video player built on top of MediaElement.js. Many great HTML5 players have a completely separate Flash user interface in fallback mode, but MediaElementPlayer.js uses the same HTML/CSS for all players.

MediaElement.js is a set of custom Flash plug-ins that emulate the HTML5 MediaElement API for browsers that do not support HTML5 or that do not support the media codecs you are using. Rather than using Flash as a fallback alternative, Flash is used to make the browser appear HTML5 compatible and to enable codecs such as H.264 (via Flash) on all browsers.

API and configuration

MediaElement.js has many options that you can take advantage of. Visit API and Configuration for more details.

Also, a utility/features guide is available for development.

How to make use of it:

1. Load the core JavaScript library MediaElement.js, optional render operations, and language files into 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. Configure MediaElement.js to HTML5 video or audio.

// 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 for configuring the media player.

$('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. Characteristics:

// 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

HTML5 Video and Audio Player Plugin, MediaElementPlayer Github

See Demo And Download

Official Website(mediaelement): Click Here

This superior jQuery/javascript plugin is developed by mediaelement. For extra Advanced usage, please go to the official website.

Related Posts


CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…


Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…


Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…

Leave a Reply

Your email address will not be published. Required fields are marked *