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

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

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

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

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

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

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

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

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

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

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

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

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

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

时间: 02-12

Bootstrap+Html5制作强大的网页视频播放器的相关文章

支持wmv、mpg、mov、avi格式的网页视频播放代码

这2天一直在整金网奖的相关项目,比较头大的就是网页视频播放了,需要考虑各种不同格式的视频,然后找相应的视频播放器. 这次使用了2种方法对这些视频进行处理: 1.使用ckplayer网页视频播放器 ckplayer可以说是非常好用的网页视频播放器了,代码部署简单,配置容易,但遗憾的是支持的视频格式不是很多,仅支持flv.f4v.mp4等格式. 2.使用window media play网页播放器 对于这个视频播放器,大家应该不陌生,是window系统自带的播放器,个人非常讨厌这个东东,虽然是系统自

MP4视频播放器代码

mp4网页视频播放器代码: <video id="video" width="100%" src="http://www.mlhd.org/shipin/018.mp4" style="margin: h.264" controls></video> 此代码由河北魅力网络进行整理,能在网页中实现mp4播放,代码能自动加载视频缓冲条,演示娱乐图,默认为不自动播放,保留带宽. 大家在遇到视频播放的问题的时候

jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器

最近在论坛中看到了很多实用html5开发视频播放,音乐播放的功能,大部分都在寻找答案.因此我就在这里做一个demo,供大家相互学习.html5开发越来越流行了,而对于视频这一块也是必不可少的一部分.如何让你的网站占据优势,就要看你的功能和用户体验了.html5对video还是做了很多优惠的东西,我们使用起来很得心应手. 在过去 flash 是网页上最好的解决视频的方法,截至到目前还算是主流,像那些优酷之类的视频网站.虾米那样的在线音乐网站,仍然使用 flash 来提供播放服务.但是这种状况将会随

视频播放器的制作

今天为大家简单介绍下视频播放器的制作,由于没有系统,所以很无奈的只好手打键盘来实现代码快的实现了,希望可以帮到那些需要用到视频播放器的友友有用吧,下面就为大家介绍下视频播放器的制作以及实现吧,嘿嘿. 利用自带MPMoviePlayerController来实现视频播放,首先要在项目中导入MediaPlayer.Framework框架包. 在视图控制器中 #import "MediaPlayer/MPMoviePlayerController.h" .m文件中,加入一下代码 - (voi

PyQT制作视频播放器

Python应用03 使用PyQT制作视频播放器 作者:Vamei 出处:http://www.cnblogs.com/vamei 严禁任何形式转载. 最近研究了Python的两个GUI包,Tkinter和PyQT.这两个GUI包的底层分别是Tcl/Tk和QT.相比之下,我觉得PyQT使用起来更加方便,功能也相对丰富.这一篇用PyQT实现一个视频播放器,并借此来说明PyQT的基本用法. 视频播放器 先把已经完成的代码放出来.代码基于Python 3.5: import time import s

分享一个基于HTML5实现的视频播放器

什么是hivideo? 最近一段时间在使用PhoneGap开发一个App应用,App需要播放视频,本想直接使用html5的video,但使用它在全屏播放时不支持横屏播放,只能放弃.最终决定还是自己封装一个播放器算了,免得以后要扩展功能麻烦. 最近迷上hi这个单词,所以我给这个播放器取名叫做:hivideo. hivideo是一款基于html5的视频播放器,摒弃video原有的播放控制条样式,自己重写了一次.支持暂停.播放进度控制.声音控制.全屏播放.如果是要在手机端使用hivideo,全屏播放时

基于JSON数据HTML5视频播放器js插件教程

一.安装 可以通过Bower来安装该视频播放器插件. bower install frame-player 在页面中引入frameplayer.css和frameplayer.js文件. <link rel="stylesheet" href="path-to/frameplayer.css"> <script src="path-to/frameplayer.js"></script> 二.Html结构 在页

Python应用03 使用PyQT制作视频播放器

作者:Vamei 出处:http://www.cnblogs.com/vamei 严禁任何形式转载. 最近研究了Python的两个GUI包,Tkinter和PyQT.这两个GUI包的底层分别是Tcl/Tk和QT.相比之下,我觉得PyQT使用起来更加方便,功能也相对丰富.这一篇用PyQT实现一个视频播放器,并借此来说明PyQT的基本用法. 视频播放器 先把已经完成的代码放出来.代码基于Python 3.5: import time import sys from PyQt4 import QtGu

免费视频播放器videojs中文教程

Video.js是一款web视频播放器,支持html5和flash两种播放方式.更多关于video.js的介绍,可以访问官方网站介绍,我之前也写过一篇关于video.js的使用心得,有兴趣的可以点这里 , 阅读的人数还蛮多的,有些热心的读者甚至还给过我小额打赏,钱虽不多,但是很感动.最几天又收到几位网友的私信,问一些关于videojs使用方面的问题.我自己都不记得videojs长什么模样了,出于别人对我的信任,又回头看了一遍上一篇文章,还是2014年的时候写的,如今videojs的版本已经更新到