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 Adding MediaElement.js

Alemneh Asefa
Alemneh Asefa
9,503 Points
Posted by Alemneh Asefa
Alemneh Asefa
9,503 Points

My video and audio dont seem to be applying the skins I checked my code but could not find anything that doesn't match

<!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 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>

7 Answers

Davy Wong
Davy Wong
25,470 Points
Davy Wong
Davy Wong
25,470 Points

I found your issue:

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

should be:

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

Notice how there should only be one quote pair for the jQuery selector, not two.

Joshua Harman
Joshua Harman
8,821 Points
Joshua Harman
Joshua Harman
8,821 Points

So the issue is:

If you're anything like me, when the videos switched, you kept your preview window open and just continued to reload the page.

However... what you needed to do was actually clck preview again and choose the media-element.html link on the "Index of/" page.

All your skins will show up there!!!

Davy Wong
Davy Wong
25,470 Points
Davy Wong
Davy Wong
25,470 Points

I think you forgot to add the classes to your video and audio elements.

See this video: http://teamtreehouse.com/library/html-video-and-audio/custom-media-players/using-default-skins

Relevant HTML at 26 seconds into the video.

Britton Zirkle
Britton Zirkle
Courses Plus Student 15,005 Points

The lesson you are referring to actually comes after the lesson where the issue is arising.

Britton Zirkle
PLUS
Britton Zirkle
Courses Plus Student 15,005 Points
Britton Zirkle
Britton Zirkle
Courses Plus Student 15,005 Points

I am having a similar problem with the skin and the JS. Here is my 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>
    <sript 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 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>

When I open up the Dev Tools it gives me an Uncaught TypeError: undefined is not a function for the script at the bottom of the HTML. It seems to match what Nick Pettit coded, but obviously I have an error somewhere.

Davy Wong
Davy Wong
25,470 Points
Davy Wong
Davy Wong
25,470 Points

On line 11 of your index.html, you misspelled the opening <script> tag.

Ogechi Ike
Ogechi Ike
6,539 Points
Ogechi Ike
Ogechi Ike
6,539 Points

I solved it already. I had the mediaelementplayer.min.js file be src, not href.

Britton Zirkle
PLUS
Britton Zirkle
Courses Plus Student 15,005 Points
Britton Zirkle
Britton Zirkle
Courses Plus Student 15,005 Points

Davy Wong got it. thanks for the catch. It's working now.

Ogechi Ike
Ogechi Ike
6,539 Points
Ogechi Ike
Ogechi Ike
6,539 Points

I think i have the same problem:

<!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" src="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 width="852px" height="480px"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>