Preview
Video Player
00:00
00:00
Adding MediaElement.js
7:05Let's download and install the MediaElement player in an existing webpage.
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