mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-29 02:51:20 -08:00
修改弹幕模式变量
This commit is contained in:
1 parent
31f8f9fe09
commit
a969686d88
6 files changed
+60
-55
No files matched your search
@@ -1,4 +1,5 @@
|
||||
# artplayer-plugin-danmuku
|
||||
|
||||
Danmuku plugin for ArtPlayer
|
||||
|
||||
## Demo
|
||||
@@ -37,24 +38,26 @@ Will expose the global variable to `window.artplayerPluginDanmuku`.
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: 'path/to/video.mp4',
|
||||
plugins: [artplayerPluginDanmuku({
|
||||
danmuku: [
|
||||
{
|
||||
text: '666', // Danmu text
|
||||
time: 5, // Video time
|
||||
color: '#fff', // Danmu color
|
||||
border: false, // Danmu border
|
||||
mode: 'scroll', // Danmu mode: scroll or static
|
||||
}
|
||||
], // Can be an array or return the promised function or danmuku xml url
|
||||
speed: 5, // Animation time
|
||||
opacity: 1, // Opacity
|
||||
color: '#fff', // Font color
|
||||
size: 25, // Font size
|
||||
maxlength: 50, // The maximum number of words in the danmu
|
||||
margin: [10, 20], // Margin top and margin bottom
|
||||
synchronousPlayback: false, // Synchronous playback speed
|
||||
})],
|
||||
plugins: [
|
||||
artplayerPluginDanmuku({
|
||||
danmuku: [
|
||||
{
|
||||
text: '666', // Danmu text
|
||||
time: 5, // Video time
|
||||
color: '#fff', // Danmu color
|
||||
border: false, // Danmu border
|
||||
mode: 0, // Danmu mode: 0-scroll or 1-static
|
||||
},
|
||||
], // Can be an array or return the promised function or danmuku xml url
|
||||
speed: 5, // Animation time
|
||||
opacity: 1, // Opacity
|
||||
color: '#fff', // Font color
|
||||
size: 25, // Font size
|
||||
maxlength: 50, // The maximum number of words in the danmu
|
||||
margin: [10, 20], // Margin top and margin bottom
|
||||
synchronousPlayback: false, // Synchronous playback speed
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
// Send danmu
|
||||
@@ -64,7 +67,7 @@ art.plugins.artplayerPluginDanmuku.emit({
|
||||
color: '#fff', // Danmu color
|
||||
size: 25, // Danmu size
|
||||
border: false, // Danmu border
|
||||
mode: 'scroll', // Danmu mode: scroll or static
|
||||
mode: 0, // Danmu mode: 0-scroll or 1-static
|
||||
});
|
||||
|
||||
// Hide danmu
|
||||
|
||||
@@ -3,12 +3,12 @@ export function getMode(key) {
|
||||
case 1:
|
||||
case 2:
|
||||
case 3:
|
||||
return 'scroll';
|
||||
return 0;
|
||||
case 4:
|
||||
case 5:
|
||||
return 'static';
|
||||
return 1;
|
||||
default:
|
||||
return null;
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,22 +17,22 @@ export function bilibiliDanmuParseFromXml(xmlString) {
|
||||
const srtList = xmlString.match(/<d([\S ]*?>[\S ]*?)<\/d>/gi);
|
||||
return srtList.length
|
||||
? srtList.map(item => {
|
||||
const [, attrStr, text] = item.match(/<d p="(.+)">(.+)<\/d>/);
|
||||
const attr = attrStr.split(',');
|
||||
return attr.length === 8 && text.trim()
|
||||
? {
|
||||
text,
|
||||
time: Number(attr[0]),
|
||||
mode: getMode(Number(attr[1])),
|
||||
fontSize: Number(attr[2]),
|
||||
color: `#${Number(attr[3]).toString(16)}`,
|
||||
timestamp: Number(attr[4]),
|
||||
pool: Number(attr[5]),
|
||||
userID: attr[6],
|
||||
rowID: Number(attr[7]),
|
||||
}
|
||||
: null;
|
||||
})
|
||||
const [, attrStr, text] = item.match(/<d p="(.+)">(.+)<\/d>/);
|
||||
const attr = attrStr.split(',');
|
||||
return attr.length === 8 && text.trim()
|
||||
? {
|
||||
text,
|
||||
time: Number(attr[0]),
|
||||
mode: getMode(Number(attr[1])),
|
||||
fontSize: Number(attr[2]),
|
||||
color: `#${Number(attr[3]).toString(16)}`,
|
||||
timestamp: Number(attr[4]),
|
||||
pool: Number(attr[5]),
|
||||
userID: attr[6],
|
||||
rowID: Number(attr[7]),
|
||||
}
|
||||
: null;
|
||||
})
|
||||
: [];
|
||||
}
|
||||
|
||||
@@ -50,8 +50,10 @@ export function bilibiliDanmuParseFromAv(av) {
|
||||
.then(res => res.json())
|
||||
.then(res => {
|
||||
if (res.code === 0 && res.data && res.data.cid) {
|
||||
return bilibiliDanmuParseFromUrl(`${corsUrl}https://api.bilibili.com/x/v1/dm/list.so?oid=${res.data.cid}`);
|
||||
return bilibiliDanmuParseFromUrl(
|
||||
`${corsUrl}https://api.bilibili.com/x/v1/dm/list.so?oid=${res.data.cid}`,
|
||||
);
|
||||
}
|
||||
throw new Error(`Unable to get data: ${JSON.stringify(res)}`);
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -85,7 +85,7 @@ export default class Danmuku {
|
||||
danmu.$state = 'emit';
|
||||
danmu.$lastStartTime = Date.now();
|
||||
switch (danmu.mode) {
|
||||
case 'scroll':
|
||||
case 0:
|
||||
danmu.$ref.style.transform = `translateX(${-danmu.$restWidth}px) translateY(0px) translateZ(0px)`;
|
||||
danmu.$ref.style.transition = `transform ${danmu.$restTime}s linear 0s`;
|
||||
break;
|
||||
@@ -100,7 +100,7 @@ export default class Danmuku {
|
||||
filter(this.queue, 'emit', danmu => {
|
||||
danmu.$state = 'stop';
|
||||
switch (danmu.mode) {
|
||||
case 'scroll': {
|
||||
case 0: {
|
||||
const { left: playerLeft, width: playerWidth } = getRect($player);
|
||||
const { left: danmuLeft } = getRect(danmu.$ref);
|
||||
const translateX = playerWidth - (danmuLeft - playerLeft) + 5;
|
||||
@@ -174,7 +174,7 @@ export default class Danmuku {
|
||||
const danmuTop = getDanmuTop(this, danmu);
|
||||
danmu.$state = 'emit';
|
||||
switch (danmu.mode) {
|
||||
case 'scroll': {
|
||||
case 0: {
|
||||
danmu.$restWidth = danmuLeft + danmuWidth + 5;
|
||||
danmu.$ref.style.left = `${danmuLeft}px`;
|
||||
danmu.$ref.style.top = `${danmuTop}px`;
|
||||
@@ -182,7 +182,7 @@ export default class Danmuku {
|
||||
danmu.$ref.style.transition = `transform ${danmu.$restTime}s linear 0s`;
|
||||
break;
|
||||
}
|
||||
case 'static':
|
||||
case 1:
|
||||
danmu.$ref.style.top = `${danmuTop}px`;
|
||||
danmu.$ref.style.left = '50%';
|
||||
danmu.$ref.style.marginLeft = `-${danmuWidth / 2}px`;
|
||||
@@ -240,7 +240,7 @@ export default class Danmuku {
|
||||
}
|
||||
|
||||
this.queue.push({
|
||||
mode: 'scroll',
|
||||
mode: 0,
|
||||
...danmu,
|
||||
$state: 'wait',
|
||||
$ref: null,
|
||||
|
||||
Reference in new issue
Block a user