Installation

0. Setup MIME-types
1. Install MediaElementJS
2. Add Script and Stylesheet
3. Add <video> or <audio> tags
4. Setup Player
5. Set default language (Optional)

0. Setup MIME-types (optional)

On Linux/Apache servers, create a file called .htaccess with the following text and upload it to the root of your website

# Video support
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
AddType video/ogv .ogv

# Audio support
AddType audio/mp3 .mp3
AddType audio/oga .oga
AddType audio/ogg .ogg
AddType audio/wav .wav

# For HLS support
AddType application/x-mpegURL .m3u8
AddType vnd.apple.mpegURL .m3u8
AddType video/MP2T .ts

# For M(PEG)-DASH support
AddType application/dash+xml .mpd

# For subtitles support
AddType text/vtt .vtt
AddType text/srt .srt

On Windows/IIS servers, please follow Microsoft's instructions on how to add/edit MIME types on IIS6 and IIS7.

If you are working with local files and plan to test Flash playback, make sure you go to the Flash Security Settings page and add your working directory. Also, things tend to work best when you use absolute paths.

If you want to make your media to play in Chromium browser, please read this document

For more information about how to set up a server to serve media properly and other general and useful topics about dealing with HTML5 video, this article is a good start point.

Do not compress media (mod_deflate or gzip), since it can lead to unexpected results, like headers not being passed correctly.

1. Install `MediaElementJS`

To get the default installation there are several different ways.

Download the package from https://github.com/mediaelement/mediaelement
Use a CDN reference; the most popular ones are jsDelivr and cdnjs.
Through GIT: git clone https://github.com/mediaelement/mediaelement.git
Through npm: npm install mediaelement
Through BOWER: bower install mediaelement
If you are using Meteor: meteor add johndyer:mediaelement or meteor npm install mediaelement

Installation in WordPress

WordPress currently incorporates MediaElementJS as a part of the Embeds core package. If you are using a version prior 4.9, and you want to upgrade MediaElementJS to the latest version, follow these steps:

In `wp-admin/about.php`

Find the block

