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

Adding MediaElement.js

7:05 with Joel Kraft

Let's download and install the MediaElement player in an existing webpage.

MediaElement.js Homepage

  • Note: Heads up! The MediaElement page layout has changed since this was recorded. Click "Installation" after following the link above to find the instructions.

Obtaining jQuery

jQuery is no longer Included in MediaElement download. MediaElement still requires jQuery to work, though. To get jQuery, the best way is to link to a CDN, as in the snippet below under the "Code" heading. If you'd like to download it yourself and serve it from your js folder, the way it is done in the video, you can get a copy by clicking here. If that link renders a page of text, you can just select all (cmd or ctrl + A) and copy the text, pasting it into a new file called jquery.js. Alternatively, you could go to the jQuery download page, and download the version you want to use.

Code

Links to the documents in index.html

<script src="js/jquery.js"></script>
<script src="js/mediaelement-and-player.min.js"></script>
<link href="css/mediaelementplayer.css" rel="stylesheet">

Alternatively, you can use a CDN to serve jQuery, which is generally recommended. Instead of linking to it from the js folder as demonstrated above, use a link from this page. The script tag will look something like this:

<script
  src="http://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

Centering an Element with CSS

This video, from the Treehouse course CSS Layout Basics, covers the CSS centering technique used in this video.

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 first thing we'll need to do is download MediaElement.js. 0:00
    I'll go to the website which is linked from the teacher's notes below. 0:04
    I'll scroll down to GETTING STARTED and download the zip file. 0:08
    You can also use Git or npm to download it, 0:13
    if you feel comfortable with those tools. 0:16
    And, I will open up the zip file and, 0:19
    inside the folder, there is a lot of files. 0:22
    So, we actually only need four files and 0:26
    two of them are listed on the instructions page. 0:30
    We have mediaelement-and-player.min.js and mediaelementplayer.css. 0:32
    So if I switch back to our directory, if I open the build folder, 0:39
    that's where all those files are gonna be. 0:44
    We have mediaelement-and-player.min.js right here, 0:48
    and, mediaelementplayer.css. 0:53
    Now, we also need to load the control, the images for the controls for 0:56
    a mediaelementplayer and that's mejs-controls.svg. 1:01
    And then the last file we need is actual jquery, mediaelement relays on jquery, 1:07
    the popular JavaScript library for working with the DOM. 1:11
    So, let's go to our work space and upload those files. 1:16
    The first thing I wanna do is, 1:21
    create a New Folder to hold our JavaScript and I'll just name it js. 1:23
    And I'll Upload jquery 1:29
    And, mediaelement-and-player.min.js. 1:36
    And then, I'll upload the CSS. 1:47
    Mediaelementplayer.css. 1:54
    And our svg file, mejs-controls. 1:58
    Great, so we have all of our files uploaded now. 2:07
    We just need to link to them from our index page. 2:10
    So I'm gonna switch back over to the instructions for MediaElement.js and 2:13
    just copy these lines. 2:18
    And I'll paste them into the HTML file. 2:21
    And I'm gonna put them right above the main.css, that's our custom stylesheet. 2:26
    And need to change these directories to the correct ones. 2:35
    So the CSS files in our CSS directory and 2:40
    the JavaScript file is in our js directory. 2:43
    And then I'll just copy this line and paste it below. 2:47
    And, we need to load jQuery. 2:51
    And we need to load it above the mediaelement so 2:56
    that it exist by the time the JavaScript starts executing. 3:00
    So great, we have all of our files loaded now. 3:04
    We just need to let media element know about the video element and 3:07
    the audio element. 3:12
    And the way we do that is to add a special class to each one. 3:15
    And I'mgonna take the controls away cuz media element 3:19
    is gonna supply those controls. 3:22
    And the class that we'll add is called M-E-J-S__ player. 3:25
    And I'll add the same class to our audio file, or sorry, our audio element. 3:36
    And if I save this and switch over to the browser and refresh, 3:44
    you can see, this is the default look of MediaElement.js, 3:48
    this is the default player. 3:53
    And all of these controls are stylable through CSS. 3:56
    They're all individual HTML elements that have been added. 3:59
    And, the same with our audio. 4:05
    So, Treehouse actually uses MediaElement.js. 4:06
    So, as you're looking at this video right now, 4:10
    the controls underneath are media element controls that have been styled to CSS. 4:13
    You can tell there's quite a bit of flexibility there. 4:19
    Now, we're not gonna get into styling these in this workshop. 4:23
    What I will do is, let's center these on the page. 4:27
    So to do that, I'm gonna add a wrapper around each element. 4:31
    >> I'm gonna call this videoWrapper. 4:43
    And then I'll apply some styles to these wrappers. 4:50
    And I'll create a separate wrapper for the audio. 4:59
    So I'll save that and I'm gonna go back to our main.css, that's our custom styles. 5:13
    And, media element is taking our video and 5:19
    audio elements and wrapping them in its own elements. 5:23
    This rule isn't really doing much for us anymore so I'm gonna take it and 5:29
    just re-apply it to our wrapper. 5:33
    There are two wrappers. 5:41
    And, I'll also want to take these and apply a width to each one and 5:44
    I have different widths so I'll use separate rules. 5:50
    Then, the video is 852 pixels. 5:58
    And that's just the width of the video file that we have on the page. 6:04
    And the width of the audio is 400 pixels. 6:11
    And, if you're not too familiar with what's happening here with the CSS, 6:16
    that's not too important. 6:20
    We have some great CSS courses that I'll link to in the teacher's notes. 6:22
    But this is just allowing us to center our elements on the page. 6:27
    So I'm gonna refresh, and we have centered elements now. 6:31
    And I just wanna show you that, if I switch over to Firefox and 6:36
    refresh, we have the same look and feel on Firefox. 6:41
    And if I switch over to Safari, we have the same look and feel there too. 6:45
    So, this is giving us a consistent look across browsers So in the next video, 6:51
    let's see how to customize what controls show up down here and in what order. 6:57
    I'll see you in the next video. 7:04

    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