在线教学视频的设计与实现

在线教学视频的设计与实现

功能要求：
设计一款基于HTML5视频技术的在线视频播放页面，包含视频播放窗口和课程目录列表。
其中视频播放窗口带有相关控件，可以由用户点击切换全屏效果，以及随时暂停和拖拽到指定时间继续播放。
课程目录列表用于显示当前课程的大纲，用户点击列表中不同的选项可以使得课程跳转到相应的播放时间继续进行播放。
实现效果图：

一、界面设计

1.整体布局设计
    使用<div>标签划分区域
2. 视频播放窗口的设计
    使用视频标签<video>
    自带controls属性
3. 课程列表布局设计
    无序列表标签<ul>
    列表选项标签<li>

二、视频的载入和播放

1.修改<video>标签
    src属性指定视频来源
    autoplay属性自动播放

<!--创建视频播放窗口-->
<video id="screen" width="640" src="video/art.mp4" controls autoplay>
对不起，您的浏览器不支持HTML5视频。
</video>

三、视频时间跳转的实现

    为<li>标签提供自定义点击事件playCourse(time)
    time替换为需要跳转的时间（单位：秒）

//跳转播放时间
function playCourse(time) {            
     //重置当前播放时间
     screen.currentTime = time;
     //继续播放视频
     screen.play();
}

四、部分代码

<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>
                </li>
                <!--水平线-->
                <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>
            </ul>
        </div>

备注：完整代码请下载附件

https://download.youkuaiyun.com/download/YQEMMMM/13025776