JQuery 在关闭事件时停止/暂停弹出窗口中的视频

Question

var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
  enter code here
  modal.style.display = "block";

}
span.onclick = function() {
  modal.style.display = "none";
  $("#my-player")[0].pause();
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

var video = document.getElementById("my-player");

function stopVideo() {
  video.pause();
  video.currentTime = 0;
}

<button type="button" class="" id="myBtn" data-toggle="modal" data-target="#myModal">
        Pop-UP
    </button>


<--- modal --->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria- labelledby="ModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <button type="button" class="close close" id="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
        <div class="modal-body video-wrapper2">
          <video src="tax.mp4" id="my-player" class="video-js" controls preload="auto">
                  <p class="vjs-no-js">
                    To view this video please enable JavaScript, and consider upgrading to a
                    web browser that
                    <a href="https://videojs.com/html5-video-support/" target="_blank">
                      supports HTML5 video
                    </a>
                  </p>
                </video>
        </div>
      </div>
    </div>
  </div>