mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-08 19:06:15 -08:00
add layer
This commit is contained in:
Harvey Zack committed
1 parent
e4518d21ce
commit
4327787895
15 files changed
+256
-134
No files matched your search
@@ -1 +1 @@
|
||||
.artplayer-wrap{position:relative;width:100%;height:100%;text-align:left}.artplayer-wrap .artplayer-controls,.artplayer-wrap .artplayer-layers,.artplayer-wrap .artplayer-loading,.artplayer-wrap .artplayer-notice,.artplayer-wrap .artplayer-poster,.artplayer-wrap .artplayer-video{position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%}
|
||||
.artplayer-wrap{position:relative;width:100%;height:100%;text-align:left;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.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}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 400 KiB |
+40
-17
@@ -28,26 +28,49 @@
|
||||
var player = new Artplayer({
|
||||
container: document.querySelector('.artplayer-app'),
|
||||
url: './video/frag_bunny.mp4',
|
||||
poster: 'http://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg'
|
||||
poster: './img/poster.png',
|
||||
contextmenu: [{
|
||||
text: 'custom1',
|
||||
link: 'https://github.com/zhw2590582/artplayer'
|
||||
},
|
||||
{
|
||||
text: 'custom2',
|
||||
click: (player) => {
|
||||
console.log(player);
|
||||
}
|
||||
}]
|
||||
});
|
||||
|
||||
player.on('video:canplay', event => {
|
||||
console.log(event);
|
||||
});
|
||||
|
||||
player.on('video:play', event => {
|
||||
console.log(event);
|
||||
});
|
||||
|
||||
player.on('video:progress', event => {
|
||||
console.log(event);
|
||||
});
|
||||
|
||||
player.on('video:pause', event => {
|
||||
console.log(event);
|
||||
});
|
||||
|
||||
console.log(player);
|
||||
|
||||
[
|
||||
'abort',
|
||||
'canplay',
|
||||
'canplaythrough',
|
||||
'durationchange',
|
||||
'emptied',
|
||||
'ended',
|
||||
'error',
|
||||
'loadeddata',
|
||||
'loadedmetadata',
|
||||
'loadstart',
|
||||
'pause',
|
||||
'play',
|
||||
'playing',
|
||||
'progress',
|
||||
'ratechange',
|
||||
'seeked',
|
||||
'seeking',
|
||||
'stalled',
|
||||
'suspend',
|
||||
'timeupdate',
|
||||
'volumechange',
|
||||
'waiting'
|
||||
].forEach(item => {
|
||||
player.on('video:' + item, event => {
|
||||
console.log(event);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
||||
+124
-32
@@ -325,33 +325,29 @@
|
||||
createClass(Template, [{
|
||||
key: "init",
|
||||
value: function init() {
|
||||
this.art.refs.$container.innerHTML = "\n <div class=\"artplayer-wrap\">\n <video class=\"artplayer-video\" webkit-playsinline playsinline></video>\n <div class=\"artplayer-controls\"></div>\n <div class=\"artplayer-layers\"></div>\n <div class=\"artplayer-loading\"></div>\n <div class=\"artplayer-notice\"></div>\n </div>\n ";
|
||||
this.art.refs.$wrap = this.art.refs.$container.querySelector('.artplayer-wrap');
|
||||
this.art.refs.$video = this.art.refs.$container.querySelector('.artplayer-video');
|
||||
this.art.refs.$controls = this.art.refs.$container.querySelector('.artplayer-controls');
|
||||
this.art.refs.$layers = this.art.refs.$container.querySelector('.artplayer-layers');
|
||||
this.art.refs.$loading = this.art.refs.$container.querySelector('.artplayer-loading');
|
||||
this.art.refs.$notice = this.art.refs.$container.querySelector('.artplayer-notice');
|
||||
var refs = this.art.refs;
|
||||
refs.$container.innerHTML = "\n <div class=\"artplayer-wrap\">\n <video class=\"artplayer-video\" webkit-playsinline playsinline></video>\n <div class=\"artplayer-controls\"></div>\n <div class=\"artplayer-layers\"></div>\n <div class=\"artplayer-loading\"></div>\n <div class=\"artplayer-notice\"></div>\n </div>\n ";
|
||||
refs.$wrap = refs.$container.querySelector('.artplayer-wrap');
|
||||
refs.$video = refs.$container.querySelector('.artplayer-video');
|
||||
refs.$controls = refs.$container.querySelector('.artplayer-controls');
|
||||
refs.$layers = refs.$container.querySelector('.artplayer-layers');
|
||||
refs.$loading = refs.$container.querySelector('.artplayer-loading');
|
||||
refs.$notice = refs.$container.querySelector('.artplayer-notice');
|
||||
}
|
||||
}]);
|
||||
|
||||
return Template;
|
||||
}();
|
||||
|
||||
var ZHCN = {};
|
||||
|
||||
var ZHTW = {};
|
||||
|
||||
var EN = {};
|
||||
|
||||
var JP = {};
|
||||
|
||||
var i18nMap = {
|
||||
zh: ZHCN,
|
||||
'zh-cn': ZHCN,
|
||||
'zh-tw': ZHTW,
|
||||
en: EN,
|
||||
jp: JP
|
||||
'zh-cn': {
|
||||
'About author': '关于作者',
|
||||
'Video info': '视频统计信息'
|
||||
},
|
||||
'zh-tw': {
|
||||
'About author': '關於作者',
|
||||
'Video info': '影片統計訊息'
|
||||
}
|
||||
};
|
||||
|
||||
var I18n =
|
||||
@@ -545,11 +541,89 @@
|
||||
classCallCheck(this, Controls);
|
||||
};
|
||||
|
||||
var Contextmenu = function Contextmenu(art) {
|
||||
classCallCheck(this, Contextmenu);
|
||||
var Contextmenu =
|
||||
/*#__PURE__*/
|
||||
function () {
|
||||
function Contextmenu(art) {
|
||||
classCallCheck(this, Contextmenu);
|
||||
|
||||
this.art = art;
|
||||
};
|
||||
this.art = art;
|
||||
this.state = false;
|
||||
this.init();
|
||||
}
|
||||
|
||||
createClass(Contextmenu, [{
|
||||
key: "init",
|
||||
value: function init() {
|
||||
var _this = this;
|
||||
|
||||
this.art.layers.add({
|
||||
name: 'test1',
|
||||
html: 'test2',
|
||||
index: 10
|
||||
});
|
||||
this.art.layers.add({
|
||||
name: 'test3',
|
||||
html: 'test4',
|
||||
index: 11
|
||||
});
|
||||
var _this$art = this.art,
|
||||
option = _this$art.option,
|
||||
i18n = _this$art.i18n,
|
||||
refs = _this$art.refs,
|
||||
proxy = _this$art.events.proxy;
|
||||
option.contextmenu.push({
|
||||
text: i18n.get('Video info'),
|
||||
click: function click(art) {
|
||||
console.log(art);
|
||||
}
|
||||
}, {
|
||||
text: i18n.get('About author'),
|
||||
link: 'https://github.com/zhw2590582'
|
||||
});
|
||||
proxy(refs.$container, 'contextmenu', function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
if (!_this.state) {
|
||||
_this.creatMenu();
|
||||
|
||||
_this.state = true;
|
||||
}
|
||||
|
||||
_this.setPos(event);
|
||||
|
||||
_this.show();
|
||||
});
|
||||
proxy(document, 'contextmenu', function (event) {
|
||||
if (!event.path.includes(refs.$container)) {
|
||||
_this.hide();
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: "creatMenu",
|
||||
value: function creatMenu() {
|
||||
console.log('creatMenu');
|
||||
}
|
||||
}, {
|
||||
key: "setPos",
|
||||
value: function setPos() {
|
||||
console.log('setPos');
|
||||
}
|
||||
}, {
|
||||
key: "hide",
|
||||
value: function hide() {
|
||||
console.log('hide');
|
||||
}
|
||||
}, {
|
||||
key: "show",
|
||||
value: function show() {
|
||||
console.log('show');
|
||||
}
|
||||
}]);
|
||||
|
||||
return Contextmenu;
|
||||
}();
|
||||
|
||||
var Danmu = function Danmu(art) {
|
||||
classCallCheck(this, Danmu);
|
||||
@@ -599,13 +673,30 @@
|
||||
this.art = art;
|
||||
};
|
||||
|
||||
var Layers = function Layers(art) {
|
||||
classCallCheck(this, Layers);
|
||||
|
||||
this.art = art;
|
||||
};
|
||||
|
||||
var id = 0;
|
||||
|
||||
var Layers =
|
||||
/*#__PURE__*/
|
||||
function () {
|
||||
function Layers(art) {
|
||||
classCallCheck(this, Layers);
|
||||
|
||||
this.art = art;
|
||||
}
|
||||
|
||||
createClass(Layers, [{
|
||||
key: "add",
|
||||
value: function add(option) {
|
||||
var refs = this.art.refs;
|
||||
id++;
|
||||
refs.$layers.insertAdjacentHTML('beforeend', "\n <div data-layer-index=\"".concat(id, "\" class=\"art-layer art-layer-").concat(option.name, "\" style=\"z-index: ").concat(option.index || id, "\">\n ").concat(option.html, "\n </div>\n "));
|
||||
}
|
||||
}]);
|
||||
|
||||
return Layers;
|
||||
}();
|
||||
|
||||
var id$1 = 0;
|
||||
var instances = [];
|
||||
|
||||
var Artplayer =
|
||||
@@ -638,14 +729,14 @@
|
||||
this.events = new Events(this);
|
||||
this.player = new Player(this);
|
||||
this.mse = new Mse(this);
|
||||
this.layers = new Layers(this);
|
||||
this.controls = new Controls(this);
|
||||
this.contextmenu = new Contextmenu(this);
|
||||
this.danmaku = new Danmu(this);
|
||||
this.subtitle = new Subtitle(this);
|
||||
this.info = new Info(this);
|
||||
this.hotkey = new Hotkey(this);
|
||||
this.layers = new Layers(this);
|
||||
this.id = id++;
|
||||
this.id = id$1++;
|
||||
instances.push(this);
|
||||
}
|
||||
}, {
|
||||
@@ -695,6 +786,7 @@
|
||||
preload: 'auto',
|
||||
type: '',
|
||||
mimeCodec: '',
|
||||
contextmenu: [],
|
||||
lang: navigator.language.toLowerCase()
|
||||
};
|
||||
}
|
||||
|
||||
@@ -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","../../node_modules/tiny-emitter/index.js","../../src/template.js","../../src/i18n/zh-CN.js","../../src/i18n/zh-TW.js","../../src/i18n/en.js","../../src/i18n/jp.js","../../src/i18n/index.js","../../src/utils/mediaElement.js","../../src/player.js","../../src/utils/mimeCodeces.js","../../src/utils/mseConfig.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","../../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(fn) {\n return Function.toString.call(fn).indexOf(\"[native code]\") !== -1;\n}\n\nmodule.exports = _isNativeFunction;","var setPrototypeOf = require(\"./setPrototypeOf\");\n\nfunction isNativeReflectConstruct() {\n if (typeof Reflect === \"undefined\" |Line 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","../../node_modules/tiny-emitter/index.js","../../src/template.js","../../src/i18n.js","../../src/utils/mediaElement.js","../../src/player.js","../../src/utils/mimeCodeces.js","../../src/utils/mseConfig.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","../../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(fn) {\n return Function.toString.call(fn).indexOf(\"[native code]\") !== -1;\n}\n\nmodule.exports = _isNativeFunction;","var setPrototypeOf = require(\"./setPrototypeOf\");\n\nfunction isNativeReflectConstruct() {\n if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n if (Reflect.construct.sham) return false;\n if (typeof Proxy ===Line truncated
|
||||
@@ -1,5 +1,62 @@
|
||||
export default class Contextmenu {
|
||||
constructor(art) {
|
||||
this.art = art;
|
||||
this.state = false;
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.art.layers.add({
|
||||
name: 'test1',
|
||||
html: 'test2',
|
||||
index: 10
|
||||
});
|
||||
this.art.layers.add({
|
||||
name: 'test3',
|
||||
html: 'test4',
|
||||
index: 11
|
||||
});
|
||||
const { option, i18n, refs, events: { proxy } } = this.art;
|
||||
option.contextmenu.push({
|
||||
text: i18n.get('Video info'),
|
||||
click: art => {
|
||||
console.log(art);
|
||||
}
|
||||
}, {
|
||||
text: i18n.get('About author'),
|
||||
link: 'https://github.com/zhw2590582'
|
||||
});
|
||||
|
||||
proxy(refs.$container, 'contextmenu', event => {
|
||||
event.preventDefault();
|
||||
if (!this.state) {
|
||||
this.creatMenu();
|
||||
this.state = true;
|
||||
}
|
||||
this.setPos(event);
|
||||
this.show();
|
||||
});
|
||||
|
||||
proxy(document, 'contextmenu', event => {
|
||||
if (!event.path.includes(refs.$container)) {
|
||||
this.hide();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
creatMenu() {
|
||||
console.log('creatMenu');
|
||||
}
|
||||
|
||||
setPos() {
|
||||
console.log('setPos');
|
||||
}
|
||||
|
||||
hide() {
|
||||
console.log('hide');
|
||||
}
|
||||
|
||||
show() {
|
||||
console.log('show');
|
||||
}
|
||||
}
|
||||
@@ -1,14 +1,12 @@
|
||||
import ZHCN from './zh-CN';
|
||||
import ZHTW from './zh-TW';
|
||||
import EN from './en';
|
||||
import JP from './jp';
|
||||
|
||||
const i18nMap = {
|
||||
zh: ZHCN,
|
||||
'zh-cn': ZHCN,
|
||||
'zh-tw': ZHTW,
|
||||
en: EN,
|
||||
jp: JP
|
||||
'zh-cn': {
|
||||
'About author': '关于作者',
|
||||
'Video info': '视频统计信息'
|
||||
},
|
||||
'zh-tw': {
|
||||
'About author': '關於作者',
|
||||
'Video info': '影片統計訊息'
|
||||
}
|
||||
};
|
||||
|
||||
export default class I18n {
|
||||
@@ -1,3 +0,0 @@
|
||||
export default {
|
||||
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
export default {
|
||||
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
export default {
|
||||
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
export default {
|
||||
|
||||
}
|
||||
+2
-1
@@ -39,6 +39,7 @@ class Artplayer extends Emitter {
|
||||
preload: 'auto',
|
||||
type: '',
|
||||
mimeCodec: '',
|
||||
contextmenu: [],
|
||||
lang: navigator.language.toLowerCase()
|
||||
};
|
||||
}
|
||||
@@ -70,13 +71,13 @@ class Artplayer extends Emitter {
|
||||
this.events = new Events(this);
|
||||
this.player = new Player(this);
|
||||
this.mse = new Mse(this);
|
||||
this.layers = new Layers(this);
|
||||
this.controls = new Controls(this);
|
||||
this.contextmenu = new Contextmenu(this);
|
||||
this.danmaku = new Danmaku(this);
|
||||
this.subtitle = new Subtitle(this);
|
||||
this.info = new Info(this);
|
||||
this.hotkey = new Hotkey(this);
|
||||
this.layers = new Layers(this);
|
||||
|
||||
this.id = id++;
|
||||
instances.push(this);
|
||||
|
||||
@@ -1,5 +1,16 @@
|
||||
let id = 0;
|
||||
export default class Layers {
|
||||
constructor(art) {
|
||||
this.art = art;
|
||||
}
|
||||
|
||||
add(option) {
|
||||
const { refs } = this.art;
|
||||
id++;
|
||||
refs.$layers.insertAdjacentHTML('beforeend', `
|
||||
<div data-layer-index="${id}" class="art-layer art-layer-${option.name}" style="z-index: ${option.index || id}">
|
||||
${option.html}
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
}
|
||||
+4
-41
@@ -5,9 +5,11 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: left;
|
||||
user-select: none;
|
||||
|
||||
.artplayer-video {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@@ -16,53 +18,14 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.artplayer-poster {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.artplayer-controls {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.artplayer-loading {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.artplayer-notice {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.artplayer-layers {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
+8
-19
@@ -5,7 +5,8 @@ export default class Template {
|
||||
}
|
||||
|
||||
init() {
|
||||
this.art.refs.$container.innerHTML = `
|
||||
const { refs } = this.art;
|
||||
refs.$container.innerHTML = `
|
||||
<div class="artplayer-wrap">
|
||||
<video class="artplayer-video" webkit-playsinline playsinline></video>
|
||||
<div class="artplayer-controls"></div>
|
||||
@@ -14,23 +15,11 @@ export default class Template {
|
||||
<div class="artplayer-notice"></div>
|
||||
</div>
|
||||
`;
|
||||
this.art.refs.$wrap = this.art.refs.$container.querySelector(
|
||||
'.artplayer-wrap'
|
||||
);
|
||||
this.art.refs.$video = this.art.refs.$container.querySelector(
|
||||
'.artplayer-video'
|
||||
);
|
||||
this.art.refs.$controls = this.art.refs.$container.querySelector(
|
||||
'.artplayer-controls'
|
||||
);
|
||||
this.art.refs.$layers = this.art.refs.$container.querySelector(
|
||||
'.artplayer-layers'
|
||||
);
|
||||
this.art.refs.$loading = this.art.refs.$container.querySelector(
|
||||
'.artplayer-loading'
|
||||
);
|
||||
this.art.refs.$notice = this.art.refs.$container.querySelector(
|
||||
'.artplayer-notice'
|
||||
);
|
||||
refs.$wrap = refs.$container.querySelector('.artplayer-wrap');
|
||||
refs.$video = refs.$container.querySelector('.artplayer-video');
|
||||
refs.$controls = refs.$container.querySelector('.artplayer-controls');
|
||||
refs.$layers = refs.$container.querySelector('.artplayer-layers');
|
||||
refs.$loading = refs.$container.querySelector('.artplayer-loading');
|
||||
refs.$notice = refs.$container.querySelector('.artplayer-notice');
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user