Javascript-跟踪视频中的鼠标位置

Question

是否可以跟踪正在播放的视频中的鼠标位置？

我想用video.js制作此视频，我想在视频中保存鼠标的位置。例如，基于视频的比率-或类似的检测鼠标何时在视频的左部分（右上底）上方的位置-基本上是位置y。

同时，如果我以其他尺寸运行此视频，则可能需要一种解决方案来转换此位置xy。

非常感谢你的帮助。乔治

Answer 1

您可以通过视频跟踪鼠标的位置，但需要注意以下几点：

• 鼠标位置是相对于客户端窗口，而不是视频元素
• 如果您的视频使用CSS缩放，则鼠标位置需要反比例缩放，以与视频中的实际像素位置相对应

调整位置

这是读取鼠标相对于视频元素的位置的方法。此方法也适用于滚动视口。

function mouseHandler(event) {
    var rect = this.getBoundingClientRect();  // absolute position of element
    var x = event.clientX - rect.left;        // adjust for x
    var y = event.clientY - rect.top;         // adjust for y

    ... rest of code here
}

比例元素

对于缩放的视频元素，您还必须将位置缩小以适合视频的原始大小。

因此，您应该尝试动态设置CSS样式。但是也可以使用此方法读取元素的当前状态：

function getElementCSSSize(el) {
    var cs = getComputedStyle(el);
    var w = parseInt(cs.getPropertyValue("width"), 10);
    var h = parseInt(cs.getPropertyValue("height"), 10);
    return {width: w, height: h}
}

让我们在我们的鼠标处理程序代码中实现它：

function mouseHandler(event) {
    var size = getElementCSSSize(this);
    var scaleX = this.videoWidth / size.width;
    var scaleY = this.videoHeight / size.height;

    var rect = this.getBoundingClientRect();  // absolute position of element
    var x = ((event.clientX - rect.left) * scaleX + 0.5)|0; // round to integer
    var y = ((event.clientY - rect.top ) * scaleY + 0.5)|0;

    ... rest of code here
}

要使此代码生效，请执行以下操作：

video.addEventListener("mousemove", mouseHandler);

请注意，读取鼠标每一次移动的CSS尺寸并不是最有效的方法。当然，该代码仅是示例，但是您应该考虑重写它，以便仅在实际需要时才对其进行更新（例如，监听窗口的resize事件可以是更新此信息的一种方法）。

演示版

function mouseHandler(event) {
    var rect = this.getBoundingClientRect();  // absolute position of element
    var x = event.clientX - rect.left;        // adjust for x
    var y = event.clientY - rect.top;         // adjust for y

    ... rest of code here
}

function getElementCSSSize(el) {
    var cs = getComputedStyle(el);
    var w = parseInt(cs.getPropertyValue("width"), 10);
    var h = parseInt(cs.getPropertyValue("height"), 10);
    return {width: w, height: h}
}

function mouseHandler(event) {
    var size = getElementCSSSize(this);
    var scaleX = this.videoWidth / size.width;
    var scaleY = this.videoHeight / size.height;

    var rect = this.getBoundingClientRect();  // absolute position of element
    var x = ((event.clientX - rect.left) * scaleX + 0.5)|0; // round to integer
    var y = ((event.clientY - rect.top ) * scaleY + 0.5)|0;

    ... rest of code here
}