一个可扩展的弹幕播放器的HTML5实现范例---ABPlayerHTML5

ABPlayerHTML5 是一个简单易懂的现代弹幕魔法播放器。这个项目意在取代基于 Flash 的 ABPlayer，同时也希望能为新一代的HTML5弹幕播放器打造一个实现范例。这个播放器將用相对通俗易懂的方法，实现最基础的弹幕播放器功能，以供开发者参照。

在你的应用中加入ABPlayerHTML5请在 head 元素内引入如下的库。

<link rel="stylesheet" href="http://jabbany.github.io/ABPlayerHTML5/build/css/base.min.css" />
<script src="http://jabbany.github.io/ABPlayerHTML5/build/js/CommentCoreLibrary.min.js"></script>
<script src="http://jabbany.github.io/ABPlayerHTML5/build/js/ABPlayer.min.js"></script>

如果不想引用 GitHub Host的版本，也可以自行把build/文件夹内相关文件拷贝到你自己的项目中。

你可以通过下方代码绑定 ABPlayerHTML5播放器 :

ar inst = ABP.create( document.getElementById('load-player'), {
        'src': document.getElementById('new-video'),
        'width': 800,
        'height': 522
});
(new CommentLoader(inst.cmManager)).setParser(BilibiliParser).load('GET', 'somecommentfile.xml');

对于第一个参数，您应该给予DOM元素或DOM id名。如果你的元素已经是.ABP-Unit，那么调用create将清除任何现有的内部元素，并在现场绑定一个新的播放器。如果指定的元素不是danmaku播放器，我们会在给定元素的末尾追加一个新的danmaku播放器元素。

参数的src字段将指定视频源的位置。如果它是一个DOM元素，我们只是将它作为视频播放器合并，如果它是一个url列表，我们将创建一个带有指定来源的播放器单元。我们也支持播放列表，如下所示：

ABP.create(document.getElementById("load-player"), {
        "src":{
                "playlist":[
                        {
                                "video":document.getElementById("video-1"),
                                "comments":"comment-otsukimi.xml"
                        },
                        {
                                "video":document.getElementById("video-2"),
                                "comments":"comment-science.xml"
                        }
                ]
        },
        "width":800,
        "height":522
});

这将自动移动到下一个视频并加载下一个评论文件。它不会在视频中循环（但是）。与提供一个“视频”：元素属性不同，您还可以提供一个“源”对象，每个键作为mime类型，每个值作为URL。

comment-otsukimi.xml: