问题

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

回答1:

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>