做个简单的本地弹幕播放器

 

 前言

• 本文仅仅是做一个简单的弹幕播放器
• 本文弹幕播放器仅仅是演示一下发送弹幕功能
• 请跳转本文底部的在线调试代码进行调试

最终实现效果如下:

Okay.首先你得找到一个弹幕开源库就是这个啦:https://github.com/jabbany/CommentCoreLibrary

其次你得准备好一个HTML文件 准备完后lets do it

 

引入两个重要的弹幕开源库文件 这里用了我blog的文件

1. <scriptsrc="http://emufan.com/cdn/CommentCoreLibrary.js"></script>
2. <linkrel="stylesheet"type="text/css"href="http://emufan.com/cdn/style.css"/>

 

编写好HTML 结构

这里解释一下这个弹幕开源库必须要一个HTML结构也就是

这两个结构是必须的 且class为abp和container也是不能改变的 这点从开源库的css文件就可以看出 

1. <divclass="m20 abp"id="player">
2. <divid="commentCanvas"class="container"></div>
3. </div>

 

添加一些视频元素和一个表单元素 HTML就okay了

1. <divclass="m20 abp"id="player">
2. <videoid="abpVideo"poster="http://content.bitsontherun.com/thumbs/bkaovAYt-720.jpg"controls="none">
3. <sourcesrc="http://content.bitsontherun.com/videos/bkaovAYt-52qL9xLP.mp4"type="video/mp4">
4. <sourcesrc="http://content.bitsontherun.com/videos/bkaovAYt-27m5HpIu.webm"type="video/webm">
5. <pclass="warning">Your browser does not support HTML5 video.</p>
6. </video>
7. <divid="commentCanvas"class="container"></div>
8. <divclass="controls">
9. <formaction="">
10. <p>选择颜色:<selectname=""id="chose">
11. <optionvalue="0xff0000">红色</option>
12. <optionvalue="0x7fff00">绿色</option>
13. <optionvalue="0xffff56">黄色</option>
14. </select>
15. 输入内容:<inputtype=""name="main"id="main"value=""/><buttonid="send">发送</button>
16. </p>
17. </form>
18. </div>
20. </div>

 

 

设置一下CSS达到全屏的效果

这里说我遇到一个坑.在绘制的div也就是id="commentCanvas" 他的css属性为position:absolute z-index=999 所以会覆盖在视频文件上方导致视频文件进度条无法按 -  -于是这里我采用了设置id="commentCanvas"的height=80%来达到效果。当然肯定有更好的解决办法，希望大家能够踊跃讨论下。

文章内容请参见原文链接：http://www.gbtags.com/gb/share/5769.htm

1. <style type="text/css">
2. html,body{
3. width: 100%;
4. height: 100%;
5. overflow: hidden;
7. }
8. body{
9. overflow-y:scroll;
10. }
11. .container{
12. height: 90%;
13. }
14. #abpVideo{
15. width: 100%;
16. height: 100%;
17. overflow: hidden;
18. }
19. .controls{
20. text-align: center;
21. }
22.  
23. </style>