Something hasn't worked here...

Question

When I preview my code it looks nothing like the example, it has weird little tick boxes under it? And the media player isn't working properly. Is there a mistake in 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.js"></script>
    <link rel="stylesheet" href="mejs/mediaelementplayer.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>

Welcome to the Treehouse Community

Looking to learn something new?

Amanda Bater

Amanda Bater

Something hasn't worked here...