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

Tristan Terry
Tristan Terry
9,044 Points
Posted by Tristan Terry
Tristan Terry
9,044 Points

code not working. Not styling applied

```<!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="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>```

Here is my code. I have no idea why the styling isn't being applied.

9 Answers

Gary Alan Jackson
Gary Alan Jackson
14,014 Points

So... There was some CSS being selected in the jQuery that wasn't quite working out. (Highlighted with the arrow. That first reference in with the #node.id-mode selector.)

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

I just replaced it with the jQuery/JavaScript selector "this".... Like, well... This:

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

Then you can just class the elements yourself and center them in your css. [no example as I'm a little lazy at the moment].

I hope this helps future coders with this problem.

Christian Weatherford
Christian Weatherford
8,848 Points
Christian Weatherford
Christian Weatherford
8,848 Points

Saw this as an answer (by Joshua Harman) on another question that turned out to be the issue for me. Not necessarily the CSS styling, but the skins weren't showing:

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

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

First, your markdown is almost right. Instead of the DOCTYPE tag after the back tics, put html. Then begin your quote on the next line.

The most likely problem is with your path. Make sure the path is correct and check the names, remembering that it is case sensitive.

If that doesn't work, please post your CSS also. Quote it the same way but put CSS instead of html.

Tristan Terry
Tristan Terry
9,044 Points
Tristan Terry
Tristan Terry
9,044 Points

Hey I'll check the paths though I am pretty sure they are the same as the video, and the CSS comes preloaded in workspace. I haven't messed with it at all, so it should be fine.

Tristan Terry
Tristan Terry
9,044 Points
Tristan Terry
Tristan Terry
9,044 Points

I just deleted the workspace and re-worked to that area. Still nothing here is the code again. <!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').mediaelement({
        success: function(player, node) {
          $('#' + node.id + '-mode').html('mode: ' + player.pluginType);
        },
        startLanguage: 'en',
        translationSelector: true
      });
    </script>

  </body>
</html>```
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Please post the css also. Remember that html and css are case sensitive, so if your folder is CSS and you call css, it is different

Tristan Terry
Tristan Terry
9,044 Points
Tristan Terry
Tristan Terry
9,044 Points 
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: 'Nunito', sans-serif;
  color: #384047;
}

.wrapper {
  max-width: 90%;
  margin: 10px auto;
  padding: 10px 20px;
  background: #f4f7f8;
  border-radius: 8px;
}

h1, h2 {
  margin: 30px 0;
  text-align: center;
}

video, audio, .mejs-treehouse {
  margin: 0 auto;
  display: block;
}
Daniel Mejia
Daniel Mejia
12,481 Points
Daniel Mejia
Daniel Mejia
12,481 Points

Within the script tags the function's name is mediaelementplayer and not mediaelement. Like this: 

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

They treehouse guys included the css preloaded this course. The file and everything are correct though I've combed through them a few times. Also I am using Chrome which is what he uses in the video, so it shouldn't be a browser issue. i hope you can find the issue cause its very frustrating lol

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

I will retake the course later tonight or in the morning and see if I get any insight.

You checked to make sure that your html file and css folder are in the same folder, that the CSS file is in the CSS folder, and that everything is lower case?

Tristan Terry
Tristan Terry
9,044 Points
Tristan Terry
Tristan Terry
9,044 Points

Alright thanks man. If it works for you please post your code so that I can paste it into my workspaces and see if its something up with the browser or computer.

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Are you using workspaces or downloading the files and using a text editor?

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

ok

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

It does not display properly for me either. I tried on both Firefox and Crome on a Linux OS. I could boot into windows, but I think it will be the same.

One issue is the background color is relative and the video is fixed. That leads to some broken formatting.

The video works, but the closed captioning does not display properly and the audio is not displaying at all.

I am not sure why they use jQuery on this. If I remember right, there is a course where they insert the same using the html5 codes and show how to alter the player skins.

Tristan Terry
Tristan Terry
9,044 Points
Tristan Terry
Tristan Terry
9,044 Points

So its the course not my code?

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

I downloaded the project files and played them on Chrome outside of Workspaces and it worked properly other than the funky background/video difference that I noted above. It appears to be a Workspace issue.

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Send feedback and tell them that it is a Workspace issue on this video. I told them there was a problem, but they will not let me make another comment.

Tristan Terry
Tristan Terry
9,044 Points
Tristan Terry
Tristan Terry
9,044 Points

Alright I just got a new computer would you recommend Brackets, Atom, or some other free text editor?

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

I use Brackets and really like it. The live preview is awsome. I have not used Atom.

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

I use Brackets and really like it. The live preview is awesome. I have not used Atom.

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

I actually used the live preview in Brackets to play the video I downloaded.

Tristan Terry
Tristan Terry
9,044 Points
Tristan Terry
Tristan Terry
9,044 Points

Alright thanks a lot again man.

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Any time.

Rachelle Wood
Rachelle Wood
15,362 Points
Rachelle Wood
Rachelle Wood
15,362 Points

I am having the same issue 3 months later. I would like to interject though mainly to offer another great text editor that is free: NetBeans. I love it for its flexibility. I got it originally to code in Java but you can also use it for website projects.