Simple HTML page to compare two subtitle files

comparevids.html

<link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>

<!-- Display text above each video -->
<p>The Largev3 Subs Video:</p>
<video
  id="my-video"
  class="video-js"
  controls
  preload="auto"
  width="640"
  height="264"
  data-setup="{}"
>
  <source src="SOURCE-VIDEO-HERE.mp4" type="video/mp4" />
  <track
    kind="subtitles"
    src="SUBTITLE-1-HERE"
    srclang="en"
    label="English"
    default
  />
</video>

<br>

<p>The Peertube Subs Video:</p>
<video
  id="my-second-video"
  class="video-js"
  controls
  preload="auto"
  width="640"
  height="264"
  muted
  data-setup="{}"
>
  <source src="SOURCE-VIDEO-HERE.mp4" type="video/mp4" />
  <track
    kind="subtitles"
    src="SUBTITLE-2-HERE"
    srclang="en"
    label="English"
    default
  />
</video>

<!-- Control Buttons -->
<button id="play-pause-button">Play/Pause Both</button>
<br><br>

<!-- Timestamp Input -->
<label for="timestamp-input">Enter timestamp (hh:mm:ss):</label>
<input type="text" id="timestamp-input" placeholder="00:00:00">
<button id="set-timestamp-button">Set Timestamp for Both</button>

<script>
  var player1 = videojs('my-video');
  var player2 = videojs('my-second-video');

  // Play/Pause both videos
  document.getElementById('play-pause-button').addEventListener('click', function() {
    if (player1.paused() && player2.paused()) {
      player1.play();
      player2.play();
    } else {
      player1.pause();
      player2.pause();
    }
  });

  // Set the timestamp for both videos and play automatically
  document.getElementById('set-timestamp-button').addEventListener('click', function() {
    var timestamp = document.getElementById('timestamp-input').value;
    var timeParts = timestamp.split(':');
    if (timeParts.length === 3) {
      var hours = parseInt(timeParts[0], 10);
      var minutes = parseInt(timeParts[1], 10);
      var seconds = parseInt(timeParts[2], 10);
      var totalSeconds = hours * 3600 + minutes * 60 + seconds;

      // Set the current time for both players
      player1.currentTime(totalSeconds);
      player2.currentTime(totalSeconds);

      // Automatically play both videos after setting the timestamp
      player1.play();
      player2.play();
    } else {
      alert('Invalid timestamp format. Please use hh:mm:ss.');
    }
  });
</script>