<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标移入视频播放，鼠标移出播放停止，恢复到原来状态</title>
<link rel="shortcut icon" href="http://files.cnblogs.com/files/heyiming/logo.ico" />
<style>
*{
margin: 0;
padding: 0;
}
.video{
width: 200px;
height: auto;
margin: 0 auto;
}
#video{
width: 200px;
height: auto;
}
</style>
</head>
<body>
<div class="video">
<div class="img" onmouseover="come()"><img src="demo.png" alt=""/></div>
<a href="此处填写你想要跳转的地址">
<video id="video" style="display: none" src="videos/demo.mp4" autoplay="autoplay" onmouseout="go()" ></video>
</a>
</div>
</body>
</html>
<script src="http://files.cnblogs.com/files/heyiming/jquery-2.1.4.min.js"></script>
<script>
myVid=document.getElementById("video");
myVid.muted=true;
function come() {
$("#video").show();
$(".img").hide();
$("#video").load();//执行一次加载一次，从头开始播放
}
function go() {
$(".img").show();
$("#video").hide();
}
</script>
时间： 2024-10-22 19:15:37