我们先去克隆一个小仓库 .. 进入到你想保存项目的地方 .. 输入 git clone .. 位置是 https://github.com/ninghao/ninghao-web重命名为 plyr-demo .. 这个小仓库为项目提供了一个基本的结构 .. 进入到这个目录的下面 ..

执行一下 npm install .. 去安装一下项目需要的一些东西 .. 再创建一个 bower.json 文件 .. 回答一些问题 ...

然后我们可以再去安装一下 plyr .. 也就是我们要介绍的视频与音频播放器 .. bower install plyr --save ..

在项目里我还想使用一下 semantic-ui 提供的样式，再去安装一下它 . bower install semantic-ui --save ..

执行一下 npm run watch .. 它会给我们创建一个服务器，然后监视一些文件的变化，自动给我们刷新页面 ..

用编辑器打开这个项目 .. 找到桌面上的 plyr-demo .. 打开根目录下的 index.html .. 修改一下页面的标题 ...

在页面的头部，去把 semantic-ui 的样式表链接过来 ..

位置是 bower_components/semantic-ui/dist/semantic.min.css

然后在页脚这里 .. 先把 plyr 嵌入到页面上 .. 位置是 bower_components/plyr/dist/plyr.js .. 再去嵌入一个自定义的脚本，在它的上面我们可以去配置一下 plyr 播放器 ..

可以把它放在 scripts 目录的下面，名字是 script.js .. 找到这个 scripts 目录，在它的下面，新建一个文件 .. 名字是 script.js ..

另外 plyr 播放器还有一个样式表，我们也需要把它嵌入到页面上 .. 把它放在页面的头部这里 .. 位置是 bower_components/plyr/dist/plyr.css .. 保存一下 ..

现在我们就准备好了 plyr 播放器需要的一些资源 ..