前言
本文仅仅是做一个简单的弹幕播放器
本文弹幕播放器仅仅是演示一下发送弹幕功能
请跳转本文底部的在线调试代码进行调试
最终实现效果如下:
Okay.首先你得找到一个弹幕开源库就是这个啦
:https://github.com/jabbany/CommentCoreLibrary
其次你得准备好一个HTML文件 准备完后lets do it
引入两个重要的弹幕开源库文件 这里用了我blog的文件
编写好HTML 结构
这里解释一下这个弹幕开源库必须要一个HTML结构也就是
这两个结构是必须的 且class为abp和container也是不能改变的 这点从开源库的css文件就可以看出
添加一些视频元素和一个表单元素 HTML就okay了
设置一下CSS达到全屏的效果
这里说我遇到一个坑.在绘制的div也就是id="commentCanvas" 他的css属性为position:absolute z-index=999 所以会覆盖在视频文件上方导致视频文件进度条无法按 - -于是这里我采用了设置id="commentCanvas"的height=80%来达到效果。当然肯定有更好的解决办法，希望大家能够踊跃讨论下。
设置一些js属性