x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-10 21:06:15 -08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Harvey authored and Harvey Zack committed 2022-02-11 11:20:54 +08:00
1 parent b80a30bcc0
commit 5e9057f060
12 files changed
+98 -285
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/assets/example/danmuku.js
-3
View File
@@ -2,9 +2,6 @@ var art = new Artplayer({
container: '.artplayer-app',
url: 'https://artplayer.org/assets/sample/video.mp4',
autoSize: true,
setting: true,
playbackRate: true,
fullscreenWeb: true,
plugins: [
artplayerPluginDanmuku({
danmuku: '/assets/sample/danmuku.xml',
docs/assets/ts/artplayer.d.ts
Vendored
+36 -4
View File
@@ -70,6 +70,33 @@ type ComponentOption = {
onSelect?(selector: Selector, element: HTMLElement): void;
};
type SettingOption = {
/**
* Html string or html element of setting name
*/
html: string | HTMLElement;
/**
* Html string or html element of setting icon
*/
icon?: string | HTMLElement;
/**
* The width of setting
*/
width?: number;
/**
* Whether the default is selected
*/
current?: boolean;
/**
* Html string or html element of component
*/
children?: SettingOption[];
};
type Component = {
/**
* Component self-increasing id
@@ -320,7 +347,7 @@ type Option = {
/**
* Custom setting list
*/
settings?: ComponentOption[];
settings?: SettingOption[];
/**
* Custom video quality list
@@ -416,7 +443,6 @@ type Option = {
type AspectRatio = 'default' | '4:3' | '16:9' | void;
type PlaybackRate = 0.5 | 0.75 | 1.0 | 1.25 | 1.5 | 1.75 | 2.0 | void;
type Rotate = -270 | -180 | -90 | 0 | 90 | 180 | 270 | void;
type Flip = 'normal' | 'horizontal' | 'vertical' | void;
declare class Player {
@@ -424,8 +450,6 @@ declare class Player {
set aspectRatio(ratio: AspectRatio);
get playbackRate(): PlaybackRate;
set playbackRate(rate: PlaybackRate);
get rotate(): Rotate;
set rotate(deg: Rotate);
get autoSize(): boolean;
set autoSize(state: boolean);
get autoHeight(): boolean;
@@ -474,6 +498,8 @@ declare class Player {
set title(title: string);
get theme(): string;
set theme(theme: string);
get subtitleOffset(): number;
set subtitleOffset(time: number);
pause(): any;
play(): any;
toggle(): any;
@@ -595,6 +621,7 @@ declare class Artplayer extends Player {
readonly state: HTMLElement;
readonly play: HTMLElement;
readonly pause: HTMLElement;
readonly check: HTMLElement;
readonly volume: HTMLElement;
readonly volumeClose: HTMLElement;
readonly subtitle: HTMLElement;
@@ -604,6 +631,11 @@ declare class Artplayer extends Player {
readonly fullscreenWeb: HTMLElement;
readonly pip: HTMLElement;
readonly indicator: HTMLElement;
readonly arrowLeft: HTMLElement;
readonly arrowRight: HTMLElement;
readonly playbackRate: HTMLElement;
readonly aspectRatio: HTMLElement;
readonly config: HTMLElement;
};
readonly hotkey: {
docs/uncompiled/artplayer-plugin-danmuku.js
-105
View File
@@ -60,107 +60,6 @@
}
};
function opacity(art) {
var i18n = art.i18n,
proxy = art.events.proxy;
return {
name: 'danmuku-opacity',
index: 10,
html: "\n <div class=\"art-setting-header\">\n ".concat(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 "),
mounted: function mounted($setting) {
var $range = $setting.querySelector('input[type=range]');
var $value = $setting.querySelector('.art-value');
proxy($range, 'change', function () {
var value = $range.value;
$value.innerText = Number(value) * 100;
art.plugins.artplayerPluginDanmuku.config({
opacity: Number(value)
});
});
art.on('artplayerPluginDanmuku:config', function (config) {
if ($range.value !== config.opacity) {
$range.value = config.opacity;
$value.innerText = config.opacity * 100;
}
});
}
};
}
function size(art) {
var i18n = art.i18n,
proxy = art.events.proxy;
return {
name: 'danmuku-size',
index: 11,
html: "\n <div class=\"art-setting-header\">\n ".concat(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 "),
mounted: function mounted($setting) {
var $range = $setting.querySelector('input[type=range]');
var $value = $setting.querySelector('.art-value');
proxy($range, 'change', function () {
var value = $range.value;
$value.innerText = value;
art.plugins.artplayerPluginDanmuku.config({
fontSize: Number(value)
});
});
art.on('artplayerPluginDanmuku:config', function (config) {
if ($range.value !== config.fontSize) {
$range.value = config.fontSize;
$value.innerText = config.fontSize;
}
});
}
};
}
function speed(art) {
var i18n = art.i18n,
proxy = art.events.proxy;
return {
name: 'danmuku-speed',
index: 12,
html: "\n <div class=\"art-setting-header\">\n ".concat(i18n.get('Danmu speed'), ": <span class=\"art-value\">5</span>s\n </div>\n <div class=\"art-setting-range\">\n <input type=\"range\" value=\"5\" min=\"1\" max=\"10\" step=\"1\">\n </div>\n "),
mounted: function mounted($setting) {
var $range = $setting.querySelector('input[type=range]');
var $value = $setting.querySelector('.art-value');
proxy($range, 'change', function () {
var value = $range.value;
$value.innerText = value;
art.plugins.artplayerPluginDanmuku.config({
speed: Number(value)
});
});
art.on('artplayerPluginDanmuku:config', function (config) {
if ($range.value !== config.speed) {
$range.value = config.speed;
$value.innerText = config.speed;
}
});
}
};
}
function synchronousPlayback(art) {
var i18n = art.i18n,
proxy = art.events.proxy;
return {
name: 'danmuku-synchronousPlayback',
index: 13,
html: "\n <label class=\"art-setting-checkbox\">\n <input type=\"checkbox\"/>".concat(i18n.get('Danmu speed synchronous playback multiple'), "\n </label>\n "),
mounted: function mounted($setting) {
var $checkbox = $setting.querySelector('input[type=checkbox]');
proxy($checkbox, 'change', function () {
art.plugins.artplayerPluginDanmuku.config({
synchronousPlayback: $checkbox.checked
});
});
art.on('artplayerPluginDanmuku:config', function (config) {
if ($checkbox.checked !== config.synchronousPlayback) {
$checkbox.checked = config.synchronousPlayback;
}
});
}
};
}
function filter(queue, state, callback) {
return queue.filter(function (danmu) {
return danmu.$state === state;
@@ -419,10 +318,6 @@
_classCallCheck(this, Danmuku);
art.i18n.update(i18n);
art.setting.add(opacity);
art.setting.add(size);
art.setting.add(speed);
art.setting.add(synchronousPlayback);
this.art = art;
this.queue = [];
this.option = {};
docs/uncompiled/artplayer-plugin-danmuku.js.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"file":"artplayer-plugin-danmuku.js","sources":["../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/defineProperty.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/classCallCheck.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/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.16.3@@babel/runtime/helpers/esm/arrayWithHoles.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/iterableToArrayLimit.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/nonIterableRest.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/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":["export default 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}","export default function _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n}","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\nexport default function _createClass(Constructor, protoProps, staticProps) {\n if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n if (staticProps) _defineProperties(Constructor, staticProps);\n return Constructor;\n}","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.Line truncated
{"version":3,"file":"artplayer-plugin-danmuku.js","sources":["../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/defineProperty.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/classCallCheck.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/createClass.js","../../packages/artplayer-plugin-danmuku/src/i18n.js","../../packages/artplayer-plugin-danmuku/src/utils.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayWithHoles.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/iterableToArrayLimit.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/nonIterableRest.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/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":["export default 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}","export default function _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n}","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\nexport default function _createClass(Constructor, protoProps, staticProps) {\n if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n if (staticProps) _defineProperties(Constructor, staticProps);\n return Constructor;\n}","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 filter(queue, state, callback) {\n return queue.filter(danmu => danmu.$state === state).map(callback);\n}\n\nexport function getRect(ref, key) {\n const result = ref.getBoundingClientRect();\n return key ? result[key] : result;\n}\n\nexport function getDanmuRef(queue) {\n const result = queue.find(danmu => {\n return danmu.$ref && danmu.$state === 'wait';\n });\n\n if (result) {\n const { $ref } = result;\n result.$ref = null;\n return $ref;\n }\n\n const $ref = document.createElement('div');\n $ref.style.cssText = `\n user-select: none;\n position: absolute;\n white-space: pre;\n pointer-events: none;\n perspective: 500px;\n display: inline-block;\n will-change: transform;\n font-family: SimHei, \"Microsoft JhengHei\", Arial, Helvetica, sans-serif;\n font-weight: normal;\n line-height: 1.125;\n text-shadow: rgb(0, 0, 0) 1px 0px 1px, rgb(0, 0, 0) 0px 1px 1px, rgb(0, 0, 0) 0px -1px 1px, rgb(0, 0, 0) -1px 0px 1px;\n `;\n\n return $ref;\n}","export default function _arrayWithHoles(arr) {\n if (Array.isArray(arr)) return arr;\n}","export default function _iterableToArrayLimit(arr, i) {\n var _i = arr == null ? null : typeof Symbol !== \"undefined\" && arr[Symbol.iterator] || arr[\"@@iterator\"];\n\n if (_i == null) return;\n var _arr = [];\n var _n = true;\n var _d = false;\n\n var _s, _e;\n\n try {\n for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {\n _arr.push(_s.value);\n\n if (i && _arr.length === i) break;\n }\n } catch (err) {\n _d = true;\n _e = err;\n } finally {\n try {\n if (!_n && _i[\"return\"] != null) _i[\"return\"]();\n } finally {\n if (_d) throw _e;\n }\n }\n\n return _arr;\n}","export default function _arrayLikeToArray(arr, Line truncated
docs/uncompiled/artplayer.js
+14 -10
View File
@@ -917,7 +917,7 @@
}], [{
key: "html",
get: function get() {
return "\n <div class=\"art-video-player art-subtitle-show art-layer-show\">\n <video class=\"art-video\"></video>\n <div class=\"art-poster\"></div>\n <div class=\"art-subtitle\"></div>\n <div class=\"art-danmuku\"></div>\n <div class=\"art-layers\"></div>\n <div class=\"art-mask\">\n <div class=\"art-state\"></div>\n </div>\n <div class=\"art-bottom\">\n <div class=\"art-progress\"></div>\n <div class=\"art-controls\">\n <div class=\"art-controls-left\"></div>\n <div class=\"art-controls-right\"></div>\n </div>\n </div>\n <div class=\"art-loading\"></div>\n <div class=\"art-notice\">\n <div class=\"art-notice-inner\"></div>\n </div>\n <div class=\"art-settings\"></div>\n <div class=\"art-info\">\n <div class=\"art-info-panel\">\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Player version:</div>\n <div class=\"art-info-content\">4.2.7</div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video url:</div>\n <div class=\"art-info-content\" data-video=\"src\"></div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video volume:</div>\n <div class=\"art-info-content\" data-video=\"volume\"></div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video time:</div>\n <div class=\"art-info-content\" data-video=\"currentTime\"></div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video duration:</div>\n <div class=\"art-info-content\" data-video=\"duration\"></div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video resolution:</div>\n <div class=\"art-info-content\">\n <span data-video=\"videoWidth\"></span> x <span data-video=\"videoHeight\"></span>\n </div>\n </div>\n </div>\n <div class=\"art-info-close\">[x]</div>\n </div>\n <div class=\"art-mini-header\">\n <div class=\"art-mini-title\"></div>\n <div class=\"art-mini-close\">\xD7</div>\n </div>\n <div class=\"art-contextmenus\"></div>\n </div>\n ";
return "\n <div class=\"art-video-player art-subtitle-show art-layer-show\">\n <video class=\"art-video\"></video>\n <div class=\"art-poster\"></div>\n <div class=\"art-subtitle\"></div>\n <div class=\"art-danmuku\"></div>\n <div class=\"art-layers\"></div>\n <div class=\"art-mask\">\n <div class=\"art-state\"></div>\n </div>\n <div class=\"art-bottom\">\n <div class=\"art-progress\"></div>\n <div class=\"art-controls\">\n <div class=\"art-controls-left\"></div>\n <div class=\"art-controls-right\"></div>\n </div>\n </div>\n <div class=\"art-loading\"></div>\n <div class=\"art-notice\">\n <div class=\"art-notice-inner\"></div>\n </div>\n <div class=\"art-settings\"></div>\n <div class=\"art-info\">\n <div class=\"art-info-panel\">\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Player version:</div>\n <div class=\"art-info-content\">4.3.0</div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video url:</div>\n <div class=\"art-info-content\" data-video=\"src\"></div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video volume:</div>\n <div class=\"art-info-content\" data-video=\"volume\"></div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video time:</div>\n <div class=\"art-info-content\" data-video=\"currentTime\"></div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video duration:</div>\n <div class=\"art-info-content\" data-video=\"duration\"></div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video resolution:</div>\n <div class=\"art-info-content\">\n <span data-video=\"videoWidth\"></span> x <span data-video=\"videoHeight\"></span>\n </div>\n </div>\n </div>\n <div class=\"art-info-close\">[x]</div>\n </div>\n <div class=\"art-mini-header\">\n <div class=\"art-mini-title\"></div>\n <div class=\"art-mini-close\">\xD7</div>\n </div>\n <div class=\"art-contextmenus\"></div>\n </div>\n ";
}
}]);
@@ -2176,15 +2176,19 @@
var notice = art.notice,
template = art.template,
i18n = art.i18n;
var offsetCache = 0;
var cuesCache = [];
art.on('subtitle:switch', function () {
cuesCache = [];
});
def(art, 'subtitleOffset', {
get: function get() {
return offsetCache;
},
set: function set(value) {
if (template.$track && template.$track.track) {
var cues = Array.from(template.$track.track.cues);
var time = clamp(value, -5, 5);
offsetCache = clamp(value, -5, 5);
for (var index = 0; index < cues.length; index++) {
var cue = cues[index];
@@ -2196,8 +2200,8 @@
};
}
cue.startTime = clamp(cuesCache[index].startTime + time, 0, art.duration);
cue.endTime = clamp(cuesCache[index].endTime + time, 0, art.duration);
cue.startTime = clamp(cuesCache[index].startTime + offsetCache, 0, art.duration);
cue.endTime = clamp(cuesCache[index].endTime + offsetCache, 0, art.duration);
}
art.subtitle.update();
@@ -3422,7 +3426,7 @@
function version(option) {
return _objectSpread$3(_objectSpread$3({}, option), {}, {
html: '<a href="https://artplayer.org" target="_blank">ArtPlayer 4.2.7</a>'
html: '<a href="https://artplayer.org" target="_blank">ArtPlayer 4.3.0</a>'
});
}
@@ -4245,12 +4249,12 @@
setting: setting,
fullscreen: fullscreen,
fullscreenWeb: fullscreenWeb,
pip: pip,
arrowLeft: arrowLeft,
arrowRight: arrowRight,
playbackRate: playbackRate$2,
aspectRatio: aspectRatio$1,
config: config,
pip: pip
config: config
}, art.option.icons);
Object.keys(icons).forEach(function (key) {
@@ -4830,7 +4834,7 @@
}, {
key: "version",
get: function get() {
return '4.2.7';
return '4.3.0';
}
}, {
key: "env",
@@ -4840,7 +4844,7 @@
}, {
key: "build",
get: function get() {
return '1644455085043';
return '1644544110817';
}
}, {
key: "config",
@@ -4942,7 +4946,7 @@
return Artplayer;
}(Emitter); // eslint-disable-next-line no-console
console.log('%c ArtPlayer %c 4.2.7 %c https://artplayer.org', 'color: #fff; background: #5f5f5f', 'color: #fff; background: #4bc729', '');
console.log('%c ArtPlayer %c 4.3.0 %c https://artplayer.org', 'color: #fff; background: #5f5f5f', 'color: #fff; background: #4bc729', '');
return Artplayer;
docs/uncompiled/artplayer.js.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/classCallCheck.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/createClass.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/inherits.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/typeof.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/getPrototypeOf.js","../../node_modules/_style-inject@0.3.0@style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/_option-validator@2.0.6@option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeFunction.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeReflectConstruct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/construct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/iterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/defineProperty.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/urlMix.js","../../packages/artplayer/src/player/attrMix.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/miniMix.js","../../packages/artplayer/src/player/loopMix.js","../../packages/artplayer/src/player/posterMix.js","../../packages/artplayer/src/player/autoHeightMix.js","../../packages/artplayer/src/player/themeMix.js","../../packages/artplayer/src/player/titleMix.js","../../packages/artplayer/src/player/exclusiveMix.js","../../packages/artplayer/src/player/subtitleOffsetMix.js","../../packages/artplayer/src/player/optionInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/index.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/superPropBase.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/get.js","../../packages/artplayer/src/utils/component.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/vLine truncated
{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/classCallCheck.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/createClass.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/inherits.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/typeof.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/getPrototypeOf.js","../../node_modules/_style-inject@0.3.0@style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/_option-validator@2.0.6@option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeFunction.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeReflectConstruct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/construct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/iterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/defineProperty.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/urlMix.js","../../packages/artplayer/src/player/attrMix.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/miniMix.js","../../packages/artplayer/src/player/loopMix.js","../../packages/artplayer/src/player/posterMix.js","../../packages/artplayer/src/player/autoHeightMix.js","../../packages/artplayer/src/player/themeMix.js","../../packages/artplayer/src/player/titleMix.js","../../packages/artplayer/src/player/exclusiveMix.js","../../packages/artplayer/src/player/subtitleOffsetMix.js","../../packages/artplayer/src/player/optionInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/index.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/superPropBase.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/get.js","../../packages/artplayer/src/utils/component.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/vLine truncated
packages/artplayer-plugin-danmuku/src/danmuku.js
-5
View File
@@ -1,5 +1,4 @@
import i18n from './i18n';
import { opacity, size, speed, synchronousPlayback } from './setting';
import { filter, getRect, getDanmuRef } from './utils';
import { bilibiliDanmuParseFromUrl } from './bilibili';
import getDanmuTop from './getDanmuTop';
@@ -7,10 +6,6 @@ import getDanmuTop from './getDanmuTop';
export default class Danmuku {
constructor(art, option) {
art.i18n.update(i18n);
art.setting.add(opacity);
art.setting.add(size);
art.setting.add(speed);
art.setting.add(synchronousPlayback);
this.art = art;
this.queue = [];
this.option = {};
packages/artplayer-plugin-danmuku/src/setting.js
-146
View File
@@ -1,146 +0,0 @@
export function opacity(art) {
const {
i18n,
events: { proxy },
} = art;
return {
name: 'danmuku-opacity',
index: 10,
html: `
<div class="art-setting-header">
${i18n.get('Danmu opacity')}: <span class="art-value">100</span>%
</div>
<div class="art-setting-range">
<input type="range" value="1" min="0.1" max="1" step="0.1">
</div>
`,
mounted: $setting => {
const $range = $setting.querySelector('input[type=range]');
const $value = $setting.querySelector('.art-value');
proxy($range, 'change', () => {
const { value } = $range;
$value.innerText = Number(value) * 100;
art.plugins.artplayerPluginDanmuku.config({
opacity: Number(value),
});
});
art.on('artplayerPluginDanmuku:config', config => {
if ($range.value !== config.opacity) {
$range.value = config.opacity;
$value.innerText = config.opacity * 100;
}
});
},
};
}
export function size(art) {
const {
i18n,
events: { proxy },
} = art;
return {
name: 'danmuku-size',
index: 11,
html: `
<div class="art-setting-header">
${i18n.get('Danmu size')}: <span class="art-value">25</span>px
</div>
<div class="art-setting-range">
<input type="range" value="25" min="14" max="30" step="1">
</div>
`,
mounted: $setting => {
const $range = $setting.querySelector('input[type=range]');
const $value = $setting.querySelector('.art-value');
proxy($range, 'change', () => {
const { value } = $range;
$value.innerText = value;
art.plugins.artplayerPluginDanmuku.config({
fontSize: Number(value),
});
});
art.on('artplayerPluginDanmuku:config', config => {
if ($range.value !== config.fontSize) {
$range.value = config.fontSize;
$value.innerText = config.fontSize;
}
});
},
};
}
export function speed(art) {
const {
i18n,
events: { proxy },
} = art;
return {
name: 'danmuku-speed',
index: 12,
html: `
<div class="art-setting-header">
${i18n.get('Danmu speed')}: <span class="art-value">5</span>s
</div>
<div class="art-setting-range">
<input type="range" value="5" min="1" max="10" step="1">
</div>
`,
mounted: $setting => {
const $range = $setting.querySelector('input[type=range]');
const $value = $setting.querySelector('.art-value');
proxy($range, 'change', () => {
const { value } = $range;
$value.innerText = value;
art.plugins.artplayerPluginDanmuku.config({
speed: Number(value),
});
});
art.on('artplayerPluginDanmuku:config', config => {
if ($range.value !== config.speed) {
$range.value = config.speed;
$value.innerText = config.speed;
}
});
},
};
}
export function synchronousPlayback(art) {
const {
i18n,
events: { proxy },
} = art;
return {
name: 'danmuku-synchronousPlayback',
index: 13,
html: `
<label class="art-setting-checkbox">
<input type="checkbox"/>${i18n.get('Danmu speed synchronous playback multiple')}
</label>
`,
mounted: $setting => {
const $checkbox = $setting.querySelector('input[type=checkbox]');
proxy($checkbox, 'change', () => {
art.plugins.artplayerPluginDanmuku.config({
synchronousPlayback: $checkbox.checked,
});
});
art.on('artplayerPluginDanmuku:config', config => {
if ($checkbox.checked !== config.synchronousPlayback) {
$checkbox.checked = config.synchronousPlayback;
}
});
},
};
}
packages/artplayer/src/icons/index.js
+1 -1
View File
@@ -33,12 +33,12 @@ export default class Icons {
setting,
fullscreen,
fullscreenWeb,
pip,
arrowLeft,
arrowRight,
playbackRate,
aspectRatio,
config,
pip,
...art.option.icons,
};
packages/artplayer/src/player/subtitleOffsetMix.js
+7 -3
View File
@@ -4,16 +4,20 @@ export default function subtitleOffsetMix(art) {
const { clamp } = art.constructor.utils;
const { notice, template, i18n } = art;
let offsetCache = 0;
let cuesCache = [];
art.on('subtitle:switch', () => {
cuesCache = [];
});
def(art, 'subtitleOffset', {
get() {
return offsetCache;
},
set(value) {
if (template.$track && template.$track.track) {
const cues = Array.from(template.$track.track.cues);
const time = clamp(value, -5, 5);
offsetCache = clamp(value, -5, 5);
for (let index = 0; index < cues.length; index++) {
const cue = cues[index];
@@ -23,8 +27,8 @@ export default function subtitleOffsetMix(art) {
endTime: cue.endTime,
};
}
cue.startTime = clamp(cuesCache[index].startTime + time, 0, art.duration);
cue.endTime = clamp(cuesCache[index].endTime + time, 0, art.duration);
cue.startTime = clamp(cuesCache[index].startTime + offsetCache, 0, art.duration);
cue.endTime = clamp(cuesCache[index].endTime + offsetCache, 0, art.duration);
}
art.subtitle.update();
packages/artplayer/src/setting/index.js
+2 -2
View File
@@ -1,9 +1,9 @@
import Component from '../utils/component';
import { append, addClass, setStyle, inverseClass, includeFromEvent } from '../utils';
import flip from './flip';
import aspectRatio from './aspectRatio';
import playbackRate from './playbackRate';
import subtitleOffset from './subtitleOffset';
import Component from '../utils/component';
import { append, addClass, setStyle, inverseClass, includeFromEvent } from '../utils';
function makeRecursion(option) {
for (let index = 0; index < option.length; index++) {
packages/artplayer/types/artplayer.d.ts
Vendored
+36 -4
View File
@@ -70,6 +70,33 @@ type ComponentOption = {
onSelect?(selector: Selector, element: HTMLElement): void;
};
type SettingOption = {
/**
* Html string or html element of setting name
*/
html: string | HTMLElement;
/**
* Html string or html element of setting icon
*/
icon?: string | HTMLElement;
/**
* The width of setting
*/
width?: number;
/**
* Whether the default is selected
*/
current?: boolean;
/**
* Html string or html element of component
*/
children?: SettingOption[];
};
type Component = {
/**
* Component self-increasing id
@@ -320,7 +347,7 @@ type Option = {
/**
* Custom setting list
*/
settings?: ComponentOption[];
settings?: SettingOption[];
/**
* Custom video quality list
@@ -416,7 +443,6 @@ type Option = {
type AspectRatio = 'default' | '4:3' | '16:9' | void;
type PlaybackRate = 0.5 | 0.75 | 1.0 | 1.25 | 1.5 | 1.75 | 2.0 | void;
type Rotate = -270 | -180 | -90 | 0 | 90 | 180 | 270 | void;
type Flip = 'normal' | 'horizontal' | 'vertical' | void;
declare class Player {
@@ -424,8 +450,6 @@ declare class Player {
set aspectRatio(ratio: AspectRatio);
get playbackRate(): PlaybackRate;
set playbackRate(rate: PlaybackRate);
get rotate(): Rotate;
set rotate(deg: Rotate);
get autoSize(): boolean;
set autoSize(state: boolean);
get autoHeight(): boolean;
@@ -474,6 +498,8 @@ declare class Player {
set title(title: string);
get theme(): string;
set theme(theme: string);
get subtitleOffset(): number;
set subtitleOffset(time: number);
pause(): any;
play(): any;
toggle(): any;
@@ -595,6 +621,7 @@ declare class Artplayer extends Player {
readonly state: HTMLElement;
readonly play: HTMLElement;
readonly pause: HTMLElement;
readonly check: HTMLElement;
readonly volume: HTMLElement;
readonly volumeClose: HTMLElement;
readonly subtitle: HTMLElement;
@@ -604,6 +631,11 @@ declare class Artplayer extends Player {
readonly fullscreenWeb: HTMLElement;
readonly pip: HTMLElement;
readonly indicator: HTMLElement;
readonly arrowLeft: HTMLElement;
readonly arrowRight: HTMLElement;
readonly playbackRate: HTMLElement;
readonly aspectRatio: HTMLElement;
readonly config: HTMLElement;
};
readonly hotkey: {