Я пробовал много разных способов получить координаты мыши в HTML5 canvas в сочетании с видео, и ни один из них не показался слишком хорошо работающим ни в Chrome, ни в Safari.
В настоящее время я использую:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="modernizr-1.6.min.js"></script>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded,false);
var videoElement;
var VideoDiv;
var Object1;
var Mouse = {
x:0
x:y}
function eventWindowLoaded(){
videoElement = document.createElement("video");
videoDiv = document.createElement('div');
document.body.appendChild(videoDiv);
videoDiv.appendChild(videoElement);
videoDiv.setAttribute("style", "display:none;");
var videoType = supportedVideoFormat(videoElement);
if (videoType == ""){
alert("no video support");
return;
}
videoElement.setAttribute("src", "different_movement>" + videoType);
videoElement.addEventListener("canplaythrough", videoLoaded, false);
}
function supportedVideoFormat(video){
var returnExtension= "";
if(video.canPlayType("video/webm") =="probably" || video.canPlayType("video/webm") == "maybe"){
returnExtension = "webm";
} else if (video.canPlayType("video/mp4") == "probably" || video.canPlayType("video/mp4") == "maybe"){
returnExtension = "mp4";
}else if(video.canPlayType("video/ogg") == "probably" || video.canPlayType("video/ogg") == "maybe"){
returnExtension = "ogv";
}
return returnExtension;
}
function videoLoaded(event){
canvasApp();
}
canvasOne.onmousemove = function (event){
Mouse={
x: event.offsetX,
y: event.offsetY}
}
}
function canvasApp(){
function drawScreen(){
context.drawImage(videoElement, 0, 0);
context.fillStyle = '#ffffff';
context.fillText(Mouse.x, 280, 280);
context.fillText(Mouse.y, 280, 300);
}
var theCanvas = document.getElementByID('canvasOne');
var context = theCanvas.getContext('2d');
videoElement.play();
setinterval(drawScreen, 33);
}
</script>
</head>
<body>
<canvas id="canvasOne" width="640" height="480">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
В результате 0,0 будет отображаться на видео из исходной переменной, установленной на 0,0, но затем вместо изменения, когда мышь перемещается по экрану, она остается равной 0,0.Это заставляет меня поверить, что это часть кода, которая находит координаты мыши, которая не работает.
Я пробовал другие попытки найти координаты мыши, включая:
Mouse={
x: event.pageX,
y: event.pageX}
,
if (e.pageY) {
posy = e.pageY;
} else if (e.clientY) {
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
,
var mouseX;
var mouseY;
var pieceX;
var pieceY;
if (e.pageX || e.pageY) {
mouseX = e.pageX;
mouseX = e.pageY;
} else {
mouseX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
mouseY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
Предполагается, что моим конечным продуктом будет видео с взаимодействием с мышью, которое будет воспроизводить звуки при нажатии на определенные части видео (таким образом, частьвидео).Я попытался вообще не использовать холст для этого, а вместо этого расположить изображение поверх холста, на котором есть отображение изображения, но, похоже, оно не работает.
Еще одна проблема, которую я собираюсь запуститькогда я выясняю координаты мыши, я буду проверять столкновения с координатами мыши, чтобы инициировать ее воспроизведение звуков.
РЕДАКТИРОВАТЬ: полностью переписать код с помощью e.offset, похоже, работает.