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

在做视频管理系统时,我们的定位是做到类似土豆视频的功能。视频管理,当然播放是必不可少的。在做这个播6rr迪尔课堂自学网---官网 (迪尔掌上课堂)

放页面的时候,也研究了一下土豆的播放器,土豆用的是自己做的。但由于我们目前的技术有限,于是想着从网上找6rr迪尔课堂自学网---官网 (迪尔掌上课堂)

一个现成的插件,于是开始了播放器的技术选型。6rr迪尔课堂自学网---官网 (迪尔掌上课堂)

    我发现了一个好的插件叫Video.js,研究了一下。基本的播放没问题,但当需要动态传参播放视频的时候,该款6rr迪尔课堂自学网---官网 (迪尔掌上课堂)

播放器却很难跟着我的思路走,参数动态传不进去。如果现在去研究内部的js,改动内部代码,时间不允许。于是迫6rr迪尔课堂自学网---官网 (迪尔掌上课堂)

不得已,只能另换解决方案。6rr迪尔课堂自学网---官网 (迪尔掌上课堂)

    搜索一番,发现Html5的<Video>可以实现视频播放,于是开始研究。但这个播放器太简单,也比较丑,满足不了6rr迪尔课堂自学网---官网 (迪尔掌上课堂)

我们的需要,于是在他的基础上进行加工。6rr迪尔课堂自学网---官网 (迪尔掌上课堂)

    借助BootStrap的Pannel标签,在播放器的外面加上panel-body标签,背景设置成黑色,使播放器更加大气。6rr迪尔课堂自学网---官网 (迪尔掌上课堂)

    相关视频的展示,是许多Div块儿,通过z-index浮动来实现位置的调整。整了整整一天,才做出了让自己满意的6rr迪尔课堂自学网---官网 (迪尔掌上课堂)

放器的界面。下面上图:6rr迪尔课堂自学网---官网 (迪尔掌上课堂)

6rr迪尔课堂自学网---官网 (迪尔掌上课堂)

 6rr迪尔课堂自学网---官网 (迪尔掌上课堂)

    通过这次做项目,收获的不仅仅是技术,更重要的是Team内的相互交流与写作。项目组长是一个项目的灵活,组6rr迪尔课堂自学网---官网 (迪尔掌上课堂)

长把控着整个项目的进度,对项目的推进有重要的作用。总之收获很多,接下来还需要好好总结。6rr迪尔课堂自学网---官网 (迪尔掌上课堂)

6rr迪尔课堂自学网---官网 (迪尔掌上课堂)
 

扫一扫手机访问