Javascript

Question

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

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

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

非常感谢您的帮助。乔治

Answer 1

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

Answer 2

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

鼠标位置是相对于客户端 window，而不是视频元素
如果您的视频使用 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。监听 window 的调整大小事件可以是一个更新此信息的方式）。

演示

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>

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

Javascript - Track mouse position within video

mouse

jquery

mouseover

html5-video

调整位置

缩放元素

演示