HTML5 Media Element API, Enabling a Consistent UI In All Browsers | MediaElement.js

MediaElementPlayer: HTML5 <video> and <audio> player. A complete HTML / CSS audio / video player built on top of MediaElement.js. Many great HTML5 players have a completely separate Flash UI in backup 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 they use. Instead of using Flash as a backup, Flash is used to make the browser appear HTML5 compliant and enable codecs such as H.264 (via Flash) on all browsers.

Media Element js is a flexible and powerful jQuery / JavaScript Audio and Video player plugin based on HTML5 Media Element API that supports almost all audio and video formats such as MP4, MP3, and WebM as well as Dailymotion, Facebook, SoundCloud, Twitch, Vimeo, and Youtube.

Generally, MediaElement.js supports IE11 +, MS Edge, Chrome, Firefox, Safari, iOS 8+, and Android 4.0+.

How to make use of it:

1. Load the core MediaElement.js JavaScript library, renders, and language information within the doc.

<!-- 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. Initialize the MediaElement.js in your HTML5 video or audio and achieved.

// 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 choices to config the media participant. Note that the plugin helps all native HTML5 video and audio attributes.

$('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/',

  // 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 <a href="">Android</a>'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
  enableProgress<a href="">Tooltip</a>: 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 strategies:

// 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, MediaElement.js Github

See Demo And Download

Official Website(mediaelement): Click Here

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

Leave a Comment