Javascript - 跟踪视频中的鼠标位置 [英] Javascript - Track mouse position within video

问题描述

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

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

同时我可能需要一个解决方案来转换此位置xy如果我以不同的尺寸运行此视频。

非常感谢您的帮助。
George

解决方案

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

• 鼠标位置是相对于客户端窗口而不是视频元素


• 如果您的视频使用CSS缩放，则鼠标位置需要反向缩放以对应视频中的实际像素位置

调整位置

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

  function mouseHandler（event）{
 var rect = this .getBoundingClientRect（）; //元素的绝对位置
 var x = event.clientX  -  rect.left; //调整x 
 var y = event.clientY  -  rect.top; //调整y 
 
 ...其余代码在这里
} 
  

缩放元素

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

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

  function getElementCSSSize（el）{
 var cs = getComputedStyle（el）; 
 var w = parseInt（cs.getPropertyValue（width），10）; 
 var h = parseInt（cs.getPropertyValue（height），10）; 
返回{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（）; //元素的绝对位置
 var x =（（event.clientX  -  rect.left）* scaleX + 0.5）| 0; //舍入到整数
 var y =（（event.clientY  -  rect.top）* scaleY + 0.5）| 0; 
 
 ...其余代码在这里
} 
  

到把这段代码用来做：

  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（）; //元素的绝对位置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 =（视频：+ 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 }  

 视频位于页面的某处< i>< / I>：其中峰; br><峰; br>< DIV> < video muted loop autoplay =truestyle =width：320px; height：auto;> < source src =http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4type =video / mp4> < source src =http://clips.vorwaerts-gmbh.de/big_buck_bunny.webmtype =video / webm> < source src =http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogvtype =video / ogg> < /视频> < span>< / span>< / div>  

Is it possible to track mouse position within a video that is playing?

I want to make this video with video.js and i want to save the location of the mouse within the video. For example based on ratio of the video - or something similar to detect when the mouse is over left part of the video, right top bottom -- basically a location x y.

In the same time i might need a solution to convert this location x y if i run this video on a different size.

Thanks a lot for your help. George

解决方案

You can track mouse positions with video but you need to note:

• Mouse position is relative to client window, not the video element
• If your video is scaled using CSS the mouse position needs to be inverse scaled to correspond to actual pixel position in video

Adjust position

Here is how you read the mouse position relative to video element. This method will also work with a scrolled view-port.

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
}

Scaled element

For video elements that are scaled you will also have to scale the position down to fit the native size of the video.

For this reason you should try to set CSS style dynamically. It is possible though to also read current state of element using this method:

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}
}

Lets implement that in our mouse handler code:

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
}

To put this code to work do:

video.addEventListener("mousemove", mouseHandler);

Note that reading element CSS size for every mouse move is not the most efficient way. This code is of course just for example, but you should consider rewriting it so that it only updates when there is actual need to do so (f.ex. listening to the window's resize event can be one way to update this information).

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>

这篇关于Javascript - 跟踪视频中的鼠标位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！