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 Extending the Media Player

Posted by Binu David
.a{fill-rule:evenodd;}techdegree
Binu David
Front End Web Development Techdegree Student 11,990 Points

Skipback loading play icon instead of skipback icon

<!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="http://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>

<script src="js/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="css/mediaelementplayer.css" />
<script src="skip-back/skip-back.min.js"></script>
<script src="skip-back/skip-back-i18n.js"></script>
<link href="skip-back.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">

</head> <body>

<h1>HTML Video and Audio</h1>

<div class="wrapper">


  <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" srclang="en" src="bridge-captions.vtt" 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'],
startLanguage: 'en',
skipBackInterval: 4
});
</script>

</body> </html>

When previewed, I can see the play icon. The skipback still works.

Wojciech Kwiatkowski
Wojciech Kwiatkowski
5,856 Points
Wojciech Kwiatkowski
Wojciech Kwiatkowski
5,856 Points

You need to upload skipback.svg from the dist folder and then it will work

1 Answer

Zoltán Erkel
Zoltán Erkel
6,340 Points
Zoltán Erkel
Zoltán Erkel
6,340 Points

same issue here, I did try to upload the svg, even in to the same css folder (I've put the skipback css into the css folder), but it seems like it can't open the svg for some reason

UPDATE: hey so turns out (not that surprisingsly to be fair), that the rel attr. always has to have a predefined value, in this case: "stylesheet" which I (not sure why) decided to change for this element - if anyone ends up doing the same, just FYI