Display danmaku (flying comments) on HTML5 video.
npm install danmaku
Danmaku is a JavaScript library to display flying comments on HTML media elements (video and audio). It can also display comments to your container in real time without timeline.
``bash`
npm install danmaku
`js`
// Full version
import Danmaku from 'danmaku';
// DOM engine only
import Danmaku from 'danmaku/dist/esm/danmaku.dom.js';
// Canvas engine only
import Danmaku from 'danmaku/dist/esm/danmaku.canvas.js';
`html
`
To display comments in real time, you need to set up server and use something like Socket.IO. Danmaku is just receiving comments data and display them to container.
Here is a simple example using with Socket.IO and Node.js.
Server:
`js`
const app = require('http').createServer(handler);
const io = require('socket.io')(app);
app.listen(80);
function handler(req, res) {
// your handler...
}
io.on('connection', socket => {
socket.on('danmaku', comment => {
socket.broadcast.emit('danmaku', comment);
});
});
Client:
`html
`
`js
var danmaku = new Danmaku({
// REQUIRED. The stage to display comments will be appended to container.
container: document.getElementById('my-container'),
// media can be
// Array of comment, used in media mode,
// you can find its format in danmaku.emit API.
comments: [],
// You can use DOM engine or canvas engine to render comments.
// 'DOM' by default in full version.
engine: 'canvas',
// You can also set speed by using danmaku.speed API.`
speed: 144
});
`js
danmaku.emit({
text: 'example',
// 'rtl'(right to left) by default, available mode: 'ltr', 'rtl', 'top', 'bottom'.
mode: 'rtl',
// Specified in seconds, if not provided when using with media,
// it will be set to media.currentTime. Not required in live mode.
time: 233.3,
// When using DOM engine, Danmaku will create a
directly, just write with CSS rules.
// For example:
style: {
fontSize: '20px',
color: '#ffffff',
border: '1px solid #337ab7',
textShadow: '-1px -1px #000, -1px 1px #000, 1px -1px #000, 1px 1px #000'
}, // When using canvas engine, Danmaku will create a
// A custom render to draw comment.
// when
render exist, text and style will be ignored. // When using DOM engine, you should return an HTMLElement.
render: function() {
var $div = document.createElement('div');
var $img = document.createElement('img');
$img.src = '/path/to/xxx.png';
$div.appendChild($img);
return $div;
},
// When using canvas engine, you should return an HTMLCanvasElement.
render: function() {
var canvas = document.createElement('canvas');
canvas.width = 320;
canvas.height = 180;
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(75, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
return canvas;
}
});
`More details about CanvasRenderingContext2D.
Tips:
* With DOM engine, you may want to change line spacing by set
to each comment, a better way is set line-height to the container.
* With canvas engine, line height is 1.2 by default, you can set it with style.font.
* With canvas engine, style.font uses the same syntax as the CSS font specifier. However you can only use px, %, em, rem units, I'm sure you don't need others.
* There is a hitbox for each comment, which height is determined by its line height. With canvas engine, when style.textBaseline is top or hanging, the baseline is set to top of the hitbox; when it's middle, baseline is middle of the hitbox; otherwise baseline is bottom of the hitbox. So if you set style.textBaseline to alphabetic or hanging, the comment's head or foot may out of the hitbox and be invisible.
* With canvas engine, style.filter is supported in Chrome 52 and Firefox 49.$3
Do it when you resize container.
`js
danmaku.resize();
`$3
js
danmaku.show();
`$3
If you set
to the container directly when using DOM engine, you should also do danmaku.hide() otherwise the typesetting will be broken when it's showed.`js
danmaku.hide();
`$3
Clear current stage.
js
danmaku.clear();
`$3
There is a property
for all comments, which means how long will a comment be shown to the stage. duration is calculated by stage.width / danmaku.speed, and danmaku.speed is a standard for all comments, because the actually speed for each comment is then calculated by (comment.width + stage.width) / duration. The default value is 144.`js
danmaku.speed = 144;
`$3
Destroy
instance and release memory.`js
danmaku.destroy();
``