HTML5 Video and Audio Player Plugin - MediaElement.js
| File Size: | 2.04 MB |
|---|---|
| Views Total: | 17312 |
| 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:
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.
