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

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: https://developer.dailymotion.com/player
  dailymotion: {},

  // Dash options
  // See: https://github.com/Axinom/drm-quick-start
  dash: {},

  // Facebook Video options
  // See: https://developers.facebook.com/docs/plugins/embedded-video-player/api#setup
  facebook: {},

  // flv.js options
  // See: https://github.com/Bilibili/flv.js/blob/master/docs/api.md
  flv: {},

  // hls.js options
  // See: https://github.com/dailymotion/hls.js/blob/master/API.md#fine-tuning
  hls: {},

  // Youtube options
  // See: https://developers.google.com/youtube/player_parameters#Parameters
  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="https://www.jqueryscript.net/tags.php?/Android/">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="https://www.jqueryscript.net/tooltip/">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
myPlayer.autoplay

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

// returns true or false
myPlayer.controls

// returns the URL
myPlayer.currentSrc

// returns the current playback position in the audio/video
myPlayer.currentTime

// returns the length in seconds
myPlayer.duration

// returns true or false
myPlayer.ended

// returns a MediaError object representing the error state
myPlayer.error

// returns true or false
myPlayer.loop

// returns true or false
myPlayer.muted

// returns true or false
myPlayer.paused 

// return the current ready state
myPlayer.readyState

// returns true or false
myPlayer.seeking

// return the current source
myPlayer.src

// returns the volume
myPlayer.volume

5. API strategies:

// enable/disable autoplay
myPlayer.autoplay(true/false);

// show/hide controls
myPlayer.controls(true/false);

// set the current time
myPlayer.currentTime(time);

// enable/disable loop
myPlayer.loop(true/false);

// mute/unmute
myPlayer.muted(true/false);

// sets the source
myPlayer.src(url);

// sets the volume
myPlayer.volume(volume);

// reload
myPlayer.load();

// play
myPlayer.play();

// pause
myPlayer.pause();

// stop
myPlayer.stop();

// destroy
myPlayer.remove();

// determine whether current player can/cannot play a specific media type
// type is MIME type and each renderer has a whitelist of them
myPlayer.canPlayType(type);

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

// set poster
myPlayer.setPoster(url);

// mute/unmute the player
myPlayer.setMuted(muted);

// set a new time
myPlayer.setCurrentTime(time);

// get the current time
myPlayer.getCurrentTime();

// set a volume leveal (between 0 and 1)
myPlayer.setVolume(volume);

// retrieve the current volume level
myPlayer.getVolume();

// set a new URL for the player
myPlayer.setSrc(src);

// retrieve the media URL/path
myPlayer.getSrc();

HTML5 Video and Audio Player Plugin, MediaElement.js Github

See Demo And Download