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