Preview
Video Player
00:00
00:00
Setting Options for the Media Player
5:33Learn how to customize the functionality of the MediaElement player.
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