Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Create a Media Player with MediaElement.js!
You have completed Create a Media Player with MediaElement.js!
Preview
HTML lets us add audio and video elements with relative ease, and browsers give us pretty good players right out of the box. Why, then would we want to install a separate library to help us manage media playback? Find out here!
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
[MUSIC]
0:00
Hi, I'm Joel, a JavaScript developer and
teacher at Treehouse.
0:04
I'd like to introduce
you to MediaElement.js.
0:09
MediaElement.js is a third
party library which
0:12
lets you add useful controls to your
video and audio in your web pages.
0:15
With JavaScript and a little CSS,
MediaElement.js provides a consistent and
0:21
customizable experience across browsers.
0:25
Let's have a look at how it can help you
present video and audio to your end users.
0:29
You can launch a workspace
below to follow along, or
0:34
download the project files and
run them on your local machine.
0:38
I'm in Google Chrome and
I have the index page open.
0:42
You can see there's a video and
an audio element displaying on the page.
0:45
I added those to this page using
the audio and video HTML tags.
0:50
Chrome provides these controls for
controlling the playback of the video and
0:55
audio.
1:00
They look and work great.
1:05
Looking at them,
1:07
you might be wondering why you'd
need a library like MediaElement.js.
1:08
Well, let's look at
the same page in Firefox.
1:12
See the difference?
1:17
Let's view the page in Safari now.
1:19
Each has its own look.
1:23
Each of these styles are good
in their own way, but
1:25
you probably want a consistent look and
feel for your media.
1:28
Moreover, your website probably uses
specific colors and design elements, and
1:32
you'll want to style the video and
audio controls to fit your page design.
1:37
Let's switch back to Chrome.
1:41
I'll inspect this play button.
1:45
And you can see there's no element
to style, it's just a video tag.
1:49
All these controls are part of
the browser's native player and
1:55
don't exist as elements you
can apply CSS style to.
1:58
In addition, with HTML alone, you can't
change where these controls appear,
2:03
and you can't specify which
controls to show or which to hide.
2:08
You also may want controls
that don't exist here.
2:13
For example, look at the controls for
this Treehouse video you're watching.
2:16
There's a ten-second rewind button,
and a control for playback speed.
2:21
MediaElement.js will give us a consistent
look and feel across all browsers,
2:26
and allow us to customize and
style the controls.
2:32
We can even use plug-ins
to add extra functionality,
2:36
like a rewind button, as you'll see.
2:39
In fact,
2:41
let's just switch over to a demo of
the player you'll build in this workshop.
2:42
We have a play/pause button,
A closed caption button for
2:47
the video player, a progress bar,
and a four-second rewind button.
2:54
Let's get started in the next video.
3:00
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