Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Adding MediaElement.js

eslam said
PLUS
eslam said
Courses Plus Student 6,734 Points
Posted by eslam said
eslam said
Courses Plus Student 6,734 Points

MediaElement.js

MediaElement.js has no controls after adding everything here is my heading :

    <script src="../scripts/mediaelement-and-player.min.js"></script>
    <link rel="stylesheet" href="../css/mediaelementplayer.css">

body src for jQuery 

     <script 
       src="https://code.jquery.com/jquery-3.2.1.min.js"
       integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
       crossorigin="anonymous">
    </script>

my css folder has the following :

     mediaelementplayer.css
     mejs-controls.png

my script folder has the following :

     mediaelement-and-player.min.js

so what i`m missing ?

3 Answers

Matthew Long
Matthew Long
28,407 Points
Matthew Long
Matthew Long
28,407 Points

Did you add the mediaelement.js class to the video and audio tags? 

<video width="852" height="480" class="mejs__player">
  // source and track here
</video>

If that doesnt work for you like it did in the video then mediaelement may be different since it was recorded. You can go to the official mediaelement.js installation documentation to learn more. I'm seeing different properties being used on that page than what I saw in the video when I skimmed through it just now.

However, it does say at the bottom of the installation documents that the easiest way to use the player is just adding the class mejs__player so definitely start with that.

eslam said
PLUS
eslam said
Courses Plus Student 6,734 Points
eslam said
eslam said
Courses Plus Student 6,734 Points

i did ofc i added that class and its not working so i guess i`m going to read the docs on github,

Lori Moritz
PLUS
Lori Moritz
Courses Plus Student 9,150 Points
Lori Moritz
Lori Moritz
Courses Plus Student 9,150 Points

You need mejs-controls.svg in your css folder, not the .png file