<!-- <!DOCTYPE html>声明是html文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 有些只有单标签比如meta -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 改变标签页 -->
<title>超级暴龙王</title>
<link rel="stylesheet" href="../style.css">
<style type="text/css">
#btn{ width:100px;height:40px; font-size:20px;border-radius:10px;}
#main{ width:800px;height:600px; background:#cc00cc; margin:0 auto;text-align:center;}
/* #vido{ width:602px; height:402px; border:1px dotted #00ff66; margin:0 auto;} */
</style>
<style type="text/css">
#btn,#btn2{ width:100px;height:40px; font-size:20px;border-radius:10px;
background:#44dc81;}
#main{ width:800px;height:600px; background:#fcfcfc; margin: 60px 250px;
text-align:center; position:relative;}
/* #vido{ width:602px; height:402px; border:1px dotted #00ff66;
margin:0 auto; position:absolute; top:100px; left:400px;} */
</style>
</head>
<body>
<div id="main">
<table width="1000px" height="500px" border="1px" cellspacing="0">
<tr>
<th>视频资源名称</th>
<th>查看</th>
<th>视频内容</th>
</tr>
<tr>
<td>摸摸看</td>
<td><input type="button" id="btn" onclick="open_video()" value="播放视频">
<input type="button" id="btn2" onclick="close1()" value="关闭视频">
</td>
<td align="center">
<video id="1" width="600" height="400" controls>
<source src="./video/lulukan.mp4" type="video/mp4">
</video>
</td>
</tr>
<tr>
<td>亲亲看</td>
<td><input type="button" id="btn" onclick="open_video2()" value="播放视频">
<input type="button" id="btn2" onclick="close2()" value="关闭视频">
</td>
<td align="center"><video id="2" width="600" height="400" controls>
<source src="./video/lulukan.mp4" type="video/mp4">
</video>
</td>
</tr>
<tr>
<td>抱抱看</td>
<td><input type="button" id="btn" onclick="open_video3()" value="播放视频">
<input type="button" id="btn2" onclick="close3()" value="关闭视频">
</td>
<td align="center">
<video id="3" width="600" height="400" controls>
<source src="./video/lulukan.mp4" type="video/mp4">
</video>
</td>
</tr>
</table>
</div>
<script>
window.onload=function non(){
document.getElementById("1").style.cssText = "display:block;";
document.getElementById("2").style.cssText = "display:none;";
document.getElementById("3").style.cssText = "display:none;";
}
function close1() {
window.location.reload();
}
function open_video(){
document.getElementById("1").style.cssText = "display:block;";
}
function close2() {
window.location.reload();
}
function open_video2(){
document.getElementById("2").style.cssText = "display:block;";
document.getElementById("3").style.cssText = "display:none;";
document.getElementById("1").style.cssText = "display:none;";
}
function close3() {
// document.getElementById("3").style.cssText = "display:none;"
window.location.reload();
}
function open_video3(){
document.getElementById("3").style.cssText = "display:block;";
document.getElementById("2").style.cssText = "display:none;";
document.getElementById("1").style.cssText = "display:none;";
}
</script>
</body>
</html>
![]()
浙公网安备 33010602011771号