HTML5 <video>jQuery конфликт между кликом и mousedown

Question

Я создал пользовательский интерфейс HTML5, и у меня возникли проблемы с одним аспектом.Кажется, существует конфликт между mousedown и click, который заставляет два поведения бороться друг против друга.Все нижеприведенные функции jQuery работают нормально по отдельности, но когда я объединяю события click и mousedown, именно здесь я вижу проблему.Событие click предназначено для «перехода» пользователя к этой части видео.Однако я также хочу, чтобы видео приостанавливалось, если пользователь перетаскивает маркер панели поиска (или любую часть панели поиска).В настоящее время функция mousedown переопределяет функцию щелчка, что приводит к короткой паузе, но не обновляет ни видео, ни панель поиска при нажатии.Есть ли способ заставить click и mousedown играть хорошо, чтобы я смог click и перетащить по желанию?

Codepen

HTML

<video id="video" src="video-url.com" preload></video>
<div id="controls"></div>
<input id="seek-bar" type="range" min="0" max="100" value="0" step="0.05">

JQUERY

// Video
var video = document.getElementById('video');
var controls = document.getElementById('controls');
var seekBar = document.getElementById('seek-bar');

// Controls
// Play/pause on video click
$(controls).on('click touchstart', function() {
  // If video is playing
  if ( video.paused === false ) {
    // Pause video
    video.pause();
  // If video is not playing
  } else {
    // Play video
    video.play();
  }
});

// Seek bar
// Update the video position when seekBar is changed
$(seekBar).on('change', function() {
  // Calculate the new time
  var time = video.duration * (seekBar.value / 100);
  // Update the video time
  video.currentTime = time;
});

// Update the video position when seekBar is clicked
$(seekBar).on('click', function() {
  // Calculate the new time
  var time = video.duration * (seekBar.value / 100);
  // Update the video time
  video.currentTime = time;
});

// Update the seekBar as the video plays
$(video).on('timeupdate', function() {
  // Calculate the seekBar value
  var value = (100 / video.duration) * video.currentTime;
  // Update the seekBar value
  seekBar.value = value;
});

// Pause the video when the slider handle is being dragged
$(seekBar).on('mousedown', function() {
  // Pause video
  video.pause();
});

// Play the video when the slider handle is dropped
$(seekBar).on('mouseup', function() {
  // Play video
  video.play();
});