如何禁用VideoJS SeekBar拖动时的连续跳转，改为仅鼠标松开时跳转？

I've run into the exact same requirement before—wanting to make VideoJS's SeekBar behave like YouTube's, where it only jumps to the selected position when you release the mouse, instead of updating the playback time continuously as you drag. Here are two solid solutions I've tested and used:

Method 1: Override SeekBar's Prototype Methods #

The default SeekBar triggers playback updates on mousemove, so we can rewrite its core methods to delay the seek action until mouseup:

// Get the SeekBar component reference
const SeekBar = videojs.getComponent('SeekBar');

// Save the original methods to preserve default behavior where needed
const originalMouseMove = SeekBar.prototype.handleMouseMove;
const originalMouseUp = SeekBar.prototype.handleMouseUp;

// Rewrite handleMouseMove to only track the target time, not seek immediately
SeekBar.prototype.handleMouseMove = function(event) {
  // Run the original method to calculate the seek distance
  originalMouseMove.call(this, event);
  
  // Block the default real-time seek behavior
  event.preventDefault();
  event.stopImmediatePropagation();
  
  // Store the target seek time in the component instance
  this.targetSeekTime = this.player_.currentTime() + this.seekDistance_;
};

// Rewrite handleMouseUp to execute the actual seek action
SeekBar.prototype.handleMouseUp = function(event) {
  originalMouseUp.call(this, event);
  
  // Jump to the stored target time if it exists
  if (this.targetSeekTime !== undefined) {
    this.player_.currentTime(this.targetSeekTime);
    delete this.targetSeekTime;
  }
};

Notes for Method 1: #

• This directly modifies the component's prototype, so it will affect all instances of SeekBar in your app.
• Always save the original methods to avoid breaking other default functionality (like accessibility or touch events).

Method 2: Event Listener Override (No Prototype Modification) #

If you prefer not to alter the component's prototype, you can listen to the SeekBar's events and manually control the seek behavior:

// Initialize your player (replace 'my-video' with your player ID)
const player = videojs('my-video');

let targetSeekTime = null;

player.ready(function() {
  const seekBar = this.controlBar.progressControl.seekBar;
  
  // Listen for mouse movement to calculate target time, block default seek
  seekBar.on('mousemove', function(event) {
    const barRect = this.el_.getBoundingClientRect();
    const progressPercent = (event.clientX - barRect.left) / barRect.width;
    
    // Calculate target time only if video duration is available
    if (!isNaN(this.player_.duration())) {
      targetSeekTime = this.player_.duration() * progressPercent;
    }
    
    // Prevent default real-time seek
    event.preventDefault();
    event.stopImmediatePropagation();
  });
  
  // Execute seek on mouseup
  seekBar.on('mouseup', function() {
    if (targetSeekTime !== null && !isNaN(targetSeekTime)) {
      this.player_.currentTime(targetSeekTime);
      targetSeekTime = null;
    }
  });
  
  // Reset target time if mouse leaves the seek bar
  seekBar.on('mouseleave', function() {
    targetSeekTime = null;
  });
});

Notes for Method 2: #

• Wrap your code in player.ready() to ensure the player and its components are fully initialized before accessing them.
• This approach is more isolated—it only affects the specific player instance you target.
• We handle mouseleave to avoid accidental seeks if the user drags the mouse outside the bar and releases.

General Tips #

• Test with different video sources to ensure the duration calculation works correctly (especially for live streams or unloaded videos).
• If you're using a custom VideoJS skin, double-check the component structure to make sure controlBar.progressControl.seekBar is the correct path to the SeekBar element.

内容的提问来源于stack exchange，提问作者goltornate