<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Multiple media players with custom controls</title>
    <link href="../custom-controls.css" rel="stylesheet">
  </head>
  <body>
    <h1>Multiple media players with custom controls</h1>

    <h2>Audio player</h2>

  <section class="player">
    <audio controls>
      <source src="../viper.mp3" type="audio/mp3">
      <source src="../viper.ogg" type="audio/ogg">
      <p>Your browser doesn't support HTML5 audio. Here is a <a href="../viper.mp3">link to the audio</a> instead.</p>
    </audio>
  </section>

    <h2>Video player</h2>

  <section class="player">
    <video controls>
      <source src="../rabbit320.mp4" type="video/mp4">
      <source src="../rabbit320.webm" type="video/webm">
      <p>Your browser doesn't support HTML5 video. Here is a <a href="../rabbit320.mp4">link to the video</a> instead.</p>
    </video>
  </section>

  <script src="main.js"></script>
  </body>
</html>
