基於CommentCoreLibrary簡單的彈幕實現

本文地址：http://www.cnblogs.com/liaoyu/p/ccl-demo.html

實現基於開源的 CommentCoreLibrary

最近有需求要實現一個簡單的評論彈幕實現，通過簡單的對 CommentCoreLibrary 的修改，達到下面的效果： 示例地址

html結構

<div class="feng-ccl-panel">
    <div class="abp" id="feng-player">
        <div id="commentCanvas" class="container"></div>
    </div>
</div>

再引入CommentCoreLibrary.js和style.css

js實現

在dom加載完成后， 開始初始化ccl

document.addEventListener('DOMContentLoaded', function(){
    var CM = new CommentManager(document.getElementById('commentCanvas'));
    CM.init();
  
    // 啟動播放彈幕（在未啟動狀態下彈幕不會移動）
    CM.start();

    // 開放 CM 對象到全局這樣就可以在 console 終端里操控
    window.CM = CM;

    // 彈幕播放
    cmtController();
} ,false);

再數據加載完成后，發送彈幕即可

function getCmtDataList() {
    var cmtArr = [];

    // 可以使用jsonp獲取服務器的字幕數據
    /*$.ajax({
        type : 'GET',
        url : 'http://192.168.9.67/test.php',
        dataType : 'jsonp',
        data : {sid : 100},
        success : function(data) {
            cmtArr = data.dataList;

            if (cmtArr && cmtArr.length > 0) {
                sendMsg(cmtArr);
            }
        }
    });*/

    // 測試數據
    cmtArr = [
        {"text":"大家期待什么新品啊", "bgColor":"#424448", "icon":"http://face.weiphone.net/data/avatar/000/15/31/95_avatar_big.jpg"},
        {"text":"會有什么驚喜嗎？", "bgColor":"#424448", "icon":"http://face.weiphone.net/data/avatar/000/15/31/95_avatar_big.jpg"},
        {"text":"等待中。。", "bgColor":"#23b28b", "icon":"http://face.weiphone.net/data/avatar/000/15/31/95_avatar_big.jpg"},
        {"text":"會有什么新產品呢？", "bgColor":"#424448", "icon":"http://face.weiphone.net/data/avatar/000/15/31/95_avatar_big.jpg"},
        {"text":"定時執行", "bgColor":"#23b28b", "icon":"http://face.weiphone.net/data/avatar/000/15/31/95_avatar_big.jpg"},
        {"text":"1123333446紅咖喱的非農房價", "bgColor":"#ec4262", "icon":"http://face.weiphone.net/data/avatar/000/15/31/95_avatar_big.jpg"},
        {"text":"測試接口發評論00", "bgColor":"#ec4262", "icon":"http://face.weiphone.net/data/avatar/000/15/31/95_avatar_big.jpg"},
        {"text":"測試接口發評論00", "bgColor":"#3dbbc0", "icon":"http://face.weiphone.net/data/avatar/000/15/31/95_avatar_big.jpg"},
        {"text":"啊啊啊啊啊啊啊哦哦哦誒IEIE恩家報表出具", "bgColor":"#ec4262", "icon":"http://face.weiphone.net/data/avatar/000/15/31/95_avatar_big.jpg"},
        {"text":"的方式的方法反反復復反復反復", "bgColor":"#23b28b", "icon":"http://face.weiphone.net/data/avatar/000/15/31/95_avatar_big.jpg"}
    ]

    sendMsg(cmtArr);
}


function sendMsg(cmtArr) {

    for (var i=0; i<cmtArr.length; i++) {
        var cmtItem = cmtArr[i],
            iconStr = '';

        if (cmtItem.icon && cmtItem.icon.length > 0) {
            iconStr = '<span class="icon"><img src="'+ cmtItem.icon +'"></span>';
        }

        // 字幕的節點內容
        cmtItem.text = iconStr + cmtItem.text;
        cmtItem.mode = 1;
        cmtItem.dur = Math.floor(Math.random()*4000 + 4000);

        CM.send(cmtItem);
    }
}

function cmtController() {
    getCmtDataList();

    setTimeout(function(){
        cmtController();
    }, 5000);
}