1、 页面布局
本案例编写一个课程视频播放页面，页面分为三个部分：头部区域、内容区域和底部区域。
页面布局如下图：
头部区域是导航菜单，菜单中超链接都是空链接，开发者可以加入自己定制的链接页面；网页的中间部分为内容区域，内容区域的右侧是视频播放器，视频播放器采用浏览器自身的播放器，左侧是课程目录，浏览者单击课节名称，播放器会播放该课节的视频内容；底部区域放置下载APP、关于我们等导航菜单。
2、 与服务端的数据交互
页面的课程内容来自编程训练营网站，页面通过Ajax技术从网站获取课程内容，然后通过jQuery技术将课程内容添加到网页中。
网站接口地址：http://www.milihua.com/getvideotest.aspx
参数：guid，该值为“5d2d3e6c0d5188bec134fc4fc1b139e0”
接口返回JSON数据，JSON数据样例如下：
{
"videopath": "https://www.milihua.com/piece/video/9bd6f2a993e24874a995592ce9fd3bb9.mp4",
"name": "Java编程基础",
"unit": [{
"name": "第1单元：编程预备知识",
"item": [{
"name": "第1课：程序与算法",
"path": "https://www.milihua.com/piece/video/9bd6f2a993e24874a995592ce9fd3bb9.mp4"
}, {
"name": "第2课：用流程图描述算法",
"path": "https://www.milihua.com/piece/video/2860c31b591a4f1385ce431949dd18de.mp4"
}, {
"name": "第3课：用编程语言实现算法",
"path": "https://www.milihua.com/piece/video/f93e828faf224195bfcd60413ea982f5.mp4"
}]
}]
}JSON数据解释如下：
videopath：第一课节的视频地址，网页加载完成后，默认播放该课节视频。
name：课程名称。
unit：JSON数组，描述课程单元内容，课程单元内容包括课节内容。
item：JSON数组，描述课节内容，该数据有两个name和path两个数据项，分别描述了课节名称和课节视频地址。
2、 项目文件结构
下图是项目文件结构：
css目录存储项目的样式文件，img存储项目使用的图片，js目录存储项目使用的js文件，index.html是项目的主页，项目案例没有给出其它网页的代码，请读者自行添加。
3、 项目代码
主页代码
index.html是项目案例的主页，代码如下：
<html> <head> <title>JavaScript开发案例</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <link rel="stylesheet" type="text/css" href="css/menu.css" /> <link rel="stylesheet" type="text/css" href="css/bottom.css" /> <script src="js/jquery-3.5.1.min.js" type="text/javascript" ></script> <script src="js/index.js" type="text/javascript" ></script> </head> <body> <div> <!--网页顶部导航--> <div> <div> <div><div></div></div> <!--导航菜单--> <div> <ul> <li><a href="index.html" target="_blank" style="color:#ffffff;">视频播放</a></li> <li><a target="_blank" style="color:#ffffff;" onclick="open_video()">Java编程</a></li> <li><a href="#" target="_blank" style="color:#ffffff;">Python编程</a></li> <li><a href="#" target="_blank" style="color:#ffffff;">数据库编程</a></li> <li><a href="#" target="_blank" style="color:#ffffff;">前端编程</a></li> </ul> </div> <!--导航菜单--> </div> </div> <!--视频播放区域--> <div> <div> <!--vdleft--> <div> <div> <video width="90%" height="530px" controls="controls" id="idvideo" autoplay="autoplay"> <source src="" type="video/mp4"> 您的浏览器不支持视频播放，请更换支持HTML5的浏览器 </video> </div> </div> <!--vdleft--> <div> <div>目录</div> <div> <div> <ul id="id_content"> </ul> </div> </div> </div> </div> </div> <div> <div id="id_coursename"></div> </div> <!--视频播放区域--> <!--网页底部--> <div> <div> <div> <ul> <li><a href="/course/downapp.aspx" target="_blank">下载APP</a></li> <li><div></div></li> <li><a href="/about/aboutus.aspx" target="_blank">关于我们</a></li> <li><div></div></li> <li><a href="/about/bq.aspx" target="_blank">版权声明</a></li> <li><div></div></li> <li><a href="/about/feedback.aspx" target="_blank">意见反馈</a></li> <li><div></div></li> <li><a href="/about/lxwm.aspx" target="_blank">联系我们</a></li> <li><div></div></li> <li><a href="/px/pxlogin.aspx" target="_blank">服务入口</a></li> </ul> </div> <div> <ul> <li> <div></div> <div style="float:left; margin-left:5px;"><a href="/about/kf.aspx" target="_blank">联系客服</a></div> </li> <li> <div></div> <div style="float:left; margin-left:5px;"><a href="mailto:miliservice@163.com" target="_blank">miliservice@163.com</a></div> </li> <li><div></div></li> <li>潍坊米粒花网络技术有限公司</li> <li><div></div></li> <li>备案号：鲁ICP备15001146号</li> </ul> </div> </div> </div> <!--网页底部--> </div> </body> <html>
代码导入了index.css样式文件、menu.css样式文件、bottom.css样式文件和index.js文件。
在编写网页代码时，一般需要把网页中用到样式和脚本代码放置到外部文件，然后使用<link>标签导入这些外部文件。
视频播放使用了HTML5的<video>元素，<video>元素用来在网页中定义视频，因为<video>元素是HTML5的新标准，对于不支持HTML5标准的浏览器，会显示“您的浏览器不支持视频播放，请更换支持HTML5的浏览器”内容。JS通过<video>标签的id值来操作<video>元素。
网页的课程内容会动态添加到id值为id_content的元素内。
JS代码
index.js是项目的脚本文件，代码如下：
$(function () {
init_video()
});
function init_video(){
$.ajax({
// 请求方式
type:"GET",
// 请求URL
url:"https://www.milihua.com/getvideotest.aspx",
data:{
guid:"5d2d3e6c0d5188bec134fc4fc1b139e0",
},
async: false,
// 返回JSON数据
dataType: "json",
// 错误处理
error:function(){
alert("请求出错了。");
},
success : function(data) {
$("#id_coursename").html("课程名称：" + data.name);
//设置URL
$("#idvideo").attr("src", data.videopath);
//播放视频
document.getElementById("idvideo").play();
// 初始化课程目录
var content = ""
for (i = 0; i < data.unit.length; i++)
{
content += "<div class=\"dirheadhtxt\">";
content += data.unit[i].name;
content += "</div>";
// 添加课节
content += "<div class=\"subdir\">";
for (j = 0; j < data.unit[i].item.length; j++)
{
content += "<div class=\"subdiritem\">";
content += "<div class=\"dirheadhchaptertxt\" onclick=\"open_video('" + data.unit[i].item[j].path + "')\">" + data.unit[i].item[j].name + "</div>";
content += "</div>"
}
content += "</div>";
}
$("#id_content").append(content);
}
});
}
function open_video(path)
{
//设置URL
$("#idvideo").attr("src", path);
//播放视频
document.getElementById("idvideo").play();
}JS代码通过$.ajax函数调用getvideotest.aspx接口，获取课程视频内容，接口返回JSON数据，代码解析JSON数据，动态生成HTML内容，最后添加到id值为为id_content的元素内。
调用getvideotest.aspx接口时，若前缀了网站域名，可能会因为跨域调用问题导致调用失败。若发生这种情况，需要读者自行编写接口文件，接口文件代码如下：
public partial class getvideotest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
String strInfo = get_video();
Response.Write(strInfo);
Response.End();
}
public string get_video()
{
StringBuilder json = new StringBuilder();
string videopath = "https://www.milihua.com/piece/video/9bd6f2a993e24874a995592ce9fd3bb9.mp4";
json.Append("{");
json.AppendFormat("\"{0}\":\"{1}\"", "videopath", videopath);
json.Append(",");
json.AppendFormat("\"{0}\":\"{1}\"", "name", "Java编程基础");
json.Append(",");
json.Append("\"unit\":[");
json.Append("{");
json.AppendFormat("\"{0}\":\"{1}\"", "name", "第1单元：编程预备知识");
json.Append(",");
json.Append("\"item\":[");
json.Append("{");
json.AppendFormat("\"{0}\":\"{1}\"", "name", "第1课：程序与算法");
json.Append(",");
json.AppendFormat("\"{0}\":\"{1}\"", "path", "https://www.milihua.com/piece/video/9bd6f2a993e24874a995592ce9fd3bb9.mp4");
json.Append("}");
json.Append(",");
json.Append("{");
json.AppendFormat("\"{0}\":\"{1}\"", "name", "第2课：用流程图描述算法");
json.Append(",");
json.AppendFormat("\"{0}\":\"{1}\"", "path", "https://www.milihua.com/piece/video/2860c31b591a4f1385ce431949dd18de.mp4");
json.Append("}");
json.Append(",");
json.Append("{");
json.AppendFormat("\"{0}\":\"{1}\"", "name", "第3课：用编程语言实现算法");
json.Append(",");
json.AppendFormat("\"{0}\":\"{1}\"", "path", "https://www.milihua.com/piece/video/f93e828faf224195bfcd60413ea982f5.mp4");
json.Append("}");
json.Append("]");
json.Append("}");
json.Append("]");
json.Append("}");
return json.ToString();
}
}项目完整代码见课程资源（unit6/case1）。