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

Pongpon Tienthong
Pongpon Tienthong
7,815 Points
Posted by Pongpon Tienthong
Pongpon Tienthong
7,815 Points

Please help!!! the skin isn't applied to my page.

Please help!!! the skin isn't applied to my page.When I checked the code, it seems nothing is wrong. Also, here is what I got when I opened a console "Failed to load resource: the server responded with a status of 404 (Not Found)"

Pongpon Tienthong
Pongpon Tienthong
7,815 Points
Pongpon Tienthong
Pongpon Tienthong
7,815 Points

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

sboussacsou
PLUS
sboussacsou
Courses Plus Student 7,450 Points
sboussacsou
sboussacsou
Courses Plus Student 7,450 Points

Be sure that your css file are in the right location , for example the "main.css" should be in ROOT_FOLDER/css/main.css

N.B : ROOT_FOLDER is the folder where you have the html file.

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

Actually, that is not the case. If you move the css files, you will get an error message, because the html file actually references to the main.css as it is in the css folder.

Sorry for the thumb down, I just don't want other people following that advice right away like I did and not reading the rest, and wondering what happened.

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

Daniel Mejia
Daniel Mejia
12,481 Points
Daniel Mejia
Daniel Mejia
12,481 Points

Your not adding the correct location of the mediaelementplayer.min.css file, you need to add the folder as well. Like this:

<link rel="stylesheet" href="mejs/mediaelementplayer.min.css" />
Joshua Harman
Joshua Harman
8,821 Points
Joshua Harman
Joshua Harman
8,821 Points

Can I also ask why you and Daniel both have a "/" after the end of the link?

(right before the final closing bracket)

<link rel="stylesheet" href="mejs/mediaelementplayer.min.css" />

instead of just

<link rel="stylesheet" href="mejs/mediaelementplayer.min.css" >

Could that cause problems Pongpon?

Daniel Mejia
Daniel Mejia
12,481 Points
Daniel Mejia
Daniel Mejia
12,481 Points

Hi Joshua:

I added the "/" before the closing bracket because I say Nick do it in the video at 2:25. My code wasn't working either at the beginning and I though this could be a reason but after changing the code I realized it made no difference. Feel free to try it yourself and please let me know if you got different results. In my case the code wasn't working because I misspelled one of the script tags.