Tuesday, September 27, 2022
HomejQueryHTML5 Video and Audio Participant Plugin - MediaElement.js

HTML5 Video and Audio Participant Plugin – MediaElement.js


MediaElement.js is a versatile and strong jQuery/JavaScript Audio and Video participant plugin based mostly on HTML5 mediaelement API.

Helps virtually all audio and video codecs like MP4, MP3, WebM in addition to Dailymotion, Fb, SoundCloud, Twitch, Vimeo, and Youtube.

Desk Of Contents:

Tips on how to use it:

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

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

2. Intialize the MediaElement.js in your HTML5 video or audio and performed.

// As a jQuery plugin
$('video, audio').mediaelementplayer({
  // extra configuration right here
});

// As a Vanilla JavaScript plugin
var participant = new MediaElementPlayer('participant', {
    // extra configurations right here
});

3. Attainable choices to config the media participant. Observe that the plugin helps all native HTML5 video and audio attributes. See <video /> and <audio /> for extra particulars.

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

  /* Core Choices */

  // Checklist of renderers to make use of
  renderers: [],

  // Title of the container
  fakeNodeName: mediaelementwrapper,

  //  Path the place Flash shims are situated
  pluginPath: 'construct/',

  // path the place the svg icon sprite is situated
  iconSprite: 'mejs-controls.svg',

  // Attainable values: at all times (CDN model) or sameDomain (native recordsdata)
  shimScriptAccess: 'sameDomain',

  // Success callback
  // media: the wrapper that mimics all of the native occasions/properties/strategies for all renderers
  // node: the unique HTML video, audio or iframe tag the place the media was loaded initially
  success: operate(media, node) {},

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

  // Dailymotion choices
  // See: https://developer.dailymotion.com/participant
  dailymotion: {},

  // Sprint choices
  // See: https://github.com/Axinom/drm-quick-start
  sprint: {},

  // Fb Video choices
  // See: https://builders.fb.com/docs/plugins/embedded-video-player/api#setup
  fb: {},

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

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

  // Youtube choices
  // See: https://builders.google.com/youtube/player_parameters#Parameters
  youtube: {
    nocookie: false,
    imageQuality: 'default', // hqdefault, mqdefault, sddefault and maxresdefault
    // Youtube choices right here
  },

  // Class prefix for participant parts
  classPrefix: 'mejs__',

  // Poster URL
  poster: '',

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

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

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

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

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

  // audio width/top
  audioWidth : -1  Width of audio participant
  audioHeight: -1  Top of audio participant

  // Default quantity to maneuver again when again secret's pressed
  defaultSeekBackwardInterval: operate(media) {return (media.period * 0.05);},

  // Default quantity to maneuver ahead when ahead secret's pressed
  defaultSeekForwardInterval: operate(media) {return (media.period * 0.05);},

  // Set dimensions by way of JS as an alternative of CSS
  setDimensions: true,

  // Preliminary quantity when the participant begins
  startVolume: 0.8,

  // Infinite loop
  loop: false,

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

  // Auto resize
  enableAutosize: true,

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

  // All the time present hours
  alwaysShowHours: false,

  // Present body rely in timecode (##:00:00:00)
  showTimecodeFrameCount: false,

  // Frames per second
  framesPerSecond: 25,

  // Mechanically calculate the width of the progress bar based mostly on the sizes of different parts
  autosizeProgress: true,

  // Conceal controls when taking part in and mouse just isn't over the video
  alwaysShowControls: false,

  // Conceal the video management when the media is loading
  hideVideoControlsOnLoad: false,

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

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

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

  // Time in ms to set off the timer when your mouse strikes
  controlsTimeoutMouseEnter: 2500,

  // Time in ms to set off 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,

  // Checklist of options/plugin to make use of within the participant
  options: [playpause, current, progress, duration, tracks, volume, fullscreen],

  // Use all of the default controls
  useDefaultControls: false,

  // Just for dynamic functions
  isVideo: true,

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

  // Allow keyboard
  enableKeyboard: true,

  // Pause different gamers when the present one is taking part in
  pauseOtherPlayers: true,

  // Ignore pauseOtherPlayers choice on the present participant
  ignorePauseOtherPlayersOption: true,

  // Variety of decimal locations to point out if frames are proven
  secondsDecimalLength: 0,

  // Customized error
  // string or operate
  customError: operate(media, node){},

  // Keyboard actions
  keyActions: {keys: [1,2,3...], motion: operate(participant, media) { ... }},

  // Begin level
  period: -1,

  // Separator between the present time and the entire period
  timeAndDurationSeparator: '<span> &#124; </span>' 

  // Conceal the amount on contact gadgets
  hideVolumeOnTouchDevices: true,

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

  // Allow clean habits when hovering over the progress bar
  useSmoothHover: true,

  // If set to true, the Stay Broadcast message shall be displayed and progress bar shall be hidden, irrespective of if period is a legitimate quantity
  forceLive: false,

  // Place of quantity slider
  audioVolume: 'horizontal',
  videoVolume: 'vertical',

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

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

  // Make a display screen reader communicate captions over an audio monitor.
  tracksAriaLive: false,

  // Take away the [cc] button when no <monitor form="subtitles"> are current
  hideCaptionsButtonWhenEmpty: true,

  // Preprocess the caption textual content earlier than it's displayed. 
  // If set, it expects a operate which takes in caption textual content and returns a preprocessed model thereof. 
  captionTextPreprocessor: null,

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

  // Mechanically activate a <monitor> component. 
  startLanguage: '',

  // Selector of slides.
  slidesSelector: '',

  // Conceal the video participant display screen reader title so it may be added by the web site
  hideScreenReaderTitle: false,

  // Textual content 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 elements of the audio/video
