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
Peter Stone
Front End Web Development Techdegree Graduate 20,124 PointsVideo 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
16,529 PointsI 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
7,236 PointsIn 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 ...
Phonethip Hobson
7,352 PointsI 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
9,753 Pointsthanks... he doesn't mention you need to upload the svg file to the workspace in this vid!!
Seamus Sionóid
27,798 PointsHi 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 :)