Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
You can use plugins with the MediaElement player. Learn how!
Links
- MediaElement.js homepage
- Treehouse video on minification
- MediaElement plugin installation
- Skip-back plugin documentation
Code
Final snippet to customize player:
$('video, audio').mediaelementplayer({
features: ['playpause', 'tracks', 'progress', 'skipback'],
startLanguage: 'en',
skipBackInterval: 4
});
Minification
- This video, from the course Front End Performance Optimization, is a great introduction to 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 upRelated 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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up