做个简单的本地弹幕播放器（弹幕播放器下载）
前言
本文仅仅是做一个简单的弹幕播放器
本文弹幕播放器仅仅是演示一下发送弹幕功能
请跳转本文底部的在线调试代码进行调试
最终实现效果如下:
Okay.首先你得找到一个弹幕开源库就是这个啦
:https://github.com/jabbany/CommentCoreLibrary
其次你得准备好一个HTML文件 准备完后lets do it
引入两个重要的弹幕开源库文件 这里用了我blog的文件
<script src="http://emufan.com/cdn/CommentCoreLibrary.js" ></script><link rel="stylesheet" type="text/css" href="http://emufan.com/cdn/style.css"/>
编写好HTML 结构
这里解释一下这个弹幕开源库必须要一个HTML结构也就是
这两个结构是必须的 且class为abp和container也是不能改变的 这点从开源库的css文件就可以看出
<div class="m20 abp" id="player"><div id="commentCanvas" class="container"></div></div>
添加一些视频元素和一个表单元素 HTML就okay了
<div class="m20 abp" id="player"><video id="abpVideo" poster="
http://content.bitsontherun.com/thumbs/bkaovAYt-720.jpg" controls="none"><source src="
http://content.bitsontherun.com/videos/bkaovAYt-52qL9xLP.mp4" type="video/mp4"><source src="
http://content.bitsontherun.com/videos/bkaovAYt-27m5HpIu.webm" type="video/webm"><p class="warning">Your browser does not support HTML5 video.</p></video><div id="commentCanvas" class="container"></div><div class="controls"><form action=""><p>选择颜色:<select name="" id="chose"><option value="0xff0000">红色</option><option value="0x7fff00">绿色</option><option value="0xffff56">黄色</option></select>输入内容:<input type="" name="main" id="main" value="" /> <button id="send">发送</button></p></form></div></div>
设置一下CSS达到全屏的效果
这里说我遇到一个坑.在绘制的div也就是id="commentCanvas" 他的css属性为position:absolute z-index=999 所以会覆盖在视频文件上方导致视频文件进度条无法按 - -于是这里我采用了设置id="commentCanvas"的height=80%来达到效果。当然肯定有更好的解决办法，希望大家能够踊跃讨论下。
<style type="text/css">html,body{width: 100%;height: 100%;overflow: hidden;}body{overflow-y:scroll;}.container{height: 90%;}#abpVideo{width: 100%;height: 100%;overflow: hidden;}.controls{text-align: center;}</style>
设置一些js属性
<script type="text/javascript">window.addEventListener('load', function () { // 在窗体载入完毕后再绑定 function $(id){ return document.getElementById(id); } var CM = new CommentManager($('commentCanvas')); CM.init(); // 先启用弹幕播放（之后可以停止） CM.start(); // 开放 CM 对象到全局这样就可以在 console 终端里操控 window.CM = CM; //创建弹幕列表对象var list={//这些属性都可以在官网文档找到答案 这里就不详细说明了"dur": 10000,"size": 25,"stime": 0,"mode": 1,} $("send").addEventListener("click",function(event){ //text属性为弹幕文字 list.text=$("main").value //color为弹幕颜色同时转化为10进制 list.color=(parseInt(($("chose").value))); //这条就是发送弹幕功能了 CM.send(list); event.stopPropagation(); event.preventDefault(); }) });</script>