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

Sean Flanagan
Sean Flanagan
33,235 Points

No controls

Hi.

The video and audio controls seem to have vanished. Here's a snapshot of my workspace:

https://w.trhou.se/d17e8wcna2

Is there anything I need to do to bring back the controls in the manner Joel suggests?

Cheers!

4 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there, Sean Flanagan! You're doing great, but you missed one line. On line 10 of your index.html you have a script tag which includes the mediaelement-and-player.min.js. But for it to work, you have to also load in the jQuery as it depends on it.

So if I make your code look like this:

<script src="js/jquery-3.3.1.js"></script>
<script src="js/mediaelement-and-player.min.js"></script>

The controls appear when I refresh! Hope this helps! :sparkles:

Sean Flanagan
Sean Flanagan
33,235 Points

Hi Jennifer Nordell. Thanks for your help.

I added the missing jQuery script line:

<script src="js/jquery-3.3.1.js"></script>

I put it above this line:

<script src="js/mediaelement-and-player.min.js"></script>

Then I refreshed the page and still no controls.

Wayne Yallop
Wayne Yallop
30,808 Points

Hi Sean, not sure if this fix comes too late, but I found the problem I was having was that I had put the 'mejs-controls.svg' file in to the root of my project. When I started debugging I found that the 'mediaelement-and-player.min.js' was looking for the svg file in the css folder, so I moved it there where it worked fine.

I have tried everything you all have suggested and still no luck. I have even adopted the code above instead of using my own... Any suggestions?

Marek Ostrowski
Marek Ostrowski
16,649 Points

mejs-controls.svg must be in css folder