Question

说，我在画布上显示视频，并想在鼠标悬停时停止播放。我已经尝试了很多，请帮助代码中的问题？它也没有给出任何错误。

<!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>

当我使用上面的代码时，它也不显示视频而是音频听到，当我在最后删除几行时它显示但不起作用。请帮忙

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});
};

Answer 1

＆＃13;

var v=document.getElementById("video");
	  var canvas = document.getElementById('canvas1');  
	 var context = canvas.getContext('2d');
	 
	  canvas.addEventListener("mouseover",function(){
        
	  	v.pause();
	  	});
	  canvas.addEventListener("mouseout",function(){
	  	v.play();
	  });
	 v.addEventListener('play', function(){  
	 	var cw = Math.floor(canvas.clientWidth);  
	   	var ch = Math.floor(canvas.clientHeight); 
    		drawVideo(this,context,cw,ch);  
   	},false); 
   	function drawVideo(v,c,w,h) {  
   		if(v.paused || v.ended) return false;  
   		c.drawImage(v,0,0,w,h);  
   		setTimeout(drawVideo,20,v,c,w,h);  
  	}

＆＃13;

canvas
{
  border:1px solid green;
  }

＆＃13;

<video autoplay controls id="video" loop style="display: none;">
   	<source src="videoviewdemo.mp4"> </source>
   </video> 
   <canvas id="canvas1"> </canvas>
  </div>

＆＃13;

您可以查看示例中的问题。

Answer 2

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});
};

你最好

canvas.addEventListeer("mouseover", fary, false);

或

canvas.addEventListeer("mouseenter", fary, false);

事件类型名称错误。

画布中的Onmousehover错误

2 个答案: