javascript - 获取视频以鼠标移动的方向播放

Question

我正在尝试使用一些 Javascript 来在鼠标在 x 轴上移动时触发视频播放，但无法让它工作。

我已经包含了 an example我正在努力实现的目标，以及使之成为可能的代码。

var video = document.getElementById('video');

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 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 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 throttledSeek = throttle(1000 / 16, seek);

var onload = function() {
    coverVid(video, video.videoWidth, video.videoHeight);

    loaded = true;

    video.style.opacity = 1;

    window.onresize();

    seek();
};

video.load();

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

  onload();
});

Link to Codepen

我尝试使用 jQuery 来做类似的事情，但是 .mousemove() 在 Chrome 中的触发频率不够高，无法实现。想知道我遗漏了什么/遗漏了什么/完全愚蠢，这使得我在上面提供的代码和示例成为可能。任何建议、建设性批评或指点都将不胜感激!

Answer 1

我 fork 了你的 codepen，我不知道你的 seek 究竟需要如何工作，但现在当我移动鼠标时，视频会搜索。

此处:http://codepen.io/anon/pen/KgRjow

稍微修改一下脚本:

(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 属性移到了实际的视频元素中。