我的弹幕播放器不可能这么难看

花了点时间做了个弹幕播放器的雏形,主要问题是弹幕部分还没做( • ˍ •ू )

播放器完全基于HTML5,Javascript,CSS3制作。

 

以下是雏形(颜色奇怪的部分是未装修的部分,不要觉得奇怪啊喵)

视频和控制条中间那一块孔板区域是弹幕发送框预留位,我没给他色位标识是因为已经定了白色了。。。

QQ截图20140419193543

 

隐藏了边栏以后

QQ截图20140419193615

 

音量条

QQ截图20140419193650QQ截图20140419193631
点击音量条下面的“张大的嘴”可静音

 

撑满页面效果

QQ截图20140419193721

 

撑满页面模式下的弹幕发送框(全频模式下暂时一样)

QQ截图20140419193840

 

全屏模式
QQ截图20140419193904

 

全屏模式下 的控制状态

QQ截图20140419194018

 

和BILI不同的地方就是全屏也可以打开边栏

QQ截图20140419194033

 

进度条包括三部分:播放进度、播放过的时间条、缓冲条(虽然没什么必要不过目前用来装B)

QQ截图20140419194615

 

按钮介绍

QQ截图20140419194443

 

 

弹幕部分已做好了加载弹幕,在显示弹幕方面我一直在纠结是用canvas还是直接用HTML

 

目前想要在同一页面显示多个这样的播放器的话只能用iframe了,这是由我这蛋疼的代码习惯决定的….





如文中无特殊说明,本站均使用以下协议:知识共享许可协议
知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。

本博客使用Disqus评论系统,如果看不到评论框,请尝试爬墙。