获取视频以鼠标移动的方向播放
Get video to playback in direction mouse moves
我正在尝试使用一些 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();
});
我尝试使用 jQuery 来做类似的事情,但是 .mousemove() 在 Chrome 中的触发频率不够高,无法做到这一点。想知道我是什么 missing/leaving out/being 完全愚蠢,这使得我在上面提供的代码和示例成为可能。任何建议、建设性批评或指点将不胜感激!
我已经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 属性移到了实际的视频元素中。
我正在尝试使用一些 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();
});
我尝试使用 jQuery 来做类似的事情,但是 .mousemove() 在 Chrome 中的触发频率不够高,无法做到这一点。想知道我是什么 missing/leaving out/being 完全愚蠢,这使得我在上面提供的代码和示例成为可能。任何建议、建设性批评或指点将不胜感激!
我已经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 属性移到了实际的视频元素中。