MediaElement.js

audio/video unification library

MediaElement is a wrapper that mimics the native HTML5 MediaElement syntax (get/set) as a renderer that can handle media from HTML5, YouTube, Vimeo, Soundcloud, Flash, Facebook, and other libraries.

MediaElementPlayer is built off of MediaElement and creates a fully featured player on top of the unified syntax from MediaElement.

Global Options

Language Stretching (Video Only)

Video Player

00:00

None
English (loading)

Use Up/Down Arrow keys to increase or decrease volume.

Sources

Player information

Source: https://commondatastorage.googleapis.com/gtv-videos-bucket/CastVideos/mp4/BigBuckBunny.mp4

Renderer: html5

Audio Player

By default, time handle element is hidden, but in this demo the following styles were added to display it just for audio:


#player2-container .mejs__time-buffering,
#player2-container .mejs__time-current,
#player2-container .mejs__time-handle,
#player2-container .mejs__time-loaded,
#player2-container .mejs__time-marker,
#player2-container .mejs__time-total,
#player2-container .mejs__time-hovered {
    height: 2px;
}

#player2-container .mejs__time-total {
    margin-top: 9px;
}
#player2-container .mejs__time-handle {
    left: -5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    top: -5px;
    cursor: pointer;
    display: block;
    position: absolute;
    z-index: 2;
    border: none;
}
#player2-container .mejs__time-handle-content {
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
}