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

add hotkey

Browse Source
This commit is contained in:
Harvey Zack committed 2018-10-16 15:21:37 +08:00
1 parent e8e8f7e8e7
commit 3bf0007e5e
18 files changed
+227 -41
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/css/artplayer.css
+1 -1
View File
@@ -1 +1 @@
.artplayer-wrap{position:relative;width:100%;height:100%;text-align:left;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.artplayer-wrap .art-icon svg{fill:#fff}.artplayer-wrap .artplayer-video{z-index:1}.artplayer-wrap .artplayer-layers,.artplayer-wrap .artplayer-video{position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%}.artplayer-wrap .artplayer-layers{z-index:2}.artplayer-wrap .artplayer-mask{display:none;position:absolute;z-index:3;left:0;top:0;right:0;bottom:0;width:100%;height:100%;align-items:center;justify-content:center;cursor:pointer}.artplayer-wrap .artplayer-mask .art-icon-play{opacity:.8;display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50px}.artplayer-wrap .artplayer-contextmenu{position:absolute;z-index:7;left:0;top:0;width:170px;padding:5px 0;background:rgba(0,0,0,.75)}.artplayer-wrap .artplayer-contextmenu a{font-size:13px;display:block;color:#fff;padding:7px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none}.artplayer-wrap .artplayer-controls{position:absolute;z-index:4;left:0;right:0;bottom:0;height:100px;opacity:0;visibility:hidden;transition:all .2s ease-in-out;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom}.artplayer-wrap.controls-show .artplayer-controls,.artplayer-wrap:hover .artplayer-controls{opacity:1;visibility:visible}.artplayer-wrap .artplayer-loading{display:none;position:absolute;z-index:5;left:0;top:0;right:0;bottom:0;width:100%;height:100%;align-items:center;justify-content:center}.artplayer-wrap .artplayer-notice{display:none;font-size:13px;position:absolute;z-index:6;left:10px;top:10px;height:30px;line-height:30px;padding:0 10px;color:#fff;background:rgba(0,0,0,.5)}
.artplayer-wrap{position:relative;width:100%;height:100%;text-align:left;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.artplayer-wrap .art-icon svg{fill:#fff}.artplayer-wrap .artplayer-video{z-index:1}.artplayer-wrap .artplayer-layers,.artplayer-wrap .artplayer-video{position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%}.artplayer-wrap .artplayer-layers{z-index:2}.artplayer-wrap .artplayer-mask{display:none;position:absolute;z-index:3;left:0;top:0;right:0;bottom:0;width:100%;height:100%;align-items:center;justify-content:center;cursor:pointer}.artplayer-wrap .artplayer-mask .art-icon-play{opacity:.8;display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50px}.artplayer-wrap .artplayer-contextmenu{position:absolute;z-index:7;left:0;top:0;width:170px;padding:5px 0;background:rgba(0,0,0,.75)}.artplayer-wrap .artplayer-contextmenu a{font-size:13px;display:block;color:#fff;padding:7px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none}.artplayer-wrap .artplayer-controls{position:absolute;z-index:4;left:0;right:0;bottom:0;height:100px;opacity:0;visibility:hidden;transition:all .2s ease-in-out;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom}.artplayer-wrap.controls-show .artplayer-controls,.artplayer-wrap:hover .artplayer-controls{opacity:1;visibility:visible}.artplayer-wrap .artplayer-loading{display:none;position:absolute;z-index:5;left:0;top:0;right:0;bottom:0;width:100%;height:100%;align-items:center;justify-content:center}.artplayer-wrap .artplayer-notice{display:none;font-size:13px;position:absolute;z-index:6;left:10px;top:10px;height:30px;line-height:30px;padding:0 10px;color:#fff;background:rgba(0,0,0,.6)}
docs/js/artplayer.js
+116 -18
View File
@@ -231,6 +231,9 @@
throw new ArtPlayerError(err.message);
});
}
function getExt(url) {
return url.trim().toLowerCase().split('.').pop();
}
function verification(option) {
errorHandle(option.container, '\'container\' option is required.');
@@ -248,6 +251,7 @@
errorHandle(Array.isArray(option.contextmenu), "'contextmenu' option require 'array' type, but got '".concat(_typeof_1(option.contextmenu), "'."));
errorHandle(typeof option.loading === 'string', "'loading' option require 'string' type, but got '".concat(_typeof_1(option.loading), "'."));
errorHandle(typeof option.theme === 'string', "'theme' option require 'string' type, but got '".concat(_typeof_1(option.theme), "'."));
errorHandle(typeof option.hotkey === 'boolean', "'hotkey' option require 'boolean' type, but got '".concat(_typeof_1(option.hotkey), "'."));
}
var mimeCodec = {
@@ -383,12 +387,22 @@
'zh-cn': {
'About author': '关于作者',
'Video info': '视频统计信息',
'Close': '关闭'
'Close': '关闭',
'Video load failed': '视频加载失败',
'Fast forward 10 seconds': '快进10秒',
'Rewind 10 seconds': '快退10秒',
'10% increase in volume': '音量增加10%',
'10% reduction in volume': '音量减少10%'
},
'zh-tw': {
'About author': '關於作者',
'Video info': '影片統計訊息',
'Close': '關閉'
'Close': '關閉',
'Video load failed': '影片載入失敗',
'Fast forward 10 seconds': '快進10秒',
'Rewind 10 seconds': '快退10秒',
'10% increase in volume': '音量增加10%',
'10% reduction in volume': '音量減少10%'
}
};
@@ -511,7 +525,7 @@
var option = this.art.option;
if (!option.type) {
var type = option.url.trim().toLowerCase().split('.').pop();
var type = getExt(option.url);
errorHandle(Object.keys(config.mimeCodec).includes(type), "Can't find video's type '".concat(type, "' from '").concat(option.url, "'"));
option.type = type;
}
@@ -586,14 +600,18 @@
var _this$art2 = this.art,
option = _this$art2.option,
notice = _this$art2.notice;
notice = _this$art2.notice,
i18n = _this$art2.i18n,
loading = _this$art2.loading;
request(option.url).then(function (response) {
_this3.sourceBuffer.appendBuffer(response);
}).catch(function (err) {
if (_this3.repeat++ < _this3.maxRepeat) {
_this3.fetchUrl();
} else {
notice.show(err);
notice.show(i18n.get('Video load failed'));
console.warn(err);
loading.hide();
}
});
}
@@ -667,6 +685,7 @@
});
proxy(refs.$container, 'contextmenu', function (event) {
event.preventDefault();
_this.art.focus = true;
if (!refs.$contextmenu) {
_this.creatMenu();
@@ -808,7 +827,6 @@
this.art = art;
this.destroyEvents = [];
this.proxy = this.proxy.bind(this);
this.init();
}
createClass(Events, [{
@@ -820,11 +838,6 @@
target.removeEventListener(name, callback, option);
});
}
}, {
key: "init",
value: function init() {
console.log('Events init');
}
}, {
key: "destroy",
value: function destroy() {
@@ -837,11 +850,84 @@
return Events;
}();
var Hotkey = function Hotkey(art) {
classCallCheck(this, Hotkey);
var Hotkey =
/*#__PURE__*/
function () {
function Hotkey(art) {
classCallCheck(this, Hotkey);
this.art = art;
};
this.art = art;
if (this.art.option.hotkey) {
this.init();
}
}
createClass(Hotkey, [{
key: "init",
value: function init() {
var _this = this;
var _this$art = this.art,
player = _this$art.player,
notice = _this$art.notice,
i18n = _this$art.i18n,
$container = _this$art.refs.$container,
proxy = _this$art.events.proxy;
proxy(document, 'click', function (event) {
_this.art.focus = event.path.indexOf($container) > -1;
});
proxy(window, 'keydown', function (event) {
if (_this.art.focus) {
var tag = document.activeElement.tagName.toUpperCase();
var editable = document.activeElement.getAttribute('contenteditable');
if (tag !== 'INPUT' && tag !== 'TEXTAREA' && editable !== '' && editable !== 'true') {
var percentage;
switch (event.keyCode) {
case 39:
event.preventDefault();
player.seek(player.currentTime + 10);
notice.show(i18n.get('Fast forward 10 seconds'), true);
break;
case 37:
event.preventDefault();
player.seek(player.currentTime - 10);
notice.show(i18n.get('Rewind 10 seconds'), true);
break;
case 38:
event.preventDefault();
percentage = player.volume() + 0.1;
player.volume(percentage);
notice.show(i18n.get('10% increase in volume'), true);
break;
case 40:
event.preventDefault();
percentage = player.volume() - 0.1;
player.volume(percentage);
notice.show(i18n.get('10% reduction in volume'), true);
break;
case 32:
event.preventDefault();
player.toggle();
break;
default:
break;
}
}
}
});
}
}]);
return Hotkey;
}();
var id = 0;
@@ -1001,14 +1087,24 @@
classCallCheck(this, Notice);
this.art = art;
this.timer = null;
}
createClass(Notice, [{
key: "show",
value: function show(msg) {
value: function show(msg, autoHide) {
var _this = this;
var $notice = this.art.refs.$notice;
$notice.style.display = 'block';
$notice.innerHTML = msg instanceof Error ? msg.message.trim() : msg;
if (autoHide) {
clearTimeout(this.timer);
this.timer = setTimeout(function () {
_this.hide();
}, 1000);
}
}
}, {
key: "hide",
@@ -1088,6 +1184,7 @@
createClass(Artplayer, [{
key: "init",
value: function init() {
this.focus = false;
this.refs = {
$container: this.option.container
};
@@ -1099,12 +1196,12 @@
this.layers = new Layers(this);
this.controls = new Controls(this);
this.contextmenu = new Contextmenu(this);
this.danmaku = new Danmu(this);
this.danmu = new Danmu(this);
this.subtitle = new Subtitle(this);
this.info = new Info(this);
this.hotkey = new Hotkey(this);
this.loading = new Loading(this);
this.notice = new Notice(this);
this.hotkey = new Hotkey(this);
this.mask = new Mask(this);
this.id = id$1++;
instances.push(this);
@@ -1164,6 +1261,7 @@
contextmenu: [],
loading: '',
theme: '#1aafff',
hotkey: true,
lang: navigator.language.toLowerCase()
};
}
docs/js/artplayer.js.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../src/utils/ArtPlayerError.js","../../src/utils/index.js","../../src/utils/verification.js","../../src/config/mimeCodec.js","../../src/config/mse.js","../../src/config/video.js","../../src/config/index.js","../../node_modules/tiny-emitter/index.js","../../src/template.js","../../src/i18n.js","../../src/player.js","../../src/mse.js","../../src/controls/index.js","../../src/contextmenu.js","../../src/danmaku.js","../../src/info.js","../../src/subtitle.js","../../src/events.js","../../src/hotkey.js","../../src/layers.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","../../src/icons/index.js","../../src/loading.js","../../src/notice.js","../../src/mask.js","../../src/index.js"],"sourcesContent":["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;","function _typeof2(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof2(obj); }\n\nfunction _typeof(obj) {\n if (typeof Symbol === \"function\" && _typeof2(Symbol.iterator) === \"symbol\") {\n module.exports = _typeof = function _typeof(obj) {\n return _typeof2(obj);\n };\n } else {\n module.exports = _typeof = function _typeof(obj) {\n return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : _typeof2(obj);\n };\n }\n\n return _typeof(obj);\n}\n\nmodule.exports = _typeof;","function _assertThisInitialized(self) {\n if (self === void 0) {\n throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n }\n\n return self;\n}\n\nmodule.exports = _assertThisInitialized;","var _typeof = require(\"../helpers/typeof\");\n\nvar assertThisInitialized = require(\"./assertThisInitialized\");\n\nfunction _possibleConstructorReturn(self, call) {\n if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) {\n return call;\n }\n\n return assertThisInitialized(self);\n}\n\nmodule.exports = _possibleConstructorReturn;","function _getPrototypeOf(o) {\n module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {\n return o.__proto__ || Object.getPrototypeOf(o);\n };\n return _getPrototypeOf(o);\n}\n\nmodule.exports = _getPrototypeOf;","function _setPrototypeOf(o, p) {\n module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n o.__proto__ = p;\n return o;\n };\n\n return _setPrototypeOf(o, p);\n}\n\nmodule.exports = _setPrototypeOf;","var setPrototypeOf = require(\"./setPrototypeOf\");\n\nfunction _inherits(subClass, superClass) {\n if (typeof superClass !== \"function\" && superClass !== null) {\n throw new TypeError(\"Super expression must either be null or a function\");\n }\n\n subClass.prototype = Object.create(superClass && superClass.prototype, {\n constructor: {\n value: subClass,\n writable: true,\n configurable: true\n }\n });\n if (superClass) setPrototypeOf(subClass, superClass);\n}\n\nmodule.exports = _inherits;","function _isNativeFunctioLine truncated
{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../src/utils/ArtPlayerError.js","../../src/utils/index.js","../../src/utils/verification.js","../../src/config/mimeCodec.js","../../src/config/mse.js","../../src/config/video.js","../../src/config/index.js","../../node_modules/tiny-emitter/index.js","../../src/template.js","../../src/i18n.js","../../src/player.js","../../src/mse.js","../../src/controls/index.js","../../src/contextmenu.js","../../src/danmu.js","../../src/info.js","../../src/subtitle.js","../../src/events.js","../../src/hotkey.js","../../src/layers.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","../../src/icons/index.js","../../src/loading.js","../../src/notice.js","../../src/mask.js","../../src/index.js"],"sourcesContent":["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;","function _typeof2(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof2(obj); }\n\nfunction _typeof(obj) {\n if (typeof Symbol === \"function\" && _typeof2(Symbol.iterator) === \"symbol\") {\n module.exports = _typeof = function _typeof(obj) {\n return _typeof2(obj);\n };\n } else {\n module.exports = _typeof = function _typeof(obj) {\n return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : _typeof2(obj);\n };\n }\n\n return _typeof(obj);\n}\n\nmodule.exports = _typeof;","function _assertThisInitialized(self) {\n if (self === void 0) {\n throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n }\n\n return self;\n}\n\nmodule.exports = _assertThisInitialized;","var _typeof = require(\"../helpers/typeof\");\n\nvar assertThisInitialized = require(\"./assertThisInitialized\");\n\nfunction _possibleConstructorReturn(self, call) {\n if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) {\n return call;\n }\n\n return assertThisInitialized(self);\n}\n\nmodule.exports = _possibleConstructorReturn;","function _getPrototypeOf(o) {\n module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {\n return o.__proto__ || Object.getPrototypeOf(o);\n };\n return _getPrototypeOf(o);\n}\n\nmodule.exports = _getPrototypeOf;","function _setPrototypeOf(o, p) {\n module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n o.__proto__ = p;\n return o;\n };\n\n return _setPrototypeOf(o, p);\n}\n\nmodule.exports = _setPrototypeOf;","var setPrototypeOf = require(\"./setPrototypeOf\");\n\nfunction _inherits(subClass, superClass) {\n if (typeof superClass !== \"function\" && superClass !== null) {\n throw new TypeError(\"Super expression must either be null or a function\");\n }\n\n subClass.prototype = Object.create(superClass && superClass.prototype, {\n constructor: {\n value: subClass,\n writable: true,\n configurable: true\n }\n });\n if (superClass) setPrototypeOf(subClass, superClass);\n}\n\nmodule.exports = _inherits;","function _isNativeFunction(Line truncated
src/contextmenu.js
+1
View File
@@ -37,6 +37,7 @@ export default class Contextmenu {
proxy(refs.$container, 'contextmenu', event => {
event.preventDefault();
this.art.focus = true;
if (!refs.$contextmenu) {
this.creatMenu();
}
src/controls/danmu.js
View File
Whitespace-only changes.
src/controls/pip.js
View File
Whitespace-only changes.
src/controls/quality.js
View File
Whitespace-only changes.
src/controls/subtitle.js
View File
Whitespace-only changes.
src/danmaku.js → src/danmu.js
View File
File renamed without changes.
src/events.js
-5
View File
@@ -3,7 +3,6 @@ export default class Events {
this.art = art;
this.destroyEvents = [];
this.proxy = this.proxy.bind(this);
this.init();
}
proxy(target, name, callback, option = {}) {
@@ -13,10 +12,6 @@ export default class Events {
});
}
init() {
console.log('Events init');
}
destroy() {
this.destroyEvents.forEach(event => event());
}
src/hotkey.js
+62
View File
@@ -1,5 +1,67 @@
export default class Hotkey {
constructor(art) {
this.art = art;
if (this.art.option.hotkey) {
this.init();
}
}
init() {
const {
player,
notice,
i18n,
refs: { $container },
events: { proxy }
} = this.art;
proxy(document, 'click', event => {
this.art.focus = event.path.indexOf($container) > -1;
});
proxy(window, 'keydown', event => {
if (this.art.focus) {
const tag = document.activeElement.tagName.toUpperCase();
const editable = document.activeElement.getAttribute('contenteditable');
if (
tag !== 'INPUT' &&
tag !== 'TEXTAREA' &&
editable !== '' &&
editable !== 'true'
) {
let percentage;
switch (event.keyCode) {
case 39:
event.preventDefault();
player.seek(player.currentTime + 10);
notice.show(i18n.get('Fast forward 10 seconds'), true);
break;
case 37:
event.preventDefault();
player.seek(player.currentTime - 10);
notice.show(i18n.get('Rewind 10 seconds'), true);
break;
case 38:
event.preventDefault();
percentage = player.volume() + 0.1;
player.volume(percentage);
notice.show(i18n.get('10% increase in volume'), true);
break;
case 40:
event.preventDefault();
percentage = player.volume() - 0.1;
player.volume(percentage);
notice.show(i18n.get('10% reduction in volume'), true);
break;
case 32:
event.preventDefault();
player.toggle();
break;
default:
break;
}
}
}
});
}
}
src/i18n.js
+12 -2
View File
@@ -2,12 +2,22 @@ const i18nMap = {
'zh-cn': {
'About author': '关于作者',
'Video info': '视频统计信息',
'Close': '关闭'
'Close': '关闭',
'Video load failed': '视频加载失败',
'Fast forward 10 seconds': '快进10秒',
'Rewind 10 seconds': '快退10秒',
'10% increase in volume': '音量增加10%',
'10% reduction in volume': '音量减少10%'
},
'zh-tw': {
'About author': '關於作者',
'Video info': '影片統計訊息',
'Close': '關閉'
'Close': '關閉',
'Video load failed': '影片載入失敗',
'Fast forward 10 seconds': '快進10秒',
'Rewind 10 seconds': '快退10秒',
'10% increase in volume': '音量增加10%',
'10% reduction in volume': '音量減少10%'
}
};
src/index.js
+5 -3
View File
@@ -8,7 +8,7 @@ import Player from './player';
import Mse from './mse';
import Controls from './controls';
import Contextmenu from './contextmenu';
import Danmaku from './danmaku';
import Danmu from './danmu';
import Info from './info';
import Subtitle from './subtitle';
import Events from './events';
@@ -51,6 +51,7 @@ class Artplayer extends Emitter {
contextmenu: [],
loading: '',
theme: '#1aafff',
hotkey: true,
lang: navigator.language.toLowerCase()
};
}
@@ -73,6 +74,7 @@ class Artplayer extends Emitter {
}
init() {
this.focus = false;
this.refs = {
$container: this.option.container
};
@@ -85,12 +87,12 @@ class Artplayer extends Emitter {
this.layers = new Layers(this);
this.controls = new Controls(this);
this.contextmenu = new Contextmenu(this);
this.danmaku = new Danmaku(this);
this.danmu = new Danmu(this);
this.subtitle = new Subtitle(this);
this.info = new Info(this);
this.hotkey = new Hotkey(this);
this.loading = new Loading(this);
this.notice = new Notice(this);
this.hotkey = new Hotkey(this);
this.mask = new Mask(this);
this.id = id++;
src/mse.js
+6 -8
View File
@@ -1,4 +1,4 @@
import { errorHandle, request } from './utils';
import { errorHandle, request, getExt } from './utils';
import config from './config';
export default class Mse {
@@ -15,11 +15,7 @@ export default class Mse {
setMimeCodec() {
const { option } = this.art;
if (!option.type) {
const type = option.url
.trim()
.toLowerCase()
.split('.')
.pop();
const type = getExt(option.url);
errorHandle(
Object.keys(config.mimeCodec).includes(type),
`Can't find video's type '${type}' from '${option.url}'`
@@ -95,7 +91,7 @@ export default class Mse {
}
fetchUrl() {
const { option, notice } = this.art;
const { option, notice, i18n, loading } = this.art;
request(option.url)
.then(response => {
this.sourceBuffer.appendBuffer(response);
@@ -104,7 +100,9 @@ export default class Mse {
if (this.repeat++ < this.maxRepeat) {
this.fetchUrl();
} else {
notice.show(err);
notice.show(i18n.get('Video load failed'));
console.warn(err);
loading.hide();
}
});
}
src/notice.js
+8 -1
View File
@@ -1,12 +1,19 @@
export default class Notice {
constructor(art) {
this.art = art;
this.timer = null;
}
show(msg) {
show(msg, autoHide) {
const { refs: { $notice } } = this.art;
$notice.style.display = 'block';
$notice.innerHTML = msg instanceof Error ? msg.message.trim() : msg;
if (autoHide) {
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.hide();
}, 1000);
}
}
hide() {
src/style/index.scss
+1 -1
View File
@@ -126,6 +126,6 @@
line-height: 30px;
padding: 0 10px;
color: #fff;
background: rgba(0, 0, 0, 0.5);
background: rgba(0, 0, 0, 0.6);
}
}
src/utils/index.js
+9 -1
View File
@@ -16,4 +16,12 @@ export function request(url) {
.catch(err => {
throw new ArtPlayerError(err.message);
});
}
}
export function getExt(url) {
return url
.trim()
.toLowerCase()
.split('.')
.pop();
}
src/utils/verification.js
+5
View File
@@ -75,4 +75,9 @@ export default function verification(option) {
typeof option.theme === 'string',
`'theme' option require 'string' type, but got '${typeof option.theme}'.`
);
errorHandle(
typeof option.hotkey === 'boolean',
`'hotkey' option require 'boolean' type, but got '${typeof option.hotkey}'.`
);
}