"WordPress Admin Settings" was retired on December 16, 2016. You are now viewing the recommended replacement.

Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Create a Media Player with MediaElement.js

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Extending the Media Player

6:12 with Joel Kraft

You can use plugins with the MediaElement player. Learn how!

Code

Final snippet to customize player:

      $('video, audio').mediaelementplayer({
        features: ['playpause', 'tracks', 'progress', 'skipback'],
        startLanguage: 'en',
        skipBackInterval: 4
      });

Minification

Demo CSS Style Page

Here's a link to a demo CSS file to style the player. You might need to right-click and "save link as..." to download it, or just copy it from your browser and paste it into an empty file.

The styles are basic, but should give you an idea of how to begin applying your own styles to the player! To use it, add it to the project file underneath the other styles, something like the following:

    <link href="skip-back/skip-back.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">

    <!-- player styles below other styles -->
    <link href="path/to/mejs-treehouse.css" rel="stylesheet">
  </head>

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    The MediaElement Player has default controls that will be enough for 0:00
    most projects. 0:03
    But what if you want a feature that doesn't exist in the library? 0:05
    Fortunately, MediaElement.js lets you extend it through plugins. 0:09
    For example, let's say we want a skip back button to rewind the media a few seconds. 0:13
    I'll first go to the plugins page, and see if that exists. 0:19
    In MediaElement js on the front page there, 0:24
    we have a link called plugins, that I'll go to. 0:26
    And this is a GitHub repository page. 0:29
    And down here, it says Available plugins. 0:34
    So if I click that, there's all the available plugins and 0:37
    there is a Skip Back control. 0:40
    So, let's go back to the top and see how to install it. 0:44
    Under the installation instructions, 0:50
    it says download the package from this web page actually. 0:53
    And reference any plugins you need from the dist folder, 0:58
    that's the distribution folder, and add any configuration related to the plugin. 1:02
    So to get this repository, I can go to the top here and 1:08
    clone or download, is a option, and download zip. 1:13
    And once that's downloaded, I can open it up. 1:20
    And inside the distribution folder, there is the skip-back folder. 1:25
    And there are five files in here. 1:31
    Now, we're just going to need the min.js and the min.css. 1:34
    Those are minified files, and they're suitable for 1:39
    production, as opposed to these two. 1:41
    So, we'll just need these two, and then we'll grab the I18n file as well. 1:44
    And that just gives support for languages other than English. 1:50
    If you're curious about minification, 1:55
    I'll put some information in the teacher's notes for you. 1:57
    So if I go back to my project, 2:01
    I've actually already created a skip back folder and 2:05
    I put it in the main folder and I've loaded these files up. 2:08
    So we just need to link them to our HTML. 2:14
    And to do that, I just want to show you the installation instructions 2:18
    show to put the JavaScript files for the plugins underneath 2:23
    the mediaelement-and-player.min file where that's loaded. 2:29
    So load them afterwards, but 2:34
    load them before the script tag where we configured the player. 2:36
    And similarly, we want to load the plugin CSS after 2:41
    the mediaelement player css is loaded. 2:46
    So, in our project here, I'm going to do all of that. 2:50
    Loading the three files right here. 2:57
    So, that's under our mediaelementplayer JavaScript in CSS, but 2:59
    before the main.css, that's our custom styles. 3:04
    And of course at the bottom is this script tag, so we're well above that. 3:09
    And I'm going to just copy this line, paste it in, and 3:14
    then I'll make it point to our JavaScript. 3:20
    Skip back.min.js. 3:25
    And we'll point to the I18n file. 3:35
    And then we will grab the css link and paste it in. 3:42
    Great, so our plugins files are all loaded. 3:56
    And I'll just go down to the bottom. 4:00
    And we need to configure the player to show our new control. 4:02
    So we'll have to enter it in this array. 4:06
    And I'll just show you, if I go back to the main page for 4:09
    MediaElement.js and go to API 4:14
    and go and look at that list of properties again. 4:20
    And we can find features. 4:25
    And I'll just show you that skipback is all one string. 4:26
    It's all one without spaces or hyphens. 4:30
    So that's how we'll enter it into our array here. 4:35
    And I'll save it. 4:43
    And if we go to the browser and refresh, we get our new control now. 4:46
    Now, it is a 30 second skip back, and that's by default. 4:52
    So, to change that, we'll have to configure this control. 4:55
    And I'll just show you in the plug-ins page again. 5:00
    If we go back down to available plug-ins and click on Skip Back, 5:06
    here is how to configure that control Skip Back interval. 5:12
    And it takes a number, and defaults to 30 so we'll make that 4. 5:17
    So I'll just copy this, and 5:22
    if I hit a comma and paste it in, and 5:27
    type 4, that should configure it. 5:32
    So let's save that, and I'll switch over to the browser and refresh. 5:36
    And you can see we have a four second skip back. 5:41
    And I'll just jump to the middle here and we can see it skip back four seconds. 5:45
    That's great. 5:49
    And it works for the audio as well. 5:50
    So great, that's the basics of using the Media Element Player. 5:56
    Experiment with it. 6:02
    You could add more controls, for example. 6:03
    You could use other plugins, or even style a player with CSS. 6:05
    Have fun. 6:10

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up