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

Question

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

我想用 video.js 制作这个视频，并且我想在视频中保存鼠标的位置。例如，基于视频的比例 - 或类似的东西来检测鼠标何时位于视频的左上部分，右上下 - 基本上是位置 x y。

同时，如果我在不同尺寸上运行此视频，我可能需要一个解决方案来转换此位置 x y。

非常感谢您的帮助。 乔治

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 大小并不是最有效的方法。此代码当然只是示例，但您应该考虑重写它，以便仅在实际需要时更新（例如，监听窗口的调整大小事件可能是更新此信息的一种方法）。

演示

var video = document.querySelector("video"),
    info = document.querySelector("span"),
    initial = document.querySelector("i");

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;
    var y = ((event.clientY - rect.top ) * scaleY + 0.5)|0;

    info.innerHTML = "x: " + x + " y: " + y;
    initial.innerHTML = "(video: " + this.videoWidth + " x " + this.videoHeight + ")";
}

video.addEventListener("mousemove", mouseHandler);

body {background:#777}
body, div {position:relative}
video, span {position:absolute;left:0;top:0;border:1px solid #000;padding:0}
span {background:rgba(0,0,0,0.5);color:#fff;font:16px sans-serif;pointer-events:none}

Video placed somewhere on page <i></i>:<br><br>
<div>
  <video muted loop autoplay="true" style="width:320px;height:auto;">
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
            <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
  </video>
  <span></span>
</div>

Answer 2

您可以使用 onmousemove 事件跟踪鼠标位置，就像使用任何其他 HTML 元素一样。