Question

我已经构建了自定义HTML5 UI，但在一个方面遇到了一些麻烦。 mousedown和click之间似乎存在冲突，这导致这两种行为相互对抗。下面所有的jQuery函数都可以单独正常运行，但是当我将click和mousedown事件组合在一起时，这就是我要解决的问题。 click事件旨在将用户“跳转”到视频的该部分。但是，如果用户拖动搜索栏手柄（或搜索栏的任何部分），我也希望视频暂停。目前，mousedown函数将覆盖click函数，从而导致短暂的暂停，但单击时视频或搜索栏均未更新。有没有一种方法可以使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();
});

单击和鼠标按下之间的HTML5 <video> jQuery冲突

0 个答案: