# 视频弹幕

提示

MuiPlayer 并未开发自有的弹幕功能,但是你依然可以集成三方的弹幕插件到播放器,从 Github 中能检索到很多开源且优秀的 视频弹幕项目 (opens new window)

CommentCoreLibrary (opens new window) 开源构件提供了很多强大的弹幕功能,可配置 API 也较为完善。如下方的播放示例已经完成应用了该构件,从 这里 (opens new window)学习我们是如何将 CCL 应用到 MuiPlayer 的,以便于轻松的应用到自己的项目中。

# 使用 CommentCoreLibrary

1、在 html 文件头引入 ccl:

<!-- 引入 ccl 样式文件 -->
<link rel="stylesheet" type="text/css" href="css/CommentCoreLibrary.min.css"/>
<!-- 引入 ccl 脚本文件 -->
<script type="text/javascript" src="js/CommentCoreLibrary.min.js"></script>

2、在相应需要弹幕的位置,放置如下 html dom 结构:

<!-- 注意:为弹幕容器添加类名:container,以及父级容器添加类名:abp -->
<div id="mui-player" class="abp" ref="muiPlayer" style="position: relative;">
	<div id="comment-stage" class='container' style="z-index: 1 !important;height: 325px;width: 100%;"></div>
</div>

3、初始化 ccl 实例:

var CM = new CommentManager(document.getElementById('comment-stage'));
CM.init(); // 初始化弹幕管理器


var danmakuData = [
    {"mode":1,"text":"请画出受力分析(10分)","stime":200,"size":25,"dur":7000,"color":0xffffff},
	{"mode":5,"text":"这风景太漂亮了吧~","stime":1000,"size":25,"dur":4000,"color":0xFF0000},
	{"mode":5,"text":"前方高能,建议反复观看!!","stime":1500,"size":25,"dur":4000,"color":0xFFFF00},
]
CM.load(danmakuList); // 载入弹幕列表,

// 启动播放弹幕(在未启动状态下弹幕不会移动)
CM.start();

// 停止播放(停止弹幕移动)
CM.stop();

// 更新时间轴时间
CM.time(500);
CM.time(1000);

TIP: 具体使用请从 这里 (opens new window) 查看实际应用的代码,例如如何设置弹幕文字的样式、位置、存留时间等。这里查阅 CCL API (opens new window) 文档