Bootstrap+Html5制作强大的网页视频播放器

在做视频管理系统时，我们的定位是做到类似土豆视频的功能。视频管理，当然播放是必不可少的。在做这个播

放页面的时候，也研究了一下土豆的播放器，土豆用的是自己做的。但由于我们目前的技术有限，于是想着从网上找

一个现成的插件，于是开始了播放器的技术选型。

我发现了一个好的插件叫Video.js，研究了一下。基本的播放没问题，但当需要动态传参播放视频的时候，该款

播放器却很难跟着我的思路走，参数动态传不进去。如果现在去研究内部的js，改动内部代码，时间不允许。于是迫

不得已，只能另换解决方案。

搜索一番，发现Html5的<Video>可以实现视频播放，于是开始研究。但这个播放器太简单，也比较丑，满足不了

我们的需要，于是在他的基础上进行加工。

借助BootStrap的Pannel标签，在播放器的外面加上panel-body标签，背景设置成黑色，使播放器更加大气。

相关视频的展示，是许多Div块儿，通过z-index浮动来实现位置的调整。整了整整一天，才做出了让自己满意的

播放器的界面。下面上图：

通过这次做项目，收获的不仅仅是技术，更重要的是Team内的相互交流与写作。项目组长是一个项目的灵活，组

长把控着整个项目的进度，对项目的推进有重要的作用。总之收获很多，接下来还需要好好总结。