Javascript 画布中的Onmousehover错误_Javascript_Html_Canvas

Javascript 画布中的Onmousehover错误

javascript html canvas

Javascript 画布中的Onmousehover错误,javascript,html,canvas,Javascript,Html,Canvas,比方说，我正在画布上显示视频，每当鼠标悬停在视频上时，我都想停止它。我已经尝试了很多，请帮助解决代码中的问题？它也不会给出任何错误 <!DOCTYPE html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <title>Playing YouTube video o

比方说，我正在画布上显示视频，每当鼠标悬停在视频上时，我都想停止它。我已经尝试了很多，请帮助解决代码中的问题？它也不会给出任何错误

<!DOCTYPE html>  
<head>  
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <title>Playing YouTube video on HTML5 canvas</title>  
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" />  
    <style type="text/css">  
        html, body {  
            width: 50%;  
            height: 50%;  
            padding: 0px;  
            margin: 0px;  
        }  
        #canvas {  
            padding: 0px;  
            margin: 0px;  
            top:0;  
            left:0;  
            z-index: -1;  
            position: absolute;  
            width: 50%;  
            height: 50%;  
        }  
    </style>  
</head>  

<body>  
    <div style="display: none;">  
        <video id="video" autoplay="true" loop="true" >  
            <source src="video/browser.ogg" type="video/ogg" />  
            <source src="video/browser.mp4" type="video/mp4" />  
        </video>  
    </div>  
    <canvas id="canvas1"></canvas>  
    <script>  
        document.addEventListener('DOMContentLoaded', function(){  
            var v = document.getElementById('video');  
            var canvas = document.getElementById('canvas1');  
            var context = canvas.getContext('2d');  
            //var cw = Math.floor(canvas.clientWidth / 100);  
            //var ch = Math.floor(canvas.clientHeight / 100);  
            var cw = Math.floor(canvas.clientWidth);  
            var ch = Math.floor(canvas.clientHeight);  
            canvas.width = cw;  
            canvas.height = ch;  
            v.addEventListener('play', function(){  
                draw(this,context,cw,ch);  
            },false);  
        },false);  

        function draw(v,c,w,h) {  
            if(v.paused || v.ended) return false;  
            c.drawImage(v,0,0,w,h);  
            setTimeout(draw,20,v,c,w,h);  
        }  

        function initialise(){
            var canvas=document.getElementById("canvas1");
            canvas.addEventListener("mousehover", fary, false);
        }

        function  fary(event){
            video.pause({left:event.pageX-200,top:event.pageY+100});
        };
    </script>
</body>  
</html>

你最好

canvas.addeventlister（“mouseover”，fary，false）
或
canvas.addEventLister（“mouseenter”，fary，false）
事件类型名称错误


var v=document.getElementById（“视频”）；
var canvas=document.getElementById（'canvas1'）；
var context=canvas.getContext（'2d'）；
addEventListener（“mouseover”，function（））{
v、 暂停（）；
});
addEventListener（“mouseout”，function（））{
v、 play（）；
});
v、 addEventListener（'play'，函数（）{
var cw=数学地板（canvas.clientWidth）；
var ch=数学地板（画布厚度）；
drawVideo（本、上下文、cw、ch）；
}，假）；
函数drawVideo（v，c，w，h）{
如果（暂停| |结束）返回false；
c、 绘图图像（v，0，0，w，h）；
设置超时（drawVideo，20，v，c，w，h）；
}
画布
{
边框：1px纯绿色；
}

你能做小提琴吗？好的，我现在做小提琴
function initialise(){
    var canvas=document.getElementById("canvas1");
    canvas.addEventListener("mousehover", fary, false);
}
function fary(event){
    video.pause({left:event.pageX-200,top:event.pageY+100});
};

function initialise(){
    var canvas=document.getElementById("canvas1");
    canvas.addEventListeer("mousehover", fary, false);
}
function  fary(event){
    video.pause({left:event.pageX-200,top:event.pageY+100});
};