一个可扩展的弹幕播放器的HTML5实现范例
Project maintained by / 维护者: jabbany Theme Author / 介绍页面主题作者: mattgrahamABPlayerHTML5 is a simplistic modern danmaku video player. It is intended as a replacement for the Flash based ABPlayer and as a catalyst for the new generation of HTML5 danmaku video players. This project implements a sleek minimal video player that serves as a reference implementation.
ABPlayerHTML5 是一个简单易懂的现代弹幕魔法播放器。这个项目意在取代基于 Flash 的 ABPlayer，同时也希望能为新一代的HTML5弹幕播放器打造一个实现范例。这个播放器將用相对通俗易懂的方法，实现最基础的弹幕播放器功能，以供开发者参照。
Load ABPlayerHTML5 / 载入 ABPlayerHTML5
To load the ABPlayer code in your web application insert the following lines of code in the <head> area. 在你的应用中加入ABPlayerHTML5请在 head 元素内引入如下的库。
<link rel="stylesheet" href="https://jabbany.github.io/ABPlayerHTML5/dist/css/base.min.css" />
<script src="https://jabbany.github.io/ABPlayerHTML5/dist/vendor/CommentCoreLibrary.min.js"></script>
<script src="https://jabbany.github.io/ABPlayerHTML5/dist/ABPlayerHTML5.min.js"></script>
Or copy the corresponding files from build/ into your own project. 如果不想引用 GitHub Host的版本，也可以自行把build/文件夹内相关文件拷贝到你自己的项目中。
Then to hook bindings you can use / 你可以通过下方代码绑定 ABPlayerHTML5播放器 :
var 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');For ther first parameter you should give a DOM element or a DOM id name. If your element is already an .ABP-Unit, invoking create will clear any existing inner elements and bind a new player on the spot. If the element specified is not a danmaku player, we will append a new danmaku player element to the end of the given element.
The src field for the parameters will specify where the video source is. If it's a DOM element we just incorporate it as the video player, if it is a list of URLs we will create a player unit with the sources specified. We also support playlists as demonstrated here by using the following code:
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
});This will automatically move to the next video and load the next comment file. It does not cycle through videos (yet). Also instead of providing a "video":Element property, you can also provide a "sources" object with each key as the mime type and each value as the URL.
The basic player does not provide any comment sending abilities. To send comments you should hook onto the inst.txtText text input and capture keypresses to send comments.
播放器本体比较弱，同时也不提供发送弹幕的服务。希望发送弹幕的话，请挂载一个监听器到 inst.txtText 元素上来监听键盘动作。
For more detailed information about the API please look in docs/ / 请阅读docs/中的相应文档来获取API 的更详细信息。
ABPlayerHTML5 can be added onto any existing HTML5 library. It is just a special DIV :) ABPlayerHTML5播放器非常的灵活，可以和几乎任何现有的HTML5库一起并用，因为毕竟我们封装在div里面。下面就是几个参考的样例：
Coverflow + Danmaku Demo : Uses coverflow for jQuery + ABPlayerHTML5 Dynamic loading.
Periodical Table of Videos : Uses three.js css3d renderer. Yes, three.js.
Copyright (c) 2019 Jim Chen (https://kanoha.org/), under the MIT license.