我正在尝试使用一些 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 中的触发频率不够高,无法实现。想知道我遗漏了什么/遗漏了什么/完全愚蠢,这使得我在上面提供的代码和示例成为可能。任何建议、建设性批评或指点都将不胜感激!
最佳答案
我 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 - 获取视频以鼠标移动的方向播放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39992691/