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

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

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

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

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>

1. <script type="text/javascript">
2. window.addEventListener(‘load‘, function () {
3. // 在窗体载入完毕后再绑定
4. function $(id){
5. return document.getElementById(id);
6. }
7. var CM = new CommentManager($(‘commentCanvas‘));
8. CM.init();
9. // 先启用弹幕播放（之后可以停止）
10. CM.start();
11. // 开放 CM 对象到全局这样就可以在 console 终端里操控
12. window.CM = CM;
13. //创建弹幕列表对象
14. var list={
15. //这些属性都可以在官网文档找到答案 这里就不详细说明了
16. "dur": 10000,
17. "size": 25,
18. "stime": 0,
19. "mode": 1,
20. }
21.  
22. $("send").addEventListener("click",function(event){
23. //text属性为弹幕文字
24. list.text=$("main").value
25. //color为弹幕颜色同时转化为10进制
26. list.color=(parseInt(($("chose").value)));
27. //这条就是发送弹幕功能了
28. CM.send(list);
30. event.stopPropagation();
31. event.preventDefault();
32. })
34. });
35. </script>

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