i make a fullscreen video, when tested it offline, its just fine. but when i view it online, the video not play, and just blank (black). and i add some code to directly goes to homepage when videos end, and a skip link. why?

this my code:

Code:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){  
   $("#video-id").bind('ended', function(){
       location.href="index2.html#item1";  
   });
});
</script>
</head>

<body>

<div class="videoContainer">
  <video autoplay id="video-id">
    <source src="final2.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  </video>

<div id="linka">
  <a href="index2.html">Skip >></a>
  </div>
the css

Code:
.videoContainer
{
    height:100%;
    width:100%;
    overflow: hidden;
	top:0;
	left:0;
}

video
{
    width: 100%;
   	height: auto;
	max-width: 100%;
}