当鼠标在定义的区域时控制视频播放

问题描述

我正在尝试根据鼠标在屏幕上的位置来控制视频播放。 我已将窗口的宽度分成 3 个区域 - 左、中和右。到目前为止，这工作正常。 当鼠标位于“左侧”时，我想指定跳转到某个时间，中间和右侧相同。 我遇到的问题是，每次鼠标移动视频播放重新启动时，我希望它仅在从“左”变为“右”或“中心”时才改变。我已经创建了 current_pos 和 new_pos 变量，但不知道如何正确更新它们。

非常感谢！

PS 暂时省略了视频代码，只是试图让位置正常工作。

var viewport_width = document.documentElement.clientWidth;
var viewport_height = document.documentElement.clientHeight;
var current_pos;
var new_pos;

function getMousePos(e) {
    return {x:e.clientX,y:e.clientY};
}
document.onmousemove=function(e) {
  
    var mousecoords = getMousePos(e);
  
  //left

  if (mousecoords.x < viewport_width/3){
    
    current_pos = 'left';
 
    
  //centre

  }else if (mousecoords.x > viewport_width/3 && mousecoords.x < viewport_width*.66){
    current_pos = 'centre';

  //right 

  }else {
    current_pos = 'right';
  }
    
    console.log(current_pos);
};

解决方法

每次尝试更改时都需要检查 current_pos 是否已更改。

var viewport_width = document.documentElement.clientWidth;
var viewport_height = document.documentElement.clientHeight;
var current_pos;

function getMousePos(e) {
  return {
    x: e.clientX,y: e.clientY
  };
}
document.onmousemove = function(e) {
  var mousecoords = getMousePos(e);

  //left
  if (mousecoords.x < viewport_width / 3) {
    if(current_pos != 'left') {
      current_pos = 'left';
      // Play your video from the desired point
    }
  //centre
  } else if (mousecoords.x > viewport_width / 3 && mousecoords.x < viewport_width * .66) {
    if(current_pos != 'centre') {
      current_pos = 'centre';
      // Play your video from the desired point
    }
  //right 
  } else {
    if(current_pos != 'right') {
      current_pos = 'right';
      // Play your video from the desired point
    }
  }
  console.log(current_pos);
};