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

HTML HTML Video and Audio (Retired) Custom Media Players Using Default Skins

Posted by jemelleesantos
jemelleesantos
3,495 Points

Ted Skin not displaying

Following along with the Default Skin video and I added in this:

<video class="mejs-ted" width="852" height="480" controls>

Saved it, and it's not showing me the skin for some reason. =\ I even tried the other skin and it's not appearing either. I launched a brand new workspace and was using the code that it came with.

Is it my browser or something? I'm using Chrome, and I already cleared out my cache/cookies too. Help!

Gavin Ralston
Gavin Ralston
28,770 Points

Could you paste the code you tried to add inside of some code markdown? I think whatever you tried to add here got scrubbed.

Tammy Burke
Tammy Burke
9,720 Points

I have had the same problem. Neither class worked.

Here si the snippet: `` <h2>Video Example</h2>

  <video class="mejs-wmp" width="852" height="480" controls>

`` or

`` <h2>Video Example</h2>

  <video class="mejs-ted" width="852" height="480" controls>

``

Ryan Taylor
Ryan Taylor
38,343 Points

Ditto.

Neither Ted nor WMP skins displaying on both Chrome and Firefox.

Gavin Ralston
Gavin Ralston
28,770 Points

If you're having trouble with the skins, post the following to make it a little easier for people to check:

  • the head section of your html
  • any script tags loaded at the bottom of the page near the closing body tag
  • the video element

That might be enough to see if it's something like an incorrect path to the skins or something else entirely.

Kristen Sexton
Kristen Sexton
7,149 Points

I am having the same problem. My console says "mediaelementplayer is not a function." I am also using Google Chrome.

8 Answers

Saskia Lund
Saskia Lund
5,673 Points
Saskia Lund
Saskia Lund
5,673 Points

For the skins to show up, we must include the mejs skins css in our html document. Add this right after the link element that includes your main.css:

 <link rel="stylesheet" href="mejs/mejs-skins.css" type="text/css">

After adding this line, the mejs-ted class should be displayed accordingly. The mejs-skins.css contains the css rulesets for styling the skin classes.

Matthew Goldwater
Matthew Goldwater
3,859 Points

This solved the problem for me. Thanks!

Elena Paraschiv
Elena Paraschiv
9,938 Points

for me too. Thanks Saskia!

Sue Dough
Sue Dough
35,800 Points
Sue Dough
Sue Dough
35,800 Points

+1

Gaurav Raghuvanshy
Gaurav Raghuvanshy
10,672 Points
Gaurav Raghuvanshy
Gaurav Raghuvanshy
10,672 Points

Here's my code, No idea why its not working. thank you for your time in advance.

<!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="mejs/jquery.js"></script>
<script src="mejs/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mejs/mediaelementplayer.min.css" />



<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="mejs/mejs-skins.css">

</head> <body>

<h1>HTML Video and Audio</h1>

<div class="wrapper">

  <h2>Video Example</h2>

  <video class="mejs-ted" width="852" height="489" controls>
    <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 controls>
    <source src="http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge-audio.mp3" type="audio/mp3">
  </audio>

</div>

<script>
  $('audio,video').mediaelementplayer({
    sucess: function(player, node){
        $('#' + node.id + '-mode').html('mode: ' + player.pluginType);
    },
    startLanguage: 'en';
    translationSelector: true;
  });
</script>

</body> </html>

Allison Walker
Allison Walker
17,137 Points

What about if you close the end of your file? 

  </body>
</html>
Kenneth Shim
Kenneth Shim
17,969 Points
Kenneth Shim
Kenneth Shim
17,969 Points

I think you might have the 'media-element.html' file under a wrong directory and that might be causing it to unable to find the 'mejs/mejs-skins.css' because mejs folder doesn't exist in that folder. So make sure that your 'media-element.html' file is in the root directory. I hope this helps.

Nemanja Granic
Nemanja Granic
4,821 Points
Nemanja Granic
Nemanja Granic
4,821 Points

I have same problem.

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="mejs/jquery.js"></script>
    <script src="mejs/mediaelement-and-player.min.js"></script>
    <link rel="stylesheet" href="mejs/mediaelementplayer.min.css">

    <link rel="stylesheet" href="css/main.css" type="text/css">

    <link rel="stylesheet" href="mejs/mejs-skins.css" type="text/css">
  </head>
  <body>

    <h1>HTML Video and Audio</h1>

    <div class="wrapper">

      <h2>Video Example</h2>

      <video class="mejs-ted" width="852" height="480" controls>
        <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 controls>
        <source src="http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge-audio.mp3" type="audio/mp3">
      </audio>

    </div>

    <script>
      $('audio',video').mediaelementplayer({
       success: function(player, node) {
       $(this).html('mode: ' + player.pluginType);
       },
         startLanguage: 'en',
         translationSelector: true
      });      
    </script>

  </body>
</html>
Dmitri Tikhomirov
Dmitri Tikhomirov
10,589 Points

Hi, Nemanja

$('audio',video').mediaelementplayer({

See the extra ' after audio? It's breaking the script. Remove it and the whole thing should work. Hope this helps.

Zeljko Porobija
Zeljko Porobija
11,491 Points
Zeljko Porobija
Zeljko Porobija
11,491 Points

Well, I copied the project's code and nothing happened. Has anybody found the solution for this? Or is that just the browsers' incompatibility with some HTML5 features?

Zeljko Porobija
Zeljko Porobija
11,491 Points
Zeljko Porobija
Zeljko Porobija
11,491 Points
media-element.html 
<!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="mejs/jquery.js"></script>
    <script src="mejs/mediaelement-and-player.min.js"></script>
    <link rel="stylesheet" href="mejs/mediaelementplayer.min.css" />

    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="mejs/mejs-skins.css" type="text/css">
  </head>
  <body>

    <h1>HTML Video and Audio</h1>

    <div class="wrapper">

      <h2>Video Example</h2>

      <video class="mejs-wmp" width="852" height="480" controls>
        <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 controls>
        <source src="http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge-audio.mp3" type="audio/mp3">
      </audio>

    </div>

    <script>
      $('audio,video').mediaelementplayer({
        success: function(player, node) {
          $('#' + node.id + '-mode').html('mode: ' + player.pluginType);
        },
        startLanguage: 'en',
        translationSelector: true
      });
    </script>

  </body>
</html>
Anthony Domina
PLUS
Anthony Domina
Courses Plus Student 19,571 Points
Anthony Domina
Anthony Domina
Courses Plus Student 19,571 Points

I had the same issue but the problem for me was punctuation. Mine said audio.video when what I needed between them was a comma. Once I changed this, problem solved.