在鼠标移动方向上播放视频

Question

当鼠标在x轴上移动时，我试图使用一些Javascript来触发视频播放，但是还没有能够让它工作。

我已经将an example包含在我想要实现的内容中，并且代码使其成为可能。

{
  "compilerOptions": {
    "module": "commonjs",
    "sourceMap": true,
    "noImplicitAny": true,
    "target": "es5",
    "jsx": "react"
  },
  "files": [
    "./app/app.tsx",
    "./app/Hello.tsx",
    "typings/index.d.ts"
  ],
  "exclude": [
      "node_modules"
  ]
}

Link to Codepen

我尝试使用jQuery做类似的事情，但.mousemove（）并没有在Chrome中频繁启动以实现这一点。想知道我错过了什么/遗漏/完全愚蠢的是什么使代码＆amp;例如我在上面提供了滴答声。任何建议，建设性的批评或指示将不胜感激！

Answer 1

我已经分叉了你的代码，我不知道你的搜索需要究竟是如何工作的，但现在当我移动鼠标时，视频会寻找。

此处：https://developers.google.com/identity/protocols/OAuth2UserAgent

稍微修改了你的脚本：

(function() {
   // your page initialization code here
   // the DOM will be available here
    var video = document.getElementById('deko_vid');

    var x = window.innerWidth / 2;
    var y = 0;

    var loaded = false;

    document.onclick = function(e) {
        window.parent.postMessage('feature:click', '*');
    };

    // function elementAtMousePosition() {
    //     return document.elementFromPoint(x, y);
    // }

    // document.addEventListener('click', function(event) {
    //     var newEvent = new Event(event.type);
    //     elementAtMousePosition().dispatchEvent(newEvent);
    // });

    document.onmousemove = function(vent) {
        event = event || window.event;
        x = event.clientX;
        y = event.clientY;

        if (loaded) {
            throttledSeek();
        }
    };


    var seek = function() {
        var spins = 3;

        var pos = (x - (window.innerWidth / spins * 0.5)) / (window.innerWidth / spins);

        pos -= Math.floor(pos);

        video.currentTime = pos * video.duration;
    };

    var throttle = function(delay, callback) {
        var previousCall = new Date().getTime();
        return function() {
            var time = new Date().getTime();
            if ((time - previousCall) >= delay) {
                previousCall = time;
                callback.apply(null, arguments);
            }
        };
    };

    var throttledSeek = throttle(1000 / 16, seek);

    function onload() {
      loaded = true;
    };

    video.load();

    video.addEventListener("canplaythrough", function() {
      this.play();
      this.pause();

      onload();
    });

})();

请注意我也修改了您的HTML ...我将视频源的ID属性移动到实际的视频元素。