src/demo.html

<html>
  <head>
    <title>Media Element Syncer</title>
    <script type="text/javascript" src="./media-element-syncer.js"></script>
  </head>
  <body>
    <div>
      <h1>Media Element Syncer: Demo</h1>
      <p>
        GitHub:
        <a
          href="https://github.com/tjenkinson/media-element-syncer"
          target="_blank"
          >https://github.com/tjenkinson/media-element-syncer</a
        >
      </p>
      <div>
        <video id="video1" src="./assets/test.mp4" controls></video>
        <video id="video2" src="./assets/test.mp4" muted></video>
      </div>
      <div>
        <p>1 second behind</p>
        <video id="video3" src="./assets/test.mp4" muted></video>
      </div>
      <script type="text/javascript">
        const syncer = new MediaElementSyncer.MediaElementSyncer(
          document.getElementById('video1')
        );
        syncer.addChild(document.getElementById('video2'));
        syncer.addChild(document.getElementById('video3'), { offset: -1000 });
      </script>
    </div>
  </body>
</html>