# 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, 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

Sources

#### Player information

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

Renderer: html5

### Video Player - MPEG-Dash

Videoplayer which has mpeg-dash as the only source, so it gets loaded initially to find problems that only happens on load.

#### Player information

Source: https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd

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:

CSS-Code

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

Sources

#### Player information

Source: http://www.largesound.com/ashborytour/sound/AshboryBYU.mp3

Renderer: html5