Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Create a Media Player with MediaElement.js

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Why Use MediaElement.js?

3:02 with Joel Kraft

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!

MediaElement.js Homepage

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related 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 up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up