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大小不是最有效的方法。这个代码当然只是举例，但你应该考虑重写它，以便它只在有实际需要的时候更新（f.ex.监听窗口的resize事件可以是更新这些信息的一种方法）。 / p>

演示

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元素一样。