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


Video Player



Player information


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: 0.125rem;
}

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


Player information