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

Javascript - Track mouse position within video

本文关键字：鼠标 位置 跟踪 视频 Javascript-      更新时间：2023-09-26

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

我想用video.js制作这个视频，我想在视频中保存鼠标的位置。例如，根据视频的比例——或者类似的东西来检测鼠标何时在视频的左上角、右上角和右下角——基本上是一个位置x y。

同时，如果我在不同的大小上运行这个视频，我可能需要一个解决方案来转换这个位置。

非常感谢你的帮助。George

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

  • 鼠标位置相对于客户端窗口，而不是视频元素
  • 如果使用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大小并不是最有效的方法。当然，这段代码只是一个例子，但您应该考虑重写它，以便它只在实际需要时更新（例如，监听窗口的调整大小事件可能是更新此信息的一种方式）。

Demo

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>

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

相关文章：