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
Learn how to customize the functionality of the MediaElement player.
Links
MediaElementPlayer configuration docs
Code
This is the code we use in the video to customize the player:
$('video, audio').mediaelementplayer({
features: ['playpause', 'tracks', 'progress'],
startLanguage: 'en'
});
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
Now that we have MediaElementPlayer
working on our page,
0:00
let's customize it a bit.
0:03
Let's simplify the controls
we give our user.
0:05
We'll just use a play/pause button,
a closed caption, and
0:08
a progress bar, like in this example.
0:13
To do that, we're gonna have to change
the way that MediaElement is connecting
0:17
to our media on the page.
0:21
So in the last video,
you saw we added the class mejs__player
0:24
to the video and
the audio elements, and that way
0:30
MediaElementPlayer was able to target
these elements and work its magic on them.
0:34
Now we're going to select them through a
different means using jQuery on the page,
0:41
just a little bit of script at the bottom.
0:46
So, I'm gonna remove
these classes from both
0:49
elements, and then I'll open
up a script tag at the bottom.
0:54
Normally, if I was gonna
create JavaScript for a page,
1:01
I would create a separate document to
put the JavaScript in and link to that.
1:03
But in this case we're just
gonna use one line of code.
1:09
So, it's okay just to do it in the HTML.
1:12
So I'll start by typing a dollar sign,
which is the shorthand for jQuery.
1:17
And I'll pass my selector in,
which is video, audio, and
1:22
this selects all the video and
audio elements on the page.
1:27
Now there's only two, there's a video and
an audio element, but
1:31
if there were 15 of each,
it would grab all of them.
1:36
And if you wanted to target
specific players and
1:40
leave others out of this selection,
you could use IDs or classes.
1:44
But for our purposes,
we'll just use this selector.
1:49
Now, on this collection,
1:53
we're gonna call a special method
called mediaelementplayer.
1:55
And now that we've called this method,
that makes MediaElement grab this and
2:05
set it up the same way it did
when we used our classes.
2:11
So if I save this,
in other words and refresh,
2:16
you see no change whatsoever,
which is exactly what we want.
2:22
We're doing the same thing but
through different means, but
2:28
through these means we can actually
modify the player, customize it.
2:31
So I'm gonna pass an object in,
2:36
in order to do that to our
mediaelementplayer method.
2:39
And inside that object,
I'm going to use properties and
2:43
values to configure the player.
2:48
What properties and values?
2:53
Well, if I go to MediaElement.js,
the homepage, and
2:54
I go to API, and
go down to Configuration and
2:59
MediaElementPlayer, it has
a list of all the properties and
3:03
information on what kind of values
to pass in with those properties.
3:08
If I go down to features, that's
the one we want, and it takes an array
3:17
of strings that tell MediaElement
which controls you wanna show.
3:22
So I wanna show the playpause button,
the tracks control, and progress.
3:28
So I'll go back to the script, And
3:37
if I type in features, okay,
3:41
and then it takes an array and
3:46
pass in playpause, tracks, and
3:51
progress, and close the array.
3:56
So, this array is going to specify
what controls and in what order,
4:02
from left to right, we see.
4:06
So I'll save this, and let's go see.
4:09
So I refreshed, and you can see now,
there's a play/pause, a closed caption,
4:14
and a progress bar.
4:19
Notice that MediaElement is smart enough
not to include the closed caption in
4:22
the audio because there's no need for it.
4:25
Let's add one more piece of
configuration to MediaElementPlayer.
4:29
Let's make it so that the subtitles show
up by default when the page refreshes.
4:35
So, if I go back to our API documentation,
and I go down to startLanguage,
4:42
it takes a string and
it automatically turns on a track element.
4:49
So we'll go back to our script.
4:54
I'll put a comma here, for
our object and say startLanguage.
4:56
And for our startLanguage,
5:04
the source language on the track
that we wanna show by default is EN.
5:06
So I'll pass that in, and save.
5:12
Now, when I refresh and
5:17
play a little bit, you can see that
the subtitle shows up by default.
5:21
Great.
5:26
In the next video, I'll show you how to
add an extra feature to mediaelement.js.
5:27
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