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

Nikola Jankovic
Nikola Jankovic
10,793 Points
Posted by Nikola Jankovic
Nikola Jankovic
10,793 Points

Controls on the video and audio player doesn't show

This is my HTML code:

<!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="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 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 href="css/main.css" rel="stylesheet">
  </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>

I have downloaded files mediaelementplayer.css and mejs-controls.svg to css, mediaelement-and-player.min.js to js folder like in the video. I used jquery cdn-

  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>

It wont show buttons to video player and it wont show audio player at all... Can someone give me some help please? I am using Google Chrome...

3 Answers

Nikola Jankovic
Nikola Jankovic
10,793 Points
Nikola Jankovic
Nikola Jankovic
10,793 Points

I found the problem it was in

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

There was an extra / in the code... It should be like this:

<script src="js/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="css/mediaelementplayer.css" />
Ari Misha
Ari Misha
19,323 Points
Ari Misha
Ari Misha
19,323 Points

Hiya there! You forgot to put a keyword called "controls" in the video tag. This controls attribute hands over all the control to user that are rendered in HTML5. So change your code to be like this:

<video width="852" height="480" class="mejs_player" controls>
  // all source code comes here
</video>

~ Ari

Nikola Jankovic
Nikola Jankovic
10,793 Points
Nikola Jankovic
Nikola Jankovic
10,793 Points

It is explained in the video that I should remove controls and put class='mejs__player', if I put controls back, like you wrote , nothimg is changed on the player...

Nikola Jankovic
Nikola Jankovic
10,793 Points
Nikola Jankovic
Nikola Jankovic
10,793 Points

I mean class 'mejs__player' is not changing anything...