Audio Player

Friends Using MediaElement.js

What's New in 3.0

For a full list of change and new features, please visit the change log.

If you already have a MediaElement installation and you want to upgrade, please follow the migration guide.

If you want to expand the player, please visit the MediaElement.js plugins repository.

Getting Started

1. Download MediaElement.js

Download .zip

Or clone the repository

git clone https://github.com/johndyer/mediaelement.git

Or use NPM

npm install mediaelement

2. Include JavaScript and CSS

Use your local files

<script src="path/to/mediaelement-and-player.min.js"></script>
<link href="path/to/mediaelementplayer.css" rel="stylesheet">

Use CDN files

<script src="https://cdn.jsdelivr.net/mediaelement/latest/mediaelement-and-player.min.js"></script>
<link href="https://cdn.jsdelivr.net/mediaelement/latest/mediaelementplayer.css" rel="stylesheet">

3. Setup player

Add the class="mejs-player" to any <video>, <audio>, or <iframe> tags

HTML5 audio or video

<video class="mejs-player">
    <source src="/path/to/video.mp4" />
</video>

<audio src="/path/to/audio.mp4" class="mejs-player"></audio>

Embeddable players (YouTube, etc.)

<iframe class="mejs-player" width="640" height="360" src="https://www.youtube.com/embed/frdj1zb9sMY?rel=0" frameborder="0" allowfullscreen></iframe>

See the detailed installation instructions for additional settings.