сделать переключение для идентификаторов с событием клика, используя JavaScript?

Question

У меня есть простой блок, который содержит два видеоэлемента, у меня есть кнопка паузы, которую я хочу, когда пользователь нажимает кнопку паузы, она приостанавливает текущее воспроизведение видео.

К сожалению, мой метод не работает. Что я делаю не так в своем коде?

document.querySelector("#video-pause_btn").addEventListener('click', function() {
  console.log(($(this).attr('id')))
  switch ($(this).attr('id')) {
    case 'video-player_not-transformed':
      pauseVideo();
      break;
    case 'video-player_transformed':
      pauseTransfromedVideo();
      break;
  }
});

var pauseVideo = function() {
  var videoNotTransformed = document.querySelector('#video-player_not-transformed');
  videoNotTransformed.pause();
};

var pauseTransfromedVideo = function() {
  var videoTransformedID = document.querySelector('#video-player_transformed');
  videoTransformedID.pause();
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video-container">
  <div class="video-container_details">
    <div id="video-pause_btn" class="video-btn">
      <img src="images/stop.png" />
    </div>
  </div>
  <div class="video-conatiner_datavideo">
    <video class="videoplayer" id="video-player_not-transformed">
      <source src="videos/explainer.mp4" type="video/mp4">
    </video>
  </div>
  <div class="video-container_transformed">
    <video id="video-player_transformed" style="width: 300px; height:auto; padding: 30px;">
      <source src="videos/transformed.mp4" type="video/mp4">
    </video>
  </div>

Answer 1

Ваша логика переключения нарушена, так как $(this).prop('id') будет только когда-либо возвращать video-pause_btn, потому что это элемент, которому вы назначили обработчик события.

Лучшим подходом было бы определить, какое видео воспроизводится в данный момент, используя filter(), а затем приостановить его и запустить воспроизведение другого видео, что-то вроде этого:

var $videos = $('video');

$('#video-pause_btn').on('click', function() {
  var $playing = $videos.filter(function() {
    return !this.paused;
  }).get();

  if ($playing.length === 0) {
    $videos.first()[0].play();
  } else {
    $playing[0].pause();
    $videos.not($playing)[0].play();
  }
});

video {
  width: 250px;
  height: auto;
  padding: 10px;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video-container">
  <div class="video-container_details">
    <div id="video-pause_btn" class="video-btn">
      Play/pause
      <img src="images/stop.png" />
    </div>
  </div>
  <div class="video-conatiner_datavideo">
    <video class="videoplayer" id="video-player_not-transformed">
      <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
    </video>
  </div>
  <div class="video-container_transformed">
    <video id="video-player_transformed">
      <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
    </video>
  </div>
</div>