弹幕设置

1. 弹幕功能概述

弹幕是现代视频网站的核心交互功能，它通过在视频画面上叠加滚动文字，实现观众之间的实时互动。zwplayer 播放器提供了完整的弹幕支持解决方案。

2. 技术架构设计

zwplayer对弹幕支持得操作原理是：一个播放终端传送一串弹幕字符串给弹幕服务器，弹幕服务器再转发给各个弹幕接收终端，接收终端收到弹幕，调用zwplayer播放器提供的相关方法将弹幕追加到内部弹幕列表，然后再完成渲染过程。

zwplayer对弹幕的支持实现了弹幕渲染与弹幕的发送设置UI，但没有实现弹幕的发送，弹幕的发送由开发这自己采用相应传输技术实现（例如自己调用websocket、各种云服务厂商得消息（IM）接口），这样设计，可以避免zwplayer绑死转发服务器，方便使用者自由选择弹幕发送技术架构。

为便于开发者快速搭建起弹幕功能，我们也实现了一个弹幕服务器模块，详情请参见弹幕服务器说明

3. 核心实现步骤

3.1 弹幕发送功能

提供自定义函数处理弹幕发送：

sendDanmu: function(text) {
    // 实现弹幕发送逻辑
    if (typeof window.ws_send === 'function') {
        window.ws_send(text);
    }
}

3.2 弹幕接收显示

收到服务器弹幕时，调用播放器API显示：

// 收到弹幕数据后
window.mainplayer.appendDanmu(danmuObj);

4. 完整示例（WebSocket实现）

<body>
<div id="player-holder"></div>
<div id="dammu-controlbar"></div>
</body>
<script language=”javascript”>
    window.mainplayer = new ZWPlayer({ //将对象保存到mainplayer用于追加弹幕
    url:'http://example.com/vod/test.mp4',
    playerElm:'#player-holder', //player 元素ID ,也可以直接的DOM对象
    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.64: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方法将弹幕追加到播放器内部列表来渲染弹幕。

5. 内置弹幕控制UI

zwplayer 提供了功能完整的弹幕输入界面，包含：

弹幕文字输入
表情选择
弹幕设置
弹幕开关控制

zwplayer内建的弹幕输入UI的用途是用于输入弹幕、表情、设置弹幕与开关弹幕，虽然开发者完全可以自己实现这个UI，但考虑到开发者自己实现一个弹幕输入UI并非易事，因此zwplayer暴露了buildDanmuControlbar函数用于创建弹幕输入UI，重用这个UI可以节约重新“造轮子”的时间，推荐使用。

该弹幕控制UI可以绑定到一个与播放器分离的DIV上，全屏播放时会自动贴在播放器下方，方便用户输入。

弹幕UI界面如下：

弹幕UI界面

点击红框所示的设置，弹出以下设置面板

弹幕设置

6. appendDanmu 方法

函数原型：function appendDanmu(danmuObj, setting)

6.1 danmuObj 参数（弹幕对象）

属性名称	类型	说明
text	string	必填，弹幕文本内容
color	string	可选，字体颜色设置
border	string	可选，文字边框样式,类似于css（如："1px solid #666"）
outlineColor	string	可选，外围边框颜色，不设置则无边框

6.2 setting 参数（弹幕设置）

setting 为当前单条弹幕的设置，虽然danmuObj 参数可以对弹幕进行简单的风格设置，但此参数可以对单条弹幕进行更多设置，此参数可以缺省，如果缺省，则用播放器内部的当前弹幕设置。setting参数为一个js对象，该对象的相关属性说明如下：

属性名称	类型	说明
forcedFontSizeValue	number	强制字体尺寸， 100为基准字体，即默认字体尺寸，大于100，则字体扩大，否则字体缩小。
isFilterColorFont	boolean	是否过滤颜色字体，如果为true，则不采用danmuObj的color
opacityValue	number	透明度（0-100）100为全可见，0为透明不可见。
speedValue	number	弹幕文字的滚动速度，100像素的倍数值，如果为1则，每秒滚动100像素，如果为0.5，则每秒滚动50像素
isFilterImage	boolean	弹幕是否过滤表情图片，如果为true，则过滤，则弹幕内部的表情图片将不显示

目录导航