Hi all,

Need help, I am trying to make a video play when i hover over it on my site.

The html is below and the video tag is called windows

HTML Code:
<!DOCTYPE HTML>
		<html xmlns="http://www.w3.org/1999/xhtml">


		<head>
		<script src="code.js" type="text/javascript"></script>
		<meta charset="UTF-8">
		<link href="general.css" rel="stylesheet" type="text/css">
		<title>TEMP NAME</title>
		
		<div class="header_main">
		
		Logo and heading(Picture) animated
		</div>
		</head>
		
		<body id="wrap">
		
		<div class="left_bar">
		<img src="left_bar.png" alt="Left Bar"></img>
		</div>
		<div class="middle_bar">
		<img src="middle_bar.png" alt="Middle Bar"></img>
		</div>
		<div class="right_bar">
		<img src="right_bar.png" alt="Right Bar"></img>
		</div>
		<div class="left_panel">
		
		</div>
		<div class="right_panel">
		
		</div>
		<div class="whole">
		
		<div class="window">
		
		<div class="windows">
		<embed src="test.mov" width="130" height="400" controller="false" onfocus="hoverVideo()" loop="true" type="audio/x-pn-realaudio-plugin" controls="ImageWindow" id="windowOne">
		</div>
		<div class="windows">
		<embed src="test1.mov" width="130" height="400" controller="false" autostart="false" loop="true" type="audio/x-pn-realaudio-plugin" controls="ImageWindow" >
		</div>
		<div class="windows">
		<embed src="test2.mov" width="130" height="400" controller="false" autostart="false" loop="true" type="audio/x-pn-realaudio-plugin" controls="ImageWindow" >
		</div>
		<div class="windows">
		<embed src="test3.mov" width="130" height="400" controller="false" autostart="false" loop="true" type="audio/x-pn-realaudio-plugin" controls="ImageWindow" >
		</div>
		<div class="windows">
		<embed src="test4.mov" width="130" height="400" controller="false" autostart="false" loop="true" type="audio/x-pn-realaudio-plugin" controls="ImageWindow" >
		</div>
		</div>
		
		<p class="content">
		asdsadadsfafasdf
		
		</p>
		<p class="content">
		asdsadadsfafasdf
		
		</p>
		<p class="content">
		asdsadadsfafasdf
		
		</p>
		<p class="content">
		asdsadadsfafasdf
		
		</p>
		<p class="content">
		asdsadadsfafasdf
		
		</p>
		<p class="content">
		asdsadadsfafasdf
		
		</p>
		<p class="content">
		asdsadadsfafasdf
		
		</p>
		<p class="content">
		asdsadadsfafasdf
		
		</p>
		
		
		
		
		</div>
		
		</body>
		
		
		</html>
The code that i have so far which i am struggling with.

Code:
document.addEventListener('mouseover',hoverVideo(),false);
var vid = document.getElementByTagId('windows');
function hoverVideo(e)
{ 
	alert("working");
 if(e.windowOne == vid)
 {
  vid.play();
  this.addEventListener('mouseout',hideVideo,false);
 }

}

function hideVideo(e)
{
 if(e.target == vid)
 {
  vid.pause();
 }

}
The alert is to test that it goes to the function on the hover. But that alert appears upon opening the web page.


Any ideas???