if ( ! wp_is_mobile() ) {
	wp_enqueue_style( 'wp-mediaelement' );

and add below the following:

wp_enqueue_script( 'mediaelement-vimeo' );

Find the block

wp_localize_script( 'mediaelement', '_wpmejsSettings',

and add in the _wpmejsSettings the following:

'pluginPath'        => includes_url( 'js/mediaelement/', 'relative' ),
'pauseOtherPlayers' => '',
'classPrefix'       => 'mejs-',
'stretching'        => 'responsive',

In `wp-admin/includes/ajax-actions.php`

Find the blocks that contain:

wp_print_scripts( 'wp-mediaelement' );

and replace them with:

wp_print_scripts( array( 'mediaelement-vimeo', 'wp-mediaelement' ) );

In `wp-includes/media.php`

Find the block that contains:

$library = apply_filters( 'wp_video_shortcode_library', 'mediaelement' );
if ( 'mediaelement' === $library && did_action( 'init' ) ) {
	wp_enqueue_style( 'wp-mediaelement' );
	wp_enqueue_script( 'wp-mediaelement' );
}

and replace it with:

$library = apply_filters( 'wp_video_shortcode_library', 'mediaelement' );
if ( 'mediaelement' === $library && did_action( 'init' ) ) {
	wp_enqueue_style( 'wp-mediaelement' );
	wp_enqueue_script( 'mediaelement-vimeo' );
	wp_enqueue_script( 'wp-mediaelement' );
}

Find the block that contains:

if ( $is_vimeo ) {
	wp_enqueue_script( 'froogaloop' );
}

and replace it with:

if ( $is_vimeo ) {
	wp_enqueue_script( 'mediaelement-vimeo' );
}

Inside the function wpview_media_sandbox_styles(), replace:

$mediaelement = includes_url( "js/mediaelement/mediaelementplayer.min.css?$version" );

with:

$mediaelement = includes_url( "js/mediaelement/mediaelementplayer-legacy.min.css?$version" );

In `wp-includes/js/mediaelement` folder

Remove all the files from the folder and install all the files inside the build folder from the MediaElement project.
Download and copy/paste the WordPress files contained in this link.

In `wp-includes/script-loader.php`

Find the block:

$scripts->add( 'mediaelement', "/wp-includes/js/mediaelement/mediaelement-and-player.min.js", array('jquery'), '2.22.0', 1 );

and replace all of that until you reach the end of the translations, with this:

$scripts->add( 'mediaelement', "/wp-includes/js/mediaelement/mediaelement-and-player.min.js", array('jquery'), 'X.X.X', 1 );
did_action( 'init' ) && $scripts->localize( 'mediaelement', 'mejsL10n', array(
	'language' => get_bloginfo( 'language' ),
	'strings'  => array(
		'mejs.install-flash'       => __( 'You are using a browser that does not have Flash player enabled or installed. Please turn on your Flash player plugin or download the latest version from https://get.adobe.com/flashplayer/' ),
		'mejs.fullscreen-off'      => __( 'Turn off Fullscreen' ),
		'mejs.fullscreen-on'       => __( 'Go Fullscreen' ),
		'mejs.download-video'      => __( 'Download Video' ),
		'mejs.fullscreen'          => __( 'Fullscreen' ),
		'mejs.time-jump-forward'   => array( __('Jump forward 1 second'), __('Jump forward %1 seconds') ),
		'mejs.loop'                => __( 'Toggle Loop' ),
		'mejs.play'                => __( 'Play' ),
		'mejs.pause'               => __( 'Pause' ),
		'mejs.close'               => __( 'Close' ),
		'mejs.time-slider'         => __( 'Time Slider' ),
		'mejs.time-help-text'      => __( 'Use Left/Right Arrow keys to advance one second, Up/Down arrows to advance ten seconds.' ),
		'mejs.time-skip-back'      => array( __('Skip back 1 second'), __('Skip back %1 seconds') ),
		'mejs.captions-subtitles'  => __( 'Captions/Subtitles' ),
		'mejs.captions-chapters'   => __( 'Chapters' ),
		'mejs.none'                => __( 'None' ),
		'mejs.mute-toggle'         => __( 'Mute Toggle' ),
		'mejs.volume-help-text'    => __( 'Use Up/Down Arrow keys to increase or decrease volume.' ),
		'mejs.unmute'              => __( 'Unmute' ),
		'mejs.mute'                => __( 'Mute' ),
		'mejs.volume-slider'       => __( 'Volume Slider' ),
		'mejs.video-player'        => __( 'Video Player' ),
		'mejs.audio-player'        => __( 'Audio Player' ),
		'mejs.ad-skip'             => __( 'Skip ad' ),
		'mejs.ad-skip-info'        => array( __('Skip in 1 second'), __('Skip in %1 seconds') ),
		'mejs.source-chooser'      => __( 'Source Chooser' ),
		'mejs.stop'                => __( 'Stop' ),
		'mejs.speed-rate'          => __( 'Speed Rate' ),
		'mejs.live-broadcast'      => __( 'Live Broadcast' ),
		'mejs.afrikaans'           => __( 'Afrikaans' ),
		'mejs.albanian'            => __( 'Albanian' ),
		'mejs.arabic'              => __( 'Arabic' ),
		'mejs.belarusian'          => __( 'Belarusian' ),
		'mejs.bulgarian'           => __( 'Bulgarian' ),
		'mejs.catalan'             => __( 'Catalan' ),
		'mejs.chinese'             => __( 'Chinese' ),
		'mejs.chinese-simplified'  => __( 'Chinese (Simplified)' ),
		'mejs.chinese-traditional' => __( 'Chinese (Traditional)' ),
		'mejs.croatian'            => __( 'Croatian' ),
		'mejs.czech'               => __( 'Czech' ),
		'mejs.danish'              => __( 'Danish' ),
		'mejs.dutch'               => __( 'Dutch' ),
		'mejs.english'             => __( 'English' ),
		'mejs.estonian'            => __( 'Estonian' ),
		'mejs.filipino'            => __( 'Filipino' ),
		'mejs.finnish'             => __( 'Finnish' ),
		'mejs.french'              => __( 'French' ),
		'mejs.galician'            => __( 'Galician' ),
		'mejs.german'              => __( 'German' ),
		'mejs.greek'               => __( 'Greek' ),
		'mejs.haitian-creole'      => __( 'Haitian Creole' ),
		'mejs.hebrew'              => __( 'Hebrew' ),
		'mejs.hindi'               => __( 'Hindi' ),
		'mejs.hungarian'           => __( 'Hungarian' ),
		'mejs.icelandic'           => __( 'Icelandic' ),
		'mejs.indonesian'          => __( 'Indonesian' ),
		'mejs.irish'               => __( 'Irish' ),
		'mejs.italian'             => __( 'Italian' ),
		'mejs.japanese'            => __( 'Japanese' ),
		'mejs.korean'              => __( 'Korean' ),
		'mejs.latvian'             => __( 'Latvian' ),
		'mejs.lithuanian'          => __( 'Lithuanian' ),
		'mejs.macedonian'          => __( 'Macedonian' ),
		'mejs.malay'               => __( 'Malay' ),
		'mejs.maltese'             => __( 'Maltese' ),
		'mejs.norwegian'           => __( 'Norwegian' ),
		'mejs.persian'             => __( 'Persian' ),
		'mejs.polish'              => __( 'Polish' ),
		'mejs.portuguese'          => __( 'Portuguese' ),
		'mejs.romanian'            => __( 'Romanian' ),
		'mejs.russian'             => __( 'Russian' ),
		'mejs.serbian'             => __( 'Serbian' ),
		'mejs.slovak'              => __( 'Slovak' ),
		'mejs.slovenian'           => __( 'Slovenian' ),
		'mejs.spanish'             => __( 'Spanish' ),
		'mejs.swahili'             => __( 'Swahili' ),
		'mejs.swedish'             => __( 'Swedish' ),
		'mejs.tagalog'             => __( 'Tagalog' ),
		'mejs.thai'                => __( 'Thai' ),
		'mejs.turkish'             => __( 'Turkish' ),
		'mejs.ukrainian'           => __( 'Ukrainian' ),
		'mejs.vietnamese'          => __( 'Vietnamese' ),
		'mejs.welsh'               => __( 'Welsh' ),
		'mejs.yiddish'             => __( 'Yiddish' ),
	),
) );
$scripts->add( 'mediaelement-vimeo', "/wp-includes/js/mediaelement/renderers/vimeo.min.js", array('mediaelement'), 'X.X.X', 1 );
$scripts->add( 'wp-mediaelement', "/wp-includes/js/mediaelement/wp-mediaelement$suffix.js", array('mediaelement'), false, 1 );
$mejs_settings = array(
	'pluginPath' => includes_url( 'js/mediaelement/', 'relative' ),
		'classPrefix' => 'mejs-',
		'stretching' => 'responsive',
);

being X.X.X the latest version you want to install.

Remove $scripts->add( 'froogaloop', "/wp-includes/js/mediaelement/froogaloop.min.js", array(), '2.0' );
Replace:

$styles->add( 'mediaelement', "/wp-includes/js/mediaelement/mediaelementplayer.min.css", array(), '2.22.0' );

with:

$styles->add( 'mediaelement',  "/wp-includes/js/mediaelement/mediaelementplayer-legacy.min.css", array(), 'X.X.X' );

being X.X.X the latest version you want to install.

Installation in Drupal

With Drupal, you can create your own module and add MediaElement to it (see this document for more information).

However, if you are using, or if you have a Drupal 7 installation and want to use, MediaElement Module, you have to update it performing the following steps:

Install the Libraries module, if you haven't.
Install the module into the modules folder, if you haven't.
Replace the line in the modules/mediaelement/mediaelement.admin.inc file

'#markup' => '<video width="360" height="203" id="player1" src="' . $path . '/media/echo-hereweare.mp4"><p>Your browser leaves much to be desired.</p></video>',

with

'#markup' => '<video width="360" height="203" id="player1" src="https://media.w3.org/2010/05/sintel/trailer.mp4"></video>',

Install MediaElement latest build folder into Drupal's sites/all/libraries/mediaelement directory.
Activate the module and configure it from Drupal's Module section.
Check the box on Enable MediaElement.js site wide.
Now every time you create a page/post and include the video or audio tag, the player will render them.

Additional plugins

If you want to install any of them, refer to the new plugins repository clicking here for more information.

2. Add Script and Stylesheet

<script src="/path/to/jquery.js"></script>
<script src="/path/to/mediaelement-and-player.min.js"></script>
<!-- Add any other renderers you need; see Use Renderers for more information -->
<link rel="stylesheet" href="/path/to/mediaelementplayer.min.css" />

If you wish to install the sources in different directories (i.e., all JavaScript files in a js, all CSS in a styles, Flash shims in plugins, etc.), add the following CSS update after the mediaelementplayer.css reference (only if the images are not in the same folder as the stylesheet):

<link rel="stylesheet" href="/path/to/mediaelementplayer.min.css" />

<style>
.mejs__overlay-button {
	background-image: url("/path/to/mejs-controls.svg");
}
.mejs__overlay-loading-bg-img {
	background-image: url("/path/to/mejs-controls.svg");
}
.mejs__button > button {
	background-image: url("/path/to/mejs-controls.svg");
}
</style>

Also, update pluginPath within the configuration options (visit Usage and Tips and API and Configuration for more details) with the location of the Flash shims.

You can also use a CDN to load your script and stylesheet.

As stated above, the important factor is to set the pluginPath correctly, but also, for this scenario, you will need to set the shimScriptAccess configuration element as always to make the shims to work.

As an example:

$('video, audio').mediaelementplayer({
	// Do not forget to put a final slash (/)
	pluginPath: 'https://cdnjs.com/libraries/mediaelement/',
	// this will allow the CDN to use Flash without restrictions
	// (by default, this is set as `sameDomain`)
	shimScriptAccess: 'always'
	// more configuration
});

Check the content of mediaelementplayer.min.css (or if you decided to use the old styles, mediaelementplayer-legacy.min.css) to customize any CSS related to the player.

Also, as an example, visit this section to have an idea on how can you customize the look-and-feel of the player.

3. Add `<video>` or `<audio>` tags

Default setup

If your users have JavaScript and/or Flash, the easiest route for all browsers and mobile devices is to use a single file.

<video src="myvideo.mp4" width="320" height="240" type="video/mp4"></video>

or

<video width="320" height="240">
	<source type="video/mp4" src="myvideo.mp4" />
</video>

All the formats supported are listed in this table. Besides that, there are some additional attributes that can be added in the video/audio tag. Visit the Attributes section for more information.

Note: Although it is important to include their MIME type so the plugin renders the media accurately, some browsers like Firefox can display warnings in regards of unknown/custom MIME types. But they do not prevent the plugin to work properly.

Multiple codecs (Optional)

This includes multiple codecs for various browsers (H.264 for IE9+, Safari, and Chrome, WebM for Firefox 4 and Opera, Ogg for Firefox 3).

<video width="320" height="240" poster="poster.jpg" controls="controls" preload="none">
	<source type="video/mp4" src="myvideo.mp4" />
	<source type="video/webm" src="myvideo.webm" />
	<source type="video/ogg" src="myvideo.ogv" />
</video>

Browsers with JavaScript disabled (Optional)

In very rare cases, you might have a non-HTML5 browser with Flash turned on and JavaScript turned off. In that specific case, you can also include the Flash <object> code. For more information about this approach, please read Video for Everybody! documentation.

<video width="320" height="240" poster="poster.jpg" controls="controls" preload="none">
	<source type="video/mp4" src="myvideo.mp4" />
	<source type="video/webm" src="myvideo.webm" />
	<source type="video/ogg" src="myvideo.ogv" />
	<object width="320" height="240" type="application/x-shockwave-flash" data="/path/to/mediaelement-flash-video.swf">
		<param name="movie" value="/path/to/mediaelement-flash-video.swf" />
		<param name="flashvars" value="controls=true&amp;poster=myvideo.jpg&amp;file=myvideo.mp4" />
		<img src="myvideo.jpg" width="320" height="240" title="No video playback capabilities" />
	</object>
</video>

If you plan to use this approach, just remember that it will only work for native media types, and you can use mediaelement-flash-audio.swf (MP3), mediaelement-flash-audio-ogg.swf (OGA) or mediaelement-flash-video.swf (MP4, FLV, RTMP, M4V, etc.) shims for it.

Use of Closed Captioning (Optional)

The way to setup closed captioning is by using the track tag as follows:

<video width="320" height="240" poster="poster.jpg" controls="controls" preload="none">
	<source type="video/mp4" src="myvideo.mp4" />
	...
	<track src="subtitles_en.[srt|vtt]" kind="[subtitles|captions|chapters]" srclang="en" label="English">
	<track src="subtitles_es.[srt|vtt]" kind="[subtitles|captions|chapters]" srclang="es" label="Spanish">
	...
</video>

This works perfectly on any browser that supports HTML5 natively; however, to make this work across browsers, an AJAX request is performed to parse the content of the subtitles file.

That's why is important to put the caption files in the same domain as the player is. Otherwise, the request of the file will be denied.

As a final note, to display closed captioning in iOS, they will need to be transcoded it in the video. To learn more about this topic, please read The Zencoder guide to closed captioning for web, mobile, and connected TV.

4. Setup Player

The easiest way to use the player is adding the class="mejs__player" to any <video>, <audio>, or <iframe> tags, and add the data-mejsoptions to configure it.

For more details and ways to set the player, please read the Usage section.

5. Set default language (Optional)

By default, all the strings in MediaElementJS are in English. If you wanna set a different language for them, you need to set the language code via mejs.i18n.locale.language before the player instantiation, and specify the language in the media container in the success callback.

Optionally, just can set the attribute lang in the <html> tag with the one you set before, to declare the default language of the text in the rest of the page as well.

<script>

	mejs.i18n.language('de'); // Setting German language

	$('audio,video').mediaelementplayer({
		success: function(player, node) {

			// Optional
			$(player).closest('.mejs__container').attr('lang', mejs.i18n.language());

			$('html').attr('lang', mejs.i18n.language());

			// More code
		}
	});
</script>

Available languages:

Catalan (ca)
Czech (cs)
German (de)
English (en)
Spanish; Castilian (es)
French (fr)
Hungarian (hu)
Italian (it)
Japanese (ja)
Korean (ko)
Dutch (nl)
Polish (pl)
Portuguese (pt)
Brazilian Portuguese (pt-BR)
Romanian (ro)
Russian (ru)
Slovak (sk)
Swedish (sv)
Ukrainian (uk)
Simplified Chinese (zh-CN)
Traditional Chinese (zh-TW)

Back to Main

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

installation.md

installation.md

Installation

0. Setup MIME-types (optional)

1. Install `MediaElementJS`

Installation in WordPress

In `wp-admin/about.php`

In `wp-admin/includes/ajax-actions.php`

In `wp-includes/media.php`

In `wp-includes/js/mediaelement` folder

In `wp-includes/script-loader.php`

Installation in Drupal

Additional plugins

2. Add Script and Stylesheet

3. Add `<video>` or `<audio>` tags

Default setup

Multiple codecs (Optional)

Browsers with JavaScript disabled (Optional)

Use of Closed Captioning (Optional)

4. Setup Player

5. Set default language (Optional)

Files

installation.md

Latest commit

History

installation.md

File metadata and controls

Installation

0. Setup MIME-types (optional)

1. Install MediaElementJS

Installation in WordPress

In wp-admin/about.php

In wp-admin/includes/ajax-actions.php

In wp-includes/media.php

In wp-includes/js/mediaelement folder

In wp-includes/script-loader.php

Installation in Drupal

Additional plugins

2. Add Script and Stylesheet

3. Add <video> or <audio> tags

Default setup

Multiple codecs (Optional)

Browsers with JavaScript disabled (Optional)

Use of Closed Captioning (Optional)

4. Setup Player

5. Set default language (Optional)

1. Install `MediaElementJS`

In `wp-admin/about.php`

In `wp-admin/includes/ajax-actions.php`

In `wp-includes/media.php`

In `wp-includes/js/mediaelement` folder

In `wp-includes/script-loader.php`

3. Add `<video>` or `<audio>` tags