HTML5 Audio & Video
Unification Framework

MediaElement.js is a blazingly fast and amazingly powerful HTML5 audio and video library that creates a unified feel for for all media files (MP4, WebM, MP3), streaming content (HLS, M(PEG)-DASH, RTMP), and embeddable players like YouTube, Vimeo, DailyMotion, Facebook, and SoundCloud.

Video Player

Try other media sources

Audio Player

Try other media sources

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.

Getting Started

1. Download MediaElement.js

Download .zip

Or clone the repository

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

Or use NPM

npm update

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.