Preview
Video Player
00:00
00:00
Extending the Media Player
6:12You can use plugins with the MediaElement player. Learn how!
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