mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-17 18:11:20 -08:00
修改弹幕模式变量
This commit is contained in:
Harvey committed
1 parent
31f8f9fe09
commit
a969686d88
6 files changed
+60
-55
No files matched your search
@@ -43,7 +43,7 @@ var art = new Artplayer({
|
||||
art.notice.show = `发送弹幕成功: ${danmuku.remaining} / ${danmuku.limit}`;
|
||||
art.plugins.artplayerPluginDanmuku.emit({
|
||||
...data,
|
||||
mode: 'scroll',
|
||||
mode: 0,
|
||||
time: art.player.currentTime + 0.2,
|
||||
border: data.color,
|
||||
});
|
||||
|
||||
@@ -247,14 +247,14 @@
|
||||
case 1:
|
||||
case 2:
|
||||
case 3:
|
||||
return 'scroll';
|
||||
return 0;
|
||||
|
||||
case 4:
|
||||
case 5:
|
||||
return 'static';
|
||||
return 1;
|
||||
|
||||
default:
|
||||
return null;
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
function bilibiliDanmuParseFromXml(xmlString) {
|
||||
@@ -476,7 +476,7 @@
|
||||
danmu.$lastStartTime = Date.now();
|
||||
|
||||
switch (danmu.mode) {
|
||||
case 'scroll':
|
||||
case 0:
|
||||
danmu.$ref.style.transform = "translateX(".concat(-danmu.$restWidth, "px) translateY(0px) translateZ(0px)");
|
||||
danmu.$ref.style.transition = "transform ".concat(danmu.$restTime, "s linear 0s");
|
||||
break;
|
||||
@@ -491,7 +491,7 @@
|
||||
danmu.$state = 'stop';
|
||||
|
||||
switch (danmu.mode) {
|
||||
case 'scroll':
|
||||
case 0:
|
||||
{
|
||||
var _getRect = getRect($player),
|
||||
playerLeft = _getRect.left,
|
||||
@@ -567,7 +567,7 @@
|
||||
danmu.$state = 'emit';
|
||||
|
||||
switch (danmu.mode) {
|
||||
case 'scroll':
|
||||
case 0:
|
||||
{
|
||||
danmu.$restWidth = danmuLeft + danmuWidth + 5;
|
||||
danmu.$ref.style.left = "".concat(danmuLeft, "px");
|
||||
@@ -577,7 +577,7 @@
|
||||
break;
|
||||
}
|
||||
|
||||
case 'static':
|
||||
case 1:
|
||||
danmu.$ref.style.top = "".concat(danmuTop, "px");
|
||||
danmu.$ref.style.left = '50%';
|
||||
danmu.$ref.style.marginLeft = "-".concat(danmuWidth / 2, "px");
|
||||
@@ -642,7 +642,7 @@
|
||||
}
|
||||
|
||||
this.queue.push(_objectSpread({
|
||||
mode: 'scroll'
|
||||
mode: 0
|
||||
}, danmu, {
|
||||
$state: 'wait',
|
||||
$ref: null,
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"file":"artplayer-plugin-danmuku.js","sources":["../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/defineProperty.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/classCallCheck.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/createClass.js","../../packages/artplayer-plugin-danmuku/src/i18n.js","../../packages/artplayer-plugin-danmuku/src/setting.js","../../packages/artplayer-plugin-danmuku/src/utils.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/arrayWithHoles.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/iterableToArrayLimit.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/nonIterableRest.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/slicedToArray.js","../../packages/artplayer-plugin-danmuku/src/bilibili.js","../../packages/artplayer-plugin-danmuku/src/getDanmuTop.js","../../packages/artplayer-plugin-danmuku/src/danmuku.js","../../packages/artplayer-plugin-danmuku/src/index.js"],"sourcesContent":["function _defineProperty(obj, key, value) {\n if (key in obj) {\n Object.defineProperty(obj, key, {\n value: value,\n enumerable: true,\n configurable: true,\n writable: true\n });\n } else {\n obj[key] = value;\n }\n\n return obj;\n}\n\nmodule.exports = _defineProperty;","function _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n}\n\nmodule.exports = _classCallCheck;","function _defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n Object.defineProperty(target, descriptor.key, descriptor);\n }\n}\n\nfunction _createClass(Constructor, protoProps, staticProps) {\n if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n if (staticProps) _defineProperties(Constructor, staticProps);\n return Constructor;\n}\n\nmodule.exports = _createClass;","export default {\n 'zh-cn': {\n 'Danmu opacity': '弹幕透明度',\n 'Danmu speed': '弹幕速度',\n 'Danmu size': '弹幕大小',\n 'Danmu text cannot be empty': '弹幕文本不能为空',\n 'The length of the danmu does not exceed': '弹幕文本字数不能超过',\n 'Danmu speed synchronous playback multiple': '弹幕速度同步播放倍数',\n },\n 'zh-tw': {\n 'Danmu opacity': '彈幕透明度',\n 'Danmu speed': '彈幕速度',\n 'Danmu size': '弹幕大小',\n 'Danmu text cannot be empty': '彈幕文本不能為空',\n 'The length of the danmu does not exceed': '彈幕文本字數不能超過',\n 'Danmu speed synchronous playback multiple': '彈幕速度同步播放倍數',\n },\n};","export function opacity(art) {\n const {\n i18n,\n events: { proxy },\n } = art;\n\n return {\n name: 'danmuku-opacity',\n index: 10,\n html: `\n <div class=\"art-setting-header\">\n ${i18n.get('Danmu opacity')}: <span class=\"art-value\">100</span>%\n </div>\n <div class=\"art-setting-range\">\n <input type=\"range\" value=\"1\" min=\"0.1\" max=\"1\" step=\"0.1\">\n </div>\n `,\n mounted: $setting => {\n const $range = $setting.querySelector('input[type=range]');\n const $value = $setting.querySelector('.art-value');\n proxy($range, 'change', () => {\n const { value } = $range;\n $value.innerText = Number(value) * 100;\n\n art.plugins.artplayerPluginDanmuku.config({\n opacity: Number(value),\n });\n });\n\n art.on('artplayerPluginDanmuku:config', config => {\n if ($range.value !== config.opacity) {\n $range.value = config.opacity;\n $value.innerText = config.opacity * 100;\n }\n });\n },\n };\n}\n\nexport function size(art) {\n const {\n i18n,\n events: { proxy },\n } = art;\n\n return {\n name: 'danmuku-size',\n index: 11,\n html: `\n <div class=\"art-setting-header\">\n ${i18n.get('Danmu size')}: <span class=\"art-value\">25</span>px\n </div>\n <div class=\"art-setting-range\">\n <input type=\"range\" value=\"25\" min=\"14\" max=\"30\" step=\"1\">\n </div>\n `,\n mounted: $setting => {\n const $range = $setting.querySelector('input[type=range]');\n const $value = $setting.querySelector('.art-value');\n proxy($range, 'change', () => {\n Line truncated
|
||||
{"version":3,"file":"artplayer-plugin-danmuku.js","sources":["../../node_modules/@babel/runtime/helpers/defineProperty.js","../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../packages/artplayer-plugin-danmuku/src/i18n.js","../../packages/artplayer-plugin-danmuku/src/setting.js","../../packages/artplayer-plugin-danmuku/src/utils.js","../../node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../node_modules/@babel/runtime/helpers/nonIterableRest.js","../../node_modules/@babel/runtime/helpers/slicedToArray.js","../../packages/artplayer-plugin-danmuku/src/bilibili.js","../../packages/artplayer-plugin-danmuku/src/getDanmuTop.js","../../packages/artplayer-plugin-danmuku/src/danmuku.js","../../packages/artplayer-plugin-danmuku/src/index.js"],"sourcesContent":["function _defineProperty(obj, key, value) {\n if (key in obj) {\n Object.defineProperty(obj, key, {\n value: value,\n enumerable: true,\n configurable: true,\n writable: true\n });\n } else {\n obj[key] = value;\n }\n\n return obj;\n}\n\nmodule.exports = _defineProperty;","function _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n}\n\nmodule.exports = _classCallCheck;","function _defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n Object.defineProperty(target, descriptor.key, descriptor);\n }\n}\n\nfunction _createClass(Constructor, protoProps, staticProps) {\n if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n if (staticProps) _defineProperties(Constructor, staticProps);\n return Constructor;\n}\n\nmodule.exports = _createClass;","export default {\n 'zh-cn': {\n 'Danmu opacity': '弹幕透明度',\n 'Danmu speed': '弹幕速度',\n 'Danmu size': '弹幕大小',\n 'Danmu text cannot be empty': '弹幕文本不能为空',\n 'The length of the danmu does not exceed': '弹幕文本字数不能超过',\n 'Danmu speed synchronous playback multiple': '弹幕速度同步播放倍数',\n },\n 'zh-tw': {\n 'Danmu opacity': '彈幕透明度',\n 'Danmu speed': '彈幕速度',\n 'Danmu size': '弹幕大小',\n 'Danmu text cannot be empty': '彈幕文本不能為空',\n 'The length of the danmu does not exceed': '彈幕文本字數不能超過',\n 'Danmu speed synchronous playback multiple': '彈幕速度同步播放倍數',\n },\n};","export function opacity(art) {\n const {\n i18n,\n events: { proxy },\n } = art;\n\n return {\n name: 'danmuku-opacity',\n index: 10,\n html: `\n <div class=\"art-setting-header\">\n ${i18n.get('Danmu opacity')}: <span class=\"art-value\">100</span>%\n </div>\n <div class=\"art-setting-range\">\n <input type=\"range\" value=\"1\" min=\"0.1\" max=\"1\" step=\"0.1\">\n </div>\n `,\n mounted: $setting => {\n const $range = $setting.querySelector('input[type=range]');\n const $value = $setting.querySelector('.art-value');\n proxy($range, 'change', () => {\n const { value } = $range;\n $value.innerText = Number(value) * 100;\n\n art.plugins.artplayerPluginDanmuku.config({\n opacity: Number(value),\n });\n });\n\n art.on('artplayerPluginDanmuku:config', config => {\n if ($range.value !== config.opacity) {\n $range.value = config.opacity;\n $value.innerText = config.opacity * 100;\n }\n });\n },\n };\n}\n\nexport function size(art) {\n const {\n i18n,\n events: { proxy },\n } = art;\n\n return {\n name: 'danmuku-size',\n index: 11,\n html: `\n <div class=\"art-setting-header\">\n ${i18n.get('Danmu size')}: <span class=\"art-value\">25</span>px\n </div>\n <div class=\"art-setting-range\">\n <input type=\"range\" value=\"25\" min=\"14\" max=\"30\" step=\"1\">\n </div>\n `,\n mounted: $setting => {\n const $range = $setting.querySelector('input[type=range]');\n const $value = $setting.querySelector('.art-value');\n proxy($range, 'change', () => {\n const { value } = $range;\n $value.innerText = value;\n\n art.plugins.artplayerPluginDanmuku.config({\n fLine truncated
|
||||
@@ -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