mediaelement

# Installation * [0. Setup MIME-types](#mime-types) * [1. Install `MediaElementJS`](#install) * [Installation in WordPress](#wordpress) * [In `wp-admin/about.php`](#wp-about) * [In `wp-admin/includes/ajax-actions.php`](#wp-ajax) * [In `wp-includes/media.php`](#wp-media) * [In `wp-includes/js/mediaelement` folder](#wp-js-mediaelement) * [In `wp-includes/script-loader.php`](#wp-script) * [Installation in Drupal](#drupal) * [Additional plugins](#plugins) * [2. Add Script and Stylesheet](#script-and-stylesheet) * [3. Add `<video>` or `<audio>` tags](#tags) * [Default setup](#default-setup) * [Multiple codecs (Optional)](#multi-codecs) * [Browsers with JavaScript disabled (Optional)](#disabled-javascript) * [Use of Closed Captioning (Optional)](#closed-captioning) * [4. Setup Player](#player) * [5. Set default language (Optional)](#language) <a id="mime-types"></a> ## 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](http://www.microsoft.com/technet/prodtechnol/WindowsServer2003/Library/IIS/eb5556e2-f6e1-4871-b9ca-b8cf6f9c8134.mspx?mfr=true) and [IIS7](https://technet.microsoft.com/en-us/library/cc725608(v=ws.10).aspx). If you are working with local files and plan to test Flash playback, make sure you go to the [Flash Security Settings](http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html) 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](https://www.chromium.org/audio-video) 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](http://ronallo.com/blog/html5-video-everything-i-needed-to-know) 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. <a id="install"></a> ## 1. Install `MediaElementJS` To get the default installation there are several different ways. 1. Download the package from https://github.com/mediaelement/mediaelement 2. Use a CDN reference; the most popular ones are [jsDelivr](http://cdn.jsdelivr.net/npm/mediaelement/) and [cdnjs](https://cdnjs.com/libraries/mediaelement). 3. Through GIT: `git clone https://github.com/mediaelement/mediaelement.git` 4. Through npm: `npm install mediaelement` 5. Through BOWER: `bower install mediaelement` 6. If you are using Meteor: `meteor add johndyer:mediaelement` or `meteor npm install mediaelement` <a id="wordpress"></a> ### Installation in WordPress WordPress currently incorporates `MediaElementJS` as a part of the [Embeds](https://codex.wordpress.org/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: <a id="wp-about"></a> #### In `wp-admin/about.php` 1. Find the block ``` if ( ! wp_is_mobile() ) { wp_enqueue_style( 'wp-mediaelement' ); ``` and add below the following: ``` wp_enqueue_script( 'mediaelement-vimeo' ); ``` 2. 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', ``` <a id="wp-ajax"></a> #### In `wp-admin/includes/ajax-actions.php` 1. Find the blocks that contain: ``` wp_print_scripts( 'wp-mediaelement' ); ``` and replace them with: ``` wp_print_scripts( array( 'mediaelement-vimeo', 'wp-mediaelement' ) ); ``` <a id="wp-media"></a> #### In `wp-includes/media.php` 1. 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' ); } ``` 2. Find the block that contains: ``` if ( $is_vimeo ) { wp_enqueue_script( 'froogaloop' ); } ``` and replace it with: ``` if ( $is_vimeo ) { wp_enqueue_script( 'mediaelement-vimeo' ); } ``` 3. 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" ); ``` <a id="wp-js-mediaelement"></a> #### In `wp-includes/js/mediaelement` folder 1. Remove all the files from the folder and install all the files inside the `build` folder from the `MediaElement` project. 2. Download and copy/paste the WordPress files contained in this [link](https://github.com/mediaelement/mediaelement/files/1048572/wp-mejs.zip). <a id="wp-script"></a> #### In `wp-includes/script-loader.php` 1. 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. 2. Remove `$scripts->add( 'froogaloop', "/wp-includes/js/mediaelement/froogaloop.min.js", array(), '2.0' );` 3. 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. <a id="drupal"></a> ### 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`](https://www.drupal.org/project/mediaelement), you have to update it performing the following steps: 1. Install the [Libraries](https://www.drupal.org/project/libraries) module, if you haven't. 2. Install the module into the `modules` folder, if you haven't. 3. 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>', ``` 4. Install `MediaElement` latest `build` folder into Drupal's `sites/all/libraries/mediaelement` directory. 5. Activate the module and configure it from Drupal's `Module` section. 6. Check the box on `Enable MediaElement.js site wide`. 7. Now every time you create a page/post and include the `video` or `audio` tag, the player will render them. <a id="plugins"></a> ### Additional plugins If you want to install any of them, refer to the new plugins repository clicking [here](https://github.com/mediaelement/mediaelement-plugins) for more information. <a id="script-and-stylesheet"></a> ## 2. Add Script and Stylesheet ```html <script src="/path/to/jquery.js"></script> <script src="/path/to/mediaelement-and-player.min.js"></script>  <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**): ```html <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](usage.md) and [API and Configuration](api.md) 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: ```javascript $('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](resources.md#styles) to have an idea on how can you customize the look-and-feel of the player. <a id="tags"></a> ## 3. Add `<video>` or `<audio>` tags <a id="default-setup"></a> ### 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. ```html <video src="myvideo.mp4" width="320" height="240" type="video/mp4"></video> ``` or ```html <video width="320" height="240"> <source type="video/mp4" src="myvideo.mp4" /> </video> ``` All the formats supported are listed in [this table](usage.md#renderers-list). Besides that, there are some additional attributes that can be added in the `video`/`audio` tag. Visit the [Attributes](api.md#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. <a id="multi-codecs"></a> ### 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). ```html <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> ``` <a id="disabled-javascript"></a> ### 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!](http://camendesign.com/code/video_for_everybody) documentation. ```html <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&poster=myvideo.jpg&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. <a id="closed-captioning"></a> ### Use of Closed Captioning (Optional) The way to setup closed captioning is by using the `track` tag as follows: ```html <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](http://blog.zencoder.com/2012/07/13/closed-captioning-for-web-mobile-and-tv/). <a id="player"></a> ## 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](usage.md#initialize). <a id="language"></a> ## 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. ```html <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](../README.md)