写在前面
好久没跟新博客了。最近一直忙着恶补JavaScript的知识,没办法,小白就要多练多看。这两天写了个简单的视频播放器,实现了一些简单的功能。今天就把这个简单的播放器分享出来,仅供参考。希望能对大家有点帮助。。。尽管这个写的比较low。。
效果功能
效果预览
效果如下图:
实现功能
播放器是用原生js写的,实现了一些基本的功能:
- 播放/暂停、停止、空格键暂停/播放;
- 音量加减、支持拖动调节音量以及上下方向键调整音量;
- 支持静音、全屏播放;
- 支持发送弹幕,弹幕颜色随机、出现位置随机;
- 支持播放列表点击切换、支持自动循环列表播放。
目前还存在的bug
目前发现,在播放过程中,通过键盘上下方向键调节音量后,鼠标划入视频区域,控制条无法显示。。暂未解决。
源码分享
说明:源代码中引入了font-awesome的字体图标库。
HTML部分代码
页面结构布局较简单,下面是HTML部分的代码:
|
CSS代码
@charset "UTF-8"; |
js代码
以下是js代码部分,注释较为详细,应该很容易看明白。
// 视频文件名存在数组之中 |