mediaelement.js changeSkin

Question

Even though it does not have much documentation I can find on the subject I know that in mediaelement.js you can change the skin of the audio player or modify the CSS to create your own skin. I am running into a problem where I can't even get the default mediaelement.js skin to replace the browser player therefore I can't modify the default CSS to my styling needs. And when I try to use the player.changeSkin() method which mediaelement.js uses on their site it halts the program. I am including the skin CSS as well as the other required mediaelement.js files, at least to the best of my knowledge, and they player works fine until I try to change the skin. I am using this code to stream audio and you can find a working version (last working upload before trying to skin the player) at http://escapetodenton.com/radio/compact-player.html. For some reason the player itself is not rendering at all right now in my version of firefox either so if you have chrome or ie you'll get a better idea of what I'm trying to do.

Imported files in the header:

<script src="build/jquery.js"></script>
<script src="build/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="build/mediaelementplayer.css" />
<link rel="stylesheet" href="build/mejs-skins.css" />
<script language="javascript" type="text/javascript"src="http://premiumca5.listen2myradio.com/system/streaminfo.js"></script>
<link rel="stylesheet" href="compact-player.css" />

Player instantiation and launch:

var player = new MediaElement('player', {
pluginPath: '/build/',
features: ['playpause','progress','current','duration','volume'],
audioWidth: 400,
enableAutosize: false,
iPadUseNativeControls: true,
iPhoneUseNativeControls: true,
AndroidUseNativeControls: true,
success: function(player, node) {
player.changeSkin('mejs-ted');
player.play();
}
});

Since I can't find any documentation on the changeSkin() method I am just using it in the same way that mediaelement.js has it in their code for their home page. Any help or thoughts would be appreciated.

Solution 1

What you need to do is add class="mejs-ted" on your video element. The changeSkin() function is afaik used for dynamically swapping skins. Ie: you want to provide multiple skins that a user can switch between.

So your video tag should have your class added to it, and will look something like this:

<!-- replace mejs-ted with mejs-yourclass -->
<video class="mejs-ted" ...>
    <source type="video/mp4" src="....">
    <source type="video/ogg" src="....">
    <!-- etc.. -->
</video>

Mediaelement automatically checks for the class attribute on the video element, and adds that class to the parent container so all DOM elements can be overridden through prefixing with .mejs-yourclass

If you just want to change the default skin setting the class works fine. The mejs-skins.css has example CSS for all the styles you need to override in order to skin it differently. The only thing missing is the styles for the bigplay button:

/* overlay bigplay */
.mejs-yourclass .mejs-overlay-button {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    background: url(bigplay.png) no-repeat;
}

.mejs-yourclass .mejs-overlay:hover .mejs-overlay-button {
    background-position: 0 -100px;
}

You'll find working examples from git: https://github.com/johndyer/mediaelement/blob/master/demo/mediaelementplayer-skins.html

Solution 2

Maybe this article http://www.inserthtml.com/2013/03/custom-html5-video-player/ on InsertHTML should help you with your case.

It is using mediaelement.js to design custom CSS3 video players with HTML5 and JavaScript.