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

JavaScript Extending the Media Player

Trevor Stinson
Trevor Stinson
14,801 Points
Posted by Trevor Stinson
Trevor Stinson
14,801 Points

Can't get Skip Back to work with MediaElement.js

I know it's probably something obvious, but I'm at a loss. As far as I can tell, my code matches the teacher's code.

In Safari: The controls show up, but when I click the skip back button, the video simply stops.
In Chrome: The controls show up, but nothing happens when I click it.

I added the Speed plugin as well and it seems to be working fine (well, with an odd quirk in Safari: if I select an alternate speed and then switch back to 1x, all of the controls disappear until I reload the page), but I still can't get the Skip Back plugin to work.

Any ideas what's happening here?

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

    <script src="skip-back/skip-back.min.js"></script>
    <script src="skip-back/skip-back-i18n.js"></script>
    <link href="skip-back/skip-back.min.css" rel="stylesheet">

    <script src="speed/speed.min.js"></script>
    <script src="speed/speed-i18n.js"></script>
    <link href="speed/speed.min.css" rel="stylesheet">

    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>

    <h1>HTML Video and Audio</h1>

    <div class="wrapper">

      <h2>Video Example</h2>

      <div class="videoWrapper">
        <video width="852" height="480">
          <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" src="bridge-captions.vtt" srclang="en" default>
        </video>
      </div>
      <h2>Audio Example</h2>
      <div class="audioWrapper">
        <audio>
          <source src="http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge-audio.mp3" type="audio/mp3">
        </audio>
      </div>
    </div>
    <script>
      $("video, audio").mediaelementplayer({
        features: ["playpause", "tracks", "progress", "skipback", "speed"],
        startLanguage: "en",
        skipBackInterval: 4
      });
    </script>

  </body>
</html>
Tennyson Horn
Tennyson Horn
14,660 Points
Tennyson Horn
Tennyson Horn
14,660 Points

Bump. I've run into the same issue. I spent 15 or 20 minutes looking through the documentation for clues and came up empty handed. All other controls I've tried render and work as expected. Skip-back button renders as expected but is non-functional. Is it possible the bug is a result of the changes introduced in mediaelement version 2.1.1?

nico dev
nico dev
20,364 Points
nico dev
nico dev
20,364 Points

Same here, guys.

Tried changing the value in the index.html and in another attempt in the very min.js file.

Tried Chrome: the skipback button absolutely does not react to a click event. Tried FF: The button does not appear visuall or in the DOM (via FF console).

All of that happened working locally. However, I now tried with Workspaces, and the situation did not change.

Hope you forgive me annoying, Joel Kraft, but I hope I can bring you in to give as some clue/hint?

1 Answer

Joel Kraft
STAFF
Joel Kraft
Treehouse Guest Teacher
Joel Kraft
Joel Kraft
Treehouse Guest Teacher

Hi all,

The skip-back plugin had a bug in it that has since been resolved. You can download the new files from github, and they should work now. Let me know if you can't get it working after a fresh install. Thanks!

nico dev
nico dev
20,364 Points
nico dev
nico dev
20,364 Points

Thank you, Joel!

It is now working perfectly in WorkSpaces (although it is certainly giving some issues working with local files with the 'http-server' mechanism, bu that does not worry me, as it's just for testing and not really that important, probably something wrong in my set up or smth).

Thank you so much for all the work in reporting the issue and everything!

EDIT NOTE: It is actually also working locally with MAMP (Win), so I obviously set up smth wrong in npm.

Thank you again!