注：视频之类的资源由自己在网络上下载并且放入！
以下为代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{
background-color: silver;
text-align: center;
}
#course{
width: 640px;
background-color: white;
margin: auto;
text-align: left;
box-shadow: 10px 10px 15px black;
}
ul{
list-style: none;
padding: 10px;
margin-top: -10px;
}
h3{
text-align: center;
}
li{
cursor: pointer;
}
li hover{
color: red;
}
li span{
line-height: 40px;
height: 40px;
padding: 0;
}
img{
vertical-align: bottom;
width: 40px;
height: 40px;
}
</style>
</head>
<body style="background-image:url(image/原神.jpg) ;">
<div id="course">
<!--创建视频播放窗口-->
<video id="screen" width="640" src="video/art.mp4" controls autoplay>
对不起，您的浏览器不支持HTML5视频。
</video>
<!--课程大纲列表-->
<ul>
<li>
<!--课程标题-->
<h3>欧洲简史</h3>
</li>
<!--水平线-->
<hr />
<li onclick="playCourse(60)">
<img src="image/course/play.png" />
<span>早期基督美术建筑</span>
</li>
<hr />
<li onclick="playCourse(120)">
<img src="image/course/play.png" />
<span>早期基督美术之绘画</span>
<hr />
<li onclick="playCourse(220)">
<img src="image/course/play.png" />
<span>早期基督美术之绘画：拜占庭美术</span>
</li>
<hr />
<li onclick="playCourse(320)">
<img src="image/course/play.png" />
<span>早期基督美术之绘画：镶嵌画</span>
</li>
<hr />
<li onclick="playCourse(420)">
<img src="image/course/play.png" />
<span>早期基督美术之绘画：罗马式美术</span>
</li>
</li>
</ul>
</div>
<script type="text/javascript">
var screen=document.getElementById("screen");
function playCourse(timer){
screen.currentTime=time;
screen.play();
}
</script>
</body>
</html>
以下为运行结果：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
