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

Video Player
00:00
00:00
00:00




    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;
    }
                


    Player information