<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Video Player</title>
  <link rel="stylesheet" href="player.css">
  <script src="player.js"></script>
</head>
<body>
  <section id="player">
    <video id="media" width="720" height="400" poster="poster.jpg">
      <source src="trailer.mp4" type="video/mp4">
      <source src="trailer.webm" type="video/webm">
    </video>
    <div id="controls">
      <div id="buttons">
        <input type="button" id="play" value="Play">
        <input type="button" id="mute" value="Mute">
      </div>
      <div id="bar">
        <div id="progress"></div>
      </div>
      <div id="control">
        <input type="range" id="volume" min="0" max="1" step="0.1" value="0.6">
      </div>
    </div>
  </section>
</body>
</html>