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

Peter Stone
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Peter Stone
Front End Web Development Techdegree Graduate 20,124 Points

Video and Audio player does not add the controls

I added all the appropriate code in the head before the main.css file. I added the current CDN jQuery link, and added the class "mejs_player" to the audio and video elements... still does not show the controls.. been stuck for almost an hour and can't continue video and follow along until this is fixed!

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML Video and Audio</title>

<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
<script

src="http://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"></script> <script src="js/mediaelement-and-player.min.js"></script> <!-- Add any other renderers you need; see Use Renderers for more information --> <link rel="stylesheet" href="css/mediaelementplayer.css"> <link rel="stylesheet" href="css/main.css"> </head> <body>

<h1>HTML Video and Audio</h1>

<div class="wrapper">

  <h2>Video Example</h2>
 <video width="852" height="480" class="mejs_player">
    <source src="http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge.mp4" type="video/mp4">
    <source src="http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge.ogg" type="video/ogg">
    <track label="English" kind="subtitles" srclang="en" src="bridge-captions.vtt" default>
  </video>

  <h2>Audio Example</h2>

  <audio class="mejs_player">
    <source src="http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge-audio.mp3" type="audio/mp3">
  </audio>
</div>

</body> </html>

4 Answers

Andrey Misikhin
Andrey Misikhin
16,529 Points

I don't see "controls" attribute in your <audio> <video> tags, I think this is a problem.

<video controls width="852" height="480" class="mejs_player"></video>
<audio controls  class="mejs_player"></audio>
Jeremy Bennett
Jeremy Bennett
7,236 Points

In the video he does seem to explicitly remove the 'control' attribute from the audio tag (replacing it with the mejs_player class), and the video tag didn't have the 'control' attribute to begin with.

Anyway I'm having the same issue.. I assume the problem is on my end, but I can't figure out what ...

I had the same issue but found the problem once I previewed the existing code in Chrome and used my browser developer tool to find the 404 error. It led me the answer. My mejs-controls.svg was not in the CSS folder. Once I dropped the file in the folder and refreshed the page, the error went away in the console and the buttons to showed up.

Ally Sparham
Ally Sparham
9,753 Points

thanks... he doesn't mention you need to upload the svg file to the workspace in this vid!!

Hi Peter. You've probably moved beyond this section but this answer may be of benefit to others.

The problem that you have with your code above is that you only have one underscore for the class in your video and audio tags!

Your video tag should be this: <video controls width="852" height="480" class="mejs__player"></video>

I made the same mistake and it took me ages to figure out what the problem was :)