<!DOCTYPE HTML>
<html lang="en-gb">
  <head>
  	<meta charset="utf-8">
  	<title>Video player example</title>
  	<link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
      <div class="player">
        <video controls>
          <source src="video/sintel-short.mp4" type="video/mp4">
          <source src="video/sintel-short.webm" type="video/webm">
          <!-- fallback content here -->
        </video>
        <div class="controls">
          <button class="play" data-icon="P" aria-label="play pause toggle"></button>
          <button class="stop" data-icon="S" aria-label="stop"></button>
          <div class="timer"><div></div><span aria-label="timer">00:00</span></div>
          <button class="rwd" data-icon="B" aria-label="rewind"></button>
          <button class="fwd" data-icon="F" aria-label="fast forward"></button>
        </div>
      </div>
    <p>Sintel &copy; copyright Blender Foundation | <a href="http://www.sintel.org">www.sintel.org</a>.</p>
    <script src="custom-player.js"></script>
  </body>
</html>
