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!
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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