Как настроить таргетинг на элемент видео при наличии нескольких видеофайловНо также скрыть, что элементы играют кнопку и слушать, когда видео заканчивается

Question

Я пытаюсь добавить прослушиватель событий для нескольких видео, и я не могу найти ответ где-нибудь.У меня есть несколько видео на моей странице, и когда видео заканчивается, оно должно загрузить видео для повторного воспроизведения, отобразить кнопку воспроизведения и скрыть элементы управления.Это код, который я до сих пор.Если кто-нибудь может помочь мне выяснить, как установить EventListener для «закончен» на конкретном видео, которое просматривается.Я был бы очень признателен!

HTML

    <div class="video-container">
              <video class="vidDJ" width="100%" preload="none">
                <source src="video1.mp4"
                  type="video/mp4">
              </video>
              <div class="vidText">
                <div class="playBtn"></div>
                <div class="replayBtn"></div>
              </div>
              <!-- vidText -->
            </div>
            <!-- video-container -->

            <div class="video-container">
              <video class="vidDJ" width="100%" preload="none">
                <source src="video2.mp4"
                  type="video/mp4">
              </video>
              <div class="vidText">
                <div class="playBtn"></div>
                <div class="replayBtn"></div>
              </div>
              <!-- vidText -->
            </div>
            <!-- video-container -->

           <div class="video-container">
              <video class="vidDJ" width="100%" preload="none">
                <source src="video3.mp4"
                  type="video/mp4">
              </video>
              <div class="vidText">
                <div class="playBtn"></div>
                <div class="replayBtn"></div>
              </div>
              <!-- vidText -->
            </div>
            <!-- video-container -->

JavaScript

$(document).ready(function() {
    var video = document.getElementsByClassNames("vidDJ");

    $(".playBtn").click(function() {
      var video = $(this).closest(".video-container").find("video")[0];
      video.play();
      $(this).hide();

      $("video").on("click", function() {
        video.setAttribute("controls", "controls");
        $("video").click(function() {
          this.paused ? this.play() : this.pause();
        });
      });
      return false;
    });

    video.addEventListener("ended", function() {
      video.load();
      $(".replayBtn").show();
      $(".playBtn").hide();
      $(".vidText").show();
    });

Я знаю, что у меня есть EventListener - мусор, но я пыталсявсе.Я помню, как читал о возможном использовании querySelectorAll для элементов видео и зацикливании на них и ТОГДА добавлял прослушиватель событий, но я все еще довольно новичок в js / jQuery и не могу вспомнить как.Любая помощь будет оценена.

Это функция, которая добавляет кнопку воспроизведения и перезагружает видео после его завершения.Он работает, выбрав видео на основе его идентификатора.Моя проблема заключается в использовании одной функции addeventlistener для всех видео

    video.addEventListener('ended',function(){
      video.load();
      $(".replayBtn").show();
      $(".playBtn").hide();
      $(".vidText").show();
    });