我们先来做点准备工作 … 找到下来的 JW Player ，先解压一下 … 解压以后你会得到几个文件，我们只需要把这里的 jwplayer.js 嵌入到网页项目里就可以了 … 另外这个 README.html 是一个使用说明的文档 .. 你可以把它删除掉 ..

然后把它放在这个课程的资料包里 … 可以重命名一下 … 命名为 player …

这个资料包里，bootstrap 里面是 bootstrap 的架构 … 你可以参考宁皓网的 bootstrap 课程去了解它 …. 我们一会儿会用到这个架构里的布局相关的样式 …

css 这个目录下面是一个自定义的样式表 ….

video 目录下 … 有一些视频文件 … 还有视频文件的截图 ….

再添加一个目录 … 命名为 01-03 ...

下面我们在这个目录里去创建一个网页 …

打开你喜欢的文本编辑软件 …. 这里我用的编辑软件是 brackets … 这是一个开源的文本编辑软件，可以运行在 windows 和 mac 平台上 …

你可以选择使用自己喜欢的编辑软件 …

文档可以使用 html5 的标准…

因为在我的编辑器上安装了 emmet 插件 … 所以，我可以这样来创建一个基本的 html5 网页的结构 …. 输入一个 ！ 号 … 然后按一下 tab 键

修改一下页面的标题 …. JW Player …

再去添加一个 viewport 的 meta 标签 ….

输入 meta:vp 再按一下 tab …. 在我们的响应式设计课程里，介绍了这个标签的作用 … 有兴趣可以看一下 ….

然后去链接几个样式表 …

link

最后，我们可以再创建一个简单的 bootstrap 布局的结构

div.container>div.row

在下面的视频里我们在这里去嵌入 JW Player 播放器，去播放视频 …