ABPlayerHTML5 is a sub project of ABPlayer. By porting the core classes needed for comments in the ABPlayer project to JS, ABPlayerHTML5 attempts to achieve a simple but highly adaptable comment engine embeddable (later) in HTML5.
ABPlayerHTML5 currently can work with color,size,movement and opacity properties concerning comments and by default supports scrolling, top, bottom, reverse and fixed comments. ABPlayerHTML5 uses mainly DHTML and incorporates few HTML5 components (if any) to work, so it has a wider compatability across browsers.
The main line features a player that has a very basic interface and API connection to bilibili.tv
English documentation has yet to be released, though you may use Google Translate or any similar translation service to get insights into inner workings by translating the Chinese text below.
ABPlayerHTML5是一个ABPlayer的子项目。通过把ABPlayer的核心弹幕类重写成JS来实现一个简单但是能高度整合 HTML5的原生弹幕播放控件
目前项目支持弹幕的颜色、大小、轨迹运动和透明度属性,同时默认支持:滚动,顶部,底部,逆向和定位弹幕。 本工程目前仅需要浏览器对动态HTML有所支持(对DOM的操作)所以能取得更高的跨浏览器兼容性。在未来可能会利用 HTML5控件实现Video播放和虑镜效果等。
本项目主线包括一个简单的播放器界面和一个和Bilibili联通的API端口(jslib/mottobilibili.js)。
广义的来说,ABPlayerHTML5由js和css组成。引入ABPlayer功能,需要在HTML页面头引入:
/jslib/libabplayer.js
/jslib/libxml.js
和样式文件
/css/default.css
并按照如下结构制作HTML播放体
<div class="abp" id="abplayerInstance">
<div class="container" id="commentStage"></div>
<div class="videoComponent"><video id="videoHookletName"></video></video></div>
</div>
然后在此结构后,加入如下JS来挂载弹幕装置:
var cm = new CommentManager(document.getElementsById('commentStage'));
cm.init();
CommentLoader("http://你的弹幕信息源",cm);
此后,请让视频对象以播放微秒数(0.001s)反馈给 cm.time(VideoObject.playheadtime)
即可移动弹幕。
进行暂停请 cm.stopTimer()
恢复请cm.startTimer();
,清除运行区弹幕cm.clear();
Copyright (c) 2011 Jim Chen (http://kanoha.org/), under the MIT license.