myPlayer.buffered

// returns true or false
myPlayer.controls

// returns the URL
myPlayer.currentSrc

// returns the present playback place within the audio/video
myPlayer.currentTime

// returns the size in seconds
myPlayer.period

// 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 present prepared state
myPlayer.readyState

// returns true or false
myPlayer.in search of

// return the present supply
myPlayer.src

// returns the amount
myPlayer.quantity

5. API strategies:

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

// present/cover controls
myPlayer.controls(true/false);

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

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

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

// units the supply
myPlayer.src(url);

// units the amount
myPlayer.quantity(quantity);

// reload
myPlayer.load();

// play
myPlayer.play();

// pause
myPlayer.pause();

// cease
myPlayer.cease();

// destroy
myPlayer.take away();

// decide whether or not present participant can/can't play a selected media sort
// sort is MIME sort and every renderer has a whitelist of them
myPlayer.canPlayType(sort);

// set participant's width and top
myPlayer.setPlayerSize(width, top);

// set poster
myPlayer.setPoster(url);

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

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

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

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

// retrieve the present quantity stage
myPlayer.getVolume();

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

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

Changelog:

v5.1.0 (2022-09-07)

  • Detect when search has been referred to as by person interplay
  • Use of strict mode in language recordsdata could result in javascript error when utilized in a JS packer
  • Repair container top and width calculation when css is deactivated

v5.0.5 (2021-11-05)

  • Added new choice to cover display screen reader title optionally
  • WCAG: Add empty alt to poster picture

v5.0.4 (2021-11-05)

v5.0.3 (2021-11-01)

  • Add attribute aria-describedby to horizontal-volume button
  • Reinclude sort=”button” to the button, to forestall submit in kinds
  • Constant utilization of area and return keys in all browsers

v5.0.2 (2021-10-19)

  • Mirror appropriate aria-pressed standing of overlay play button when clicked for the primary time
  • Mirror toggling aria-pressed standing of the overlay play button accurately *Minimizing mandatory tabs for Firefox by setting audio/video-element to tabindex=”-1″

v5.0.1 (2021-10-07)

  • Repair for fullscreen video not centering in cell view
  • Repair for volume-current and volume-total changing into non-distinguishable with customized high-contrast settings enabled

v5.0.0 (2021-09-17)

  • Change default worth for fakeNodeName to div
  • Copy all recordsdata from /demo folder to /construct folder with grunt process
  • Change background sprite for controls with svg icon sprite
  • New choice iconSprite: path the place the svg icon sprite is situated, see standalone documentation
  • Change px to rem values in kinds
  • Add attribute aria-describedby to quantity button

v4.2.1.7 (2021-07-05)

  • Repair participant.choices.startVolume overwritten by 0
  • Repair some html feedback typos, Strip out previous 404 sources
  • Repair points with fullscreen underneath Safari
  • Get appropriate mime sort for mov recordsdata
  • Repair enableAutosize:false bug
  • Repair uncommon situation with offscreen.take away()
  • Repair DFXP parsing: take away remnants of jQuery use
  • Use the identical rendererName variable when calculating isNative

This superior jQuery plugin is developed by johndyer. For extra Superior Usages, please test the demo web page or go to the official web site.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments