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

John McKinney
John McKinney
15,331 Points
Posted by John McKinney
John McKinney
15,331 Points

Controls are breaking their container

Here is my html. I don't get what's going on but when I run the code the caption times appear below the video and the buttons appear below as well but as blank buttons. It runs over the audio area.

<!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/mediaelement-and-player.min.js">
<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>

Austin Gates
Austin Gates
15,391 Points

CSS?

2 Answers

Jacie Fortune
Jacie Fortune
8,969 Points

I had the exact same problem as you and this is what fixed it. The first link element I accidentally typed .js extension, and it should be a .css extension. Here is the line:

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

I see in your code that you made the same mistake. I hope this isn't too late to be of use to you.

John McKinney
John McKinney
15,331 Points
John McKinney
John McKinney
15,331 Points

Thank you! I just ended up skipping it but was still very curious so that helps

John McKinney
John McKinney
15,331 Points
John McKinney
John McKinney
15,331 Points

This is all the instructor's code, I didn't mess with it:

*, *: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; }

This is the WebVtt file:

WEBVTT FILE

0 00:00:00.500 --> 00:00:05.000 [truck engine]

1 00:00:06.000 --> 00:00:10.000 [bird chirping]

2 00:00:13.000 --> 00:00:16.000 [school bus engine]

3 00:00:17.000 --> 00:00:24.350 [water flowing]

4 00:00:24.350 --> 00:00:30.000 [water flow continues]