3.6.3 zwplayer弹幕使用说明
弹幕已经成为当前视频网站的一项标配功能，弹幕是将文字覆盖在视频播放窗口上层表面，观众通过弹幕可以实现互动交互。zwplayer对弹幕提供了完善支持。
zwplayer对弹幕支持得操作原理是：一个播放终端传送一串弹幕字符串给弹幕服务器，弹幕服务器再转发给各个弹幕接收终端，接收终端收到弹幕，调用zwplayer播放器提供的相关方法将弹幕追加到内部弹幕列表，然后再完成渲染过程。zwplayer对弹幕的支持实现了弹幕渲染与弹幕的发送设置UI，但没有实现弹幕的发送，弹幕的发送应该由开发这自己采用相应传输技术实现（例如自己调用websocket、各种云服务厂商得消息（IM）接口），这样设计，可以避免zwplayer绑死转发服务器，方便使用者自由选择弹幕发送技术架构。
调用zwplayer的弹幕功能需要实现下面两个方面：
- 提供一个用户自定义函数，将
zwplayer内部弹幕控制条输入的弹幕发送出去； - 如果收到服务器转发过来的弹幕，通过
appendDanmu方法将弹幕追加到zwplayer弹幕列表来显示弹幕；
一个zwplayer采用websocket技术收发显示弹幕的示例如下：
<body onload="onload()">
<div class="vxplayer" id="player-holder"></div>
<div class="vxplayer-toolbar danmubar" id="dammu-controlbar"></div>
</body>
<script language=”javascript”>
window.mainplayer = new ZWPlayer({ //将对象保存到mainplayer用于追加弹幕
url:url,
playerElm:'#player-holder', //player 元素ID ,也可以直接的DOM对象
isLive: true,
controlbar: true,
enableDanmu: true,
sendDanmu: function(text) { //提供一个自定义函数，将内部弹幕UI输入的弹幕发送出去
if (typeof window.ws_send === 'function') {
window.ws_send(text);
}
}
});
//在ID为dammu-controlbar的DIV元素里创建zwplayer内部的弹幕输入UI
window.mainplayer.buildDanmuControlbar('dammu-controlbar');
//创建一个websocket用于收发弹幕
var wsChat = new WebSocket('ws://192.168.1.200:3680');
wsChat.onopen = function() {
console.log('ws client opened')
}
wsChat.onmessage = function(event) {
if (event.data.length > 0) {
var danmuObj = JSON.parse(event.data);
if (window.mainplayer) {
//收到服务器转发过来的弹幕，将弹幕追加到zwplayer弹幕列表
window.mainplayer.appendDanmu(danmuObj);
}
}
}
//采用websocket实现的发送函数用于发送弹幕到服务器
window.ws_send = function wsChatSend(data) {
wsChat.send(data);
}
<script>
以上代码实现了一个通过websocket技术收发弹幕的例子，首先在创建zwplayer播放器实例时提供了sendDanmu参数，该参数指向一个用户定义的函数，该自定义函数内部调用了websocket对象发送弹幕数据；接着在创建websocket对象时，通过websocket的onmessage事件监听服务器端转发过来的弹幕消息，该消息实际上是一个编码的json，通过json解码后调用zwplayer的appendDanmu方法将弹幕追加到播放器内部列表来渲染弹幕。
注意：zwplayer并没有提供任何弹幕转发服务器的实现，开发者自己应该实现弹幕转发服务器或者采用第三方的弹幕转发服务器。弹幕转发服务器需要实现房间管理，并发转发支持，因此开发者如果自己非常熟悉websocket技术，完全可以自己实现，如果觉得实现麻烦，可以采用第三方的IM框架来传送弹幕。
zwplayer内建得弹幕输入UI的用途是用于输入弹幕、表情、设置弹幕与开关弹幕，虽然开发者完全可以自己实现这个UI，但考虑到开发者自己实现一个弹幕输入UI并非易事，因此zwplayer暴露了buildDanmuControlbar函数用于创建弹幕输入UI，重用这个UI可以节约重新“造轮子”的时间，强烈推荐使用。
下图红色方框的内容为zwplayer内建的弹幕输入UI的外观。
appendDanmu 方法的说明
appendDanmu 方法的原型为：
function appendDanmu(danmuObj, setting)
该方法接收两个参数，分别说明如下：
danmuObj 为弹幕对象，为一个js对象，该对象包含的可用属性如下：
| 属性名称 | 类型 | |
|---|---|---|
| text | 弹幕的文本，必须输入 | |
| color | 弹幕字体颜色，可以缺省 | |
| border | 弹幕文字边框颜色，风格，类似于css，例如：1px solid #666 | |
| outlineColor | 弹幕外围边框颜色，如果不提供，则弹幕没有边框 |
setting 为当前单条弹幕的设置，虽然danmuObj 参数可以对弹幕进行简单的风格设置，但此参数可以对单条弹幕进行更多设置，此参数可以缺省，如果缺省，则用播放器内部的当前弹幕设置。setting参数为一个js对象，该对象的相关属性说明如下：
| 属性名称 | 类型 | |
|---|---|---|
| forcedFontSizeValue | 强制字体尺寸， 100为基准字体，即默认字体尺寸，大于100，则字体扩大，否则字体缩小。 | |
| isFilterColorFont | 是否过滤颜色字体，如果为true，则不采用danmuObj的color | |
| opacityValue | 弹幕的可见度，为 0~100之间的数值，100为全可见，0为透明不可见。 | |
| speedValue | 弹幕文字的滚动速度，100像素的倍数值，如果为1则，每秒滚动100像素，如果为0.5，则每秒滚动50像素 | |
| isFilterImage | 弹幕是否过滤表情图片，如果为true，则过滤，则弹幕内部的表情图片将不显示 |