HTML5 Video and Audio Player Plugin - MediaElement.js
File Size: | 529 KB |
---|---|
Views Total: | 19580 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

MediaElement.js is a flexible and robust jQuery/JavaScript Audio and Video player plugin based on HTML5 mediaelement API.
Supports almost all audio and video formats like MP4, MP3, WebM as well as Dailymotion, Facebook, SoundCloud, Twitch, Vimeo, and Youtube.
Table Of Contents:
- Installation
- Options
- Properties
- API methods
How to use it:
1. Load the core MediaElement.js JavaScript library, OPTIONAL renders, and language files in 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. Intialize the MediaElement.js on your HTML5 video or audio and done.
// 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 to config the media player. Note that the plugin supports all native HTML5 video and audio attributes. See <video /> and <audio /> for more details.
$('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: 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 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> | </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, // Remove the [cc] button when no <track kind="subtitles"> are present hideCaptionsButtonWhenEmpty: true, // If true and we only have one track, change captions to toggle button toggleCaptionsButtonWhenOnlyOne: false, // Default cue line in which to display cues if the cue is set to "auto" (no line entry in VTT). // Can be set to false to disable. defaultTrackLine: -3, // Automatically turn on a <track> element. autoplayCaptionLanguage: '', // Set the language of the chapters track. chaptersLanguage: '', // Hide the video player screen reader title so it can be added by the website hideScreenReaderTitle: false, // 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 methods:
// 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();
Changelog:
v7.0.0 (2023-08-02)
- Flash support removed
- Make test npm-script available to work on all plattforms
- HLS and MPEG-Dash renderer should now have working captions
- Fix firefox bug on mouseout
v6.0.3 (2023-03-29)
- Replaced outline-style: auto with outline-style: solid to enable Firefox to show the correct outline-color if defined.
v6.0.2 (2023-03-08)
- Added outline-style to enable Firefox to show the correct outline-color if defined.
v6.0.1 (2023-02-10)
- Bugfix
v6.0.0 (2023-02-07)
- Fix missing video tracks after player is removed
- Added browser-native subtitle support and removed custom VTT/DFXP parsing
- Removed support for "slides" tracks which were non-functional
- Removed options: "tracksAriaLive", "captionTextPreprocessor", "slidesSelector"
- Renamed "startLanguage" option to "autoplayCaptionLanguage" for clarity
- New option "chaptersLanguage" to set the language of the displayed chapters track.
- new option "defaultTrackLine" to control in which line subtitles are displayed by default
- Fixed being able to activate disabled caption-buttons
- Fixed "default" track not automatically playing (subtitles and captions tracks only)
v5.1.1 (2023-02-06)
- Solves mejs__container receives no visible focus, violates WCAG SC 2
v5.1.0 (2022-09-07)
- Detect when seek has been called by user interaction
- Use of strict mode in language files may lead to javascript error when used in a JS packer
- Fix container height and width calculation when css is deactivated
v5.0.5 (2021-11-05)
- Added new option to hide screen reader title optionally
- WCAG: Add empty alt to poster image
v5.0.4 (2021-11-05)
- Switch data-src to src
v5.0.3 (2021-11-01)
- Add attribute aria-describedby to horizontal-volume button
- Reinclude type="button" to the button, to prevent submit in forms
- Consistent usage of space and return keys in all browsers
v5.0.2 (2021-10-19)
- Reflect correct aria-pressed status of overlay play button when clicked for the first time
- Reflect toggling aria-pressed status of the overlay play button correctly *Minimizing necessary tabs for Firefox by setting audio/video-element to tabindex="-1"
v5.0.1 (2021-10-07)
- Fix for fullscreen video not centering in mobile view
- Fix for volume-current and volume-total becoming non-distinguishable with custom high-contrast settings enabled
v5.0.0 (2021-09-17)
- Change default value for fakeNodeName to div
- Copy all files from /demo folder to /build folder with grunt task
- Replace background sprite for controls with svg icon sprite
- New option iconSprite: path where the svg icon sprite is located, see standalone documentation
- Change px to rem values in styles
- Add attribute aria-describedby to volume button
v4.2.1.7 (2021-07-05)
- Fix player.options.startVolume overwritten by 0
- Fix some html comments typos, Strip out old 404 sources
- Fix issues with fullscreen under Safari
- Get correct mime type for mov files
- Fix enableAutosize:false bug
- Fix rare issue with offscreen.remove()
- Fix DFXP parsing: remove remnants of jQuery use
- Use the same rendererName variable when calculating isNative
This awesome jQuery plugin is developed by johndyer. For more Advanced Usages, please check the demo page or visit the official website.