<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8"/>
<title>测试</title>
<style>
*{
padding:0px;
margin:0px;
}
.container{
position:absolute;
margin-left:-640px;
left:50%;
margin-top:-384px;
top:50%;
}
video{
position:absolute;
left:0px;
top:0px;
}
</style>
</head>
<body>
<div class="container">
<video id="image-video" width="1280" height="768">
<source src="res/image.mp4" type="video/mp4">
</video>
<video id="text-video" width="1280" height="768">
<source src="res/text.mp4" type="video/mp4">
</video>
</div>
<audio id="audio">
<source src="res/sound.mp3" type="audio/mpeg">
</audio>
<script src="jquery-2.1.3.min.js"></script>
<script>
var KEY={
UP:38,
RIGHT:39,
DOWN:40,
LEFT:37
};
var image_video=document.querySelector('#image-video');
var text_video=document.querySelector('#text-video');
var audio=document.querySelector('#audio');
$(function(){
$(audio).hide();
$(document).keydown(function(event){
if(event.keyCode===KEY.UP){
image_video.play();
text_video.play();
audio.play();
}
});
$("#text-video").click(function () {
$(this).animate({
opacity: "hide"
}, "fast");
});
$("#image-video").click(function () {
$("#text-video").animate({
opacity: "show"
}, "fast");
});
});
</script>
</body>
</html>
