mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-08 19:06:15 -08:00
add mask
This commit is contained in:
Harvey Zack committed
1 parent
32478ecb14
commit
ca0c67499b
12 files changed
+219
-15
No files matched your search
@@ -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 .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-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{display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50px;background:#1aafff}.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)}
|
||||
+2
-1
@@ -28,7 +28,8 @@
|
||||
var player = new Artplayer({
|
||||
container: document.querySelector('.artplayer-app'),
|
||||
url: './video/frag_bunny.mp4',
|
||||
poster: './img/poster.png'
|
||||
poster: './img/poster.png',
|
||||
autoplay: true
|
||||
});
|
||||
|
||||
console.dir(Artplayer);
|
||||
|
||||
+99
-7
@@ -364,13 +364,14 @@
|
||||
key: "init",
|
||||
value: function init() {
|
||||
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-layers\"></div>\n <div class=\"artplayer-controls\"></div>\n <div class=\"artplayer-loading\"></div>\n <div class=\"artplayer-notice\"></div>\n </div>\n ";
|
||||
refs.$container.innerHTML = "\n <div class=\"artplayer-wrap\">\n <video class=\"artplayer-video\" webkit-playsinline playsinline></video>\n <div class=\"artplayer-layers\"></div>\n <div class=\"artplayer-mask\"></div>\n <div class=\"artplayer-controls\"></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');
|
||||
refs.$mask = refs.$container.querySelector('.artplayer-mask');
|
||||
}
|
||||
}]);
|
||||
|
||||
@@ -446,6 +447,42 @@
|
||||
_this.art.emit("video:".concat(event.type), event);
|
||||
});
|
||||
});
|
||||
this.art.on('video:loadstart', function () {
|
||||
_this.art.loading.show();
|
||||
});
|
||||
this.art.on('video:loadeddata', function () {
|
||||
_this.art.loading.hide();
|
||||
});
|
||||
this.art.on('video:canplay', function () {
|
||||
_this.art.controls.show();
|
||||
|
||||
_this.art.mask.show();
|
||||
|
||||
if (_this.art.option.autoplay) {
|
||||
var promise = $video.play(); // TODO: chrome autoplay policy changes
|
||||
|
||||
if (promise !== undefined) {
|
||||
promise.then().catch(function (err) {
|
||||
console.warn(err);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
this.art.on('video:playing', function () {
|
||||
_this.art.controls.hide();
|
||||
|
||||
_this.art.mask.hide();
|
||||
});
|
||||
this.art.on('video:pause', function () {
|
||||
_this.art.controls.show();
|
||||
|
||||
_this.art.mask.show();
|
||||
});
|
||||
this.art.on('video:ended', function () {
|
||||
_this.art.controls.show();
|
||||
|
||||
_this.art.mask.show();
|
||||
});
|
||||
}
|
||||
}]);
|
||||
|
||||
@@ -564,12 +601,31 @@
|
||||
return Mse;
|
||||
}();
|
||||
|
||||
var Controls = function Controls(_ref) {//
|
||||
var Controls =
|
||||
/*#__PURE__*/
|
||||
function () {
|
||||
function Controls(art) {
|
||||
classCallCheck(this, Controls);
|
||||
|
||||
var option = _ref.option;
|
||||
this.art = art;
|
||||
}
|
||||
|
||||
classCallCheck(this, Controls);
|
||||
};
|
||||
createClass(Controls, [{
|
||||
key: "show",
|
||||
value: function show() {
|
||||
var $wrap = this.art.refs.$wrap;
|
||||
$wrap.classList.add('controls-show');
|
||||
}
|
||||
}, {
|
||||
key: "hide",
|
||||
value: function hide() {
|
||||
var $wrap = this.art.refs.$wrap;
|
||||
$wrap.classList.remove('controls-show');
|
||||
}
|
||||
}]);
|
||||
|
||||
return Controls;
|
||||
}();
|
||||
|
||||
var Contextmenu =
|
||||
/*#__PURE__*/
|
||||
@@ -860,15 +916,18 @@
|
||||
|
||||
var loading = "<svg class=\"lds-default\" width=\"85px\" height=\"85px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid\"><circle cx=\"75\" cy=\"50\" fill=\"undefined\" r=\"3\">\n <animate attributeName=\"r\" values=\"3;3;5;3;3\" times=\"0;0.1;0.2;0.3;1\" dur=\"1s\" repeatCount=\"indefinite\" begin=\"-0.9166666666666666s\"></animate>\n <animate attributeName=\"fill\" values=\"#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb\" repeatCount=\"indefinite\" times=\"0;0.1;0.2;0.3;1\" dur=\"1s\" begin=\"-0.9166666666666666s\"></animate>\n</circle><circle cx=\"71.65063509461098\" cy=\"62.5\" fill=\"undefined\" r=\"3\">\n <animate attributeName=\"r\" values=\"3;3;5;3;3\" times=\"0;0.1;0.2;0.3;1\" dur=\"1s\" repeatCount=\"indefinite\" begin=\"-0.8333333333333334s\"></animate>\n <animate attributeName=\"fill\" values=\"#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb\" repeatCount=\"indefinite\" times=\"0;0.1;0.2;0.3;1\" dur=\"1s\" begin=\"-0.8333333333333334s\"></animate>\n</circle><circle cx=\"62.5\" cy=\"71.65063509461096\" fill=\"undefined\" r=\"3\">\n <animate attributeName=\"r\" values=\"3;3;5;3;3\" times=\"0;0.1;0.2;0.3;1\" dur=\"1s\" repeatCount=\"indefinite\" begin=\"-0.75s\"></animate>\n <animate attributeName=\"fill\" values=\"#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb\" repeatCount=\"indefinite\" times=\"0;0.1;0.2;0.3;1\" dur=\"1s\" begin=\"-0.75s\"></animate>\n</circle><circle cx=\"50\" cy=\"75\" fill=\"undefined\" r=\"3.66667\">\n <animate attributeName=\"r\" values=\"3;3;5;3;3\" times=\"0;0.1;0.2;0.3;1\" dur=\"1s\" repeatCount=\"indefinite\" begin=\"-0.6666666666666666s\"></animate>\n <animate attributeName=\"fill\" values=\"#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb\" repeatCount=\"indefinite\" times=\"0;0.1;0.2;0.3;1\" dur=\"1s\" begin=\"-0.6666666666666666s\"></animate>\n</circle><circle cx=\"37.50000000000001\" cy=\"71.65063509461098\" fill=\"undefined\" r=\"4.33333\">\n <animate attributeName=\"r\" values=\"3;3;5;3;3\" times=\"0;0.1;0.2;0.3;1\" dur=\"1s\" repeatCount=\"indefinite\" begin=\"-0.5833333333333334s\"></animate>\n <animate attributeName=\"fill\" values=\"#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb\" repeatCount=\"indefinite\" times=\"0;0.1;0.2;0.3;1\" dur=\"1s\" begin=\"-0.5833333333333334s\"></animate>\n</circle><circle cx=\"28.34936490538903\" cy=\"62.5\" fill=\"undefined\" r=\"5\">\n <animate attributeName=\"r\" values=\"3;3;5;3;3\" times=\"0;0.1;0.2;0.3;1\" dur=\"1s\" repeatCount=\"indefinite\" begin=\"-0.5s\"></animate>\n <animate attributeName=\"fill\" values=\"#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb\" repeatCount=\"indefinite\" times=\"0;0.1;0.2;0.3;1\" dur=\"1s\" begin=\"-0.5s\"></animate>\n</circle><circle cx=\"25\" cy=\"50\" fill=\"undefined\" r=\"4.33333\">\n <animate attributeName=\"r\" values=\"3;3;5;3;3\" times=\"0;0.1;0.2;0.3;1\" dur=\"1s\" repeatCount=\"indefinite\" begin=\"-0.4166666666666667s\"></animate>\n <animate attributeName=\"fill\" values=\"#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb\" repeatCount=\"indefinite\" times=\"0;0.1;0.2;0.3;1\" dur=\"1s\" begin=\"-0.4166666666666667s\"></animate>\n</circle><circle cx=\"28.34936490538903\" cy=\"37.50000000000001\" fill=\"undefined\" r=\"3.66667\">\n <animate attributeName=\"r\" values=\"3;3;5;3;3\" times=\"0;0.1;0.2;0.3;1\" dur=\"1s\" repeatCount=\"indefinite\" begin=\"-0.3333333333333333s\"></animate>\n <animate attributeName=\"fill\" values=\"#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb\" repeatCount=\"indefinite\" times=\"0;0.1;0.2;0.3;1\" dur=\"1s\" begin=\"-0.3333333333333333s\"></animate>\n</circle><circle cx=\"37.499999999999986\" cy=\"28.349364905389038\" fill=\"undefined\" r=\"3\">\n <animate attributeName=\"r\" values=\"3;3;5;3;3\" times=\"0;0.1;0.2;0.3;1\" dur=\"1s\" repeatCount=\"indefinite\" begin=\"-0.25s\"></animate>\n <animate attributeName=\"fill\" values=\"#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb\" repeatCount=\"indefinite\" times=\"0;0.1;0.2;0.3;1\" dur=\"1s\" begin=\"-0.25s\"></animate>\n</circle><circle cx=\"49.99999999999999\" cy=\"25\" fill=\"undefined\" r=\"3\">\n <animate attributeName=\"r\" values=\"3;3;5;3;3\" times=\"0;0.1;0.2;0.3;1\" dur=\"1s\" repeatCount=\"indefinite\" begin=\"-0.16666666666666666s\"></animate>\n <animate attributeName=\"fill\" values=\"#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb\" repeatCount=\"indefinite\" times=\"0;0.1;0.2;0.3;1\" dur=\"1s\" begin=\"-0.16666666666666666s\"></animate>\n</circle><circle cx=\"62.5\" cy=\"28.349364905389034\" fill=\"undefined\" r=\"3\">\n <animate attributeName=\"r\" values=\"3;3;5;3;3\" times=\"0;0.1;0.2;0.3;1\" dur=\"1s\" repeatCount=\"indefinite\" begin=\"-0.08333333333333333s\"></animate>\n <animate attributeName=\"fill\" values=\"#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb\" repeatCount=\"indefinite\" times=\"0;0.1;0.2;0.3;1\" dur=\"1s\" begin=\"-0.08333333333333333s\"></animate>\n</circle><circle cx=\"71.65063509461096\" cy=\"37.499999999999986\" fill=\"undefined\" r=\"3\">\n <animate attributeName=\"r\" valuLine truncated
|
||||
|
||||
var play = "<svg id=\"plyr-play\" width=\"16px\" height=\"18px\">\n <path d=\"M15.562 8.1L3.87.225C3.052-.337 2 .225 2 1.125v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z\"></path>\n</svg>";
|
||||
|
||||
var Icons = {
|
||||
loading: loading
|
||||
loading: loading,
|
||||
play: play
|
||||
};
|
||||
|
||||
function creatDomFromSvg(map) {
|
||||
var result = {};
|
||||
Object.keys(map).forEach(function (name) {
|
||||
var tmp = document.createElement('div');
|
||||
tmp.innerHTML = map[name];
|
||||
tmp.innerHTML = "<i class=\"art-icon art-icon-".concat(name, "\">").concat(map[name], "</i>");
|
||||
|
||||
var _tmp$childNodes = slicedToArray(tmp.childNodes, 1);
|
||||
|
||||
@@ -947,6 +1006,36 @@
|
||||
return Notice;
|
||||
}();
|
||||
|
||||
var Mask =
|
||||
/*#__PURE__*/
|
||||
function () {
|
||||
function Mask(art) {
|
||||
classCallCheck(this, Mask);
|
||||
|
||||
this.art = art;
|
||||
this.init();
|
||||
}
|
||||
|
||||
createClass(Mask, [{
|
||||
key: "init",
|
||||
value: function init() {
|
||||
this.art.refs.$mask.appendChild(Icons$1.play);
|
||||
}
|
||||
}, {
|
||||
key: "show",
|
||||
value: function show() {
|
||||
this.art.refs.$mask.style.display = 'flex';
|
||||
}
|
||||
}, {
|
||||
key: "hide",
|
||||
value: function hide() {
|
||||
this.art.refs.$mask.style.display = 'none';
|
||||
}
|
||||
}]);
|
||||
|
||||
return Mask;
|
||||
}();
|
||||
|
||||
var id$1 = 0;
|
||||
var instances = [];
|
||||
|
||||
@@ -989,8 +1078,10 @@
|
||||
this.hotkey = new Hotkey(this);
|
||||
this.loading = new Loading(this);
|
||||
this.notice = new Notice(this);
|
||||
this.mask = new Mask(this);
|
||||
this.id = id$1++;
|
||||
instances.push(this);
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: "destroy",
|
||||
@@ -998,6 +1089,7 @@
|
||||
this.events.destroy();
|
||||
this.refs.$container.innerHTML = '';
|
||||
instances.splice(instances.indexOf(this), 1);
|
||||
return this;
|
||||
}
|
||||
}], [{
|
||||
key: "use",
|
||||
|
||||
@@ -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/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 FuLine 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/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
|
||||
+12
-2
@@ -1,5 +1,15 @@
|
||||
export default class Controls {
|
||||
constructor({ option }) {
|
||||
//
|
||||
constructor(art) {
|
||||
this.art = art;
|
||||
}
|
||||
|
||||
show() {
|
||||
const { $wrap } = this.art.refs;
|
||||
$wrap.classList.add('controls-show');
|
||||
}
|
||||
|
||||
hide() {
|
||||
const { $wrap } = this.art.refs;
|
||||
$wrap.classList.remove('controls-show');
|
||||
}
|
||||
}
|
||||
+4
-2
@@ -1,14 +1,16 @@
|
||||
import loading from './loading.svg';
|
||||
import play from './play.svg';
|
||||
|
||||
const Icons = {
|
||||
loading: loading
|
||||
loading,
|
||||
play
|
||||
};
|
||||
|
||||
function creatDomFromSvg(map) {
|
||||
const result = {};
|
||||
Object.keys(map).forEach(name => {
|
||||
const tmp = document.createElement('div');
|
||||
tmp.innerHTML = map[name];
|
||||
tmp.innerHTML = `<i class="art-icon art-icon-${name}">${map[name]}</i>`;
|
||||
[result[name]] = tmp.childNodes;
|
||||
});
|
||||
return result;
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg id="plyr-play" width="16px" height="18px">
|
||||
<path d="M15.562 8.1L3.87.225C3.052-.337 2 .225 2 1.125v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 189 B |
@@ -16,6 +16,7 @@ import Hotkey from './hotkey';
|
||||
import Layers from './layers';
|
||||
import Loading from './loading';
|
||||
import Notice from './notice';
|
||||
import Mask from './mask';
|
||||
|
||||
let id = 0;
|
||||
export const instances = [];
|
||||
@@ -89,15 +90,18 @@ class Artplayer extends Emitter {
|
||||
this.hotkey = new Hotkey(this);
|
||||
this.loading = new Loading(this);
|
||||
this.notice = new Notice(this);
|
||||
this.mask = new Mask(this);
|
||||
|
||||
this.id = id++;
|
||||
instances.push(this);
|
||||
return this;
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.events.destroy();
|
||||
this.refs.$container.innerHTML = '';
|
||||
instances.splice(instances.indexOf(this), 1);
|
||||
return this;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
import Icons from './icons';
|
||||
|
||||
export default class Mask {
|
||||
constructor(art) {
|
||||
this.art = art;
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.art.refs.$mask.appendChild(Icons.play);
|
||||
}
|
||||
|
||||
show() {
|
||||
this.art.refs.$mask.style.display = 'flex';
|
||||
}
|
||||
|
||||
hide() {
|
||||
this.art.refs.$mask.style.display = 'none';
|
||||
}
|
||||
}
|
||||
@@ -22,10 +22,49 @@ export default class Player {
|
||||
const { proxy } = this.art.events;
|
||||
const { $video } = this.art.refs;
|
||||
const { events } = config.video;
|
||||
|
||||
events.forEach(eventName => {
|
||||
proxy($video, eventName, event => {
|
||||
this.art.emit(`video:${event.type}`, event);
|
||||
});
|
||||
});
|
||||
|
||||
this.art.on('video:loadstart', () => {
|
||||
this.art.loading.show();
|
||||
});
|
||||
|
||||
this.art.on('video:loadeddata', () => {
|
||||
this.art.loading.hide();
|
||||
});
|
||||
|
||||
this.art.on('video:canplay', () => {
|
||||
this.art.controls.show();
|
||||
this.art.mask.show();
|
||||
if (this.art.option.autoplay) {
|
||||
const promise = $video.play();
|
||||
|
||||
// TODO: chrome autoplay policy changes
|
||||
if (promise !== undefined) {
|
||||
promise.then().catch(err => {
|
||||
console.warn(err);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.art.on('video:playing', () => {
|
||||
this.art.controls.hide();
|
||||
this.art.mask.hide();
|
||||
});
|
||||
|
||||
this.art.on('video:pause', () => {
|
||||
this.art.controls.show();
|
||||
this.art.mask.show();
|
||||
});
|
||||
|
||||
this.art.on('video:ended', () => {
|
||||
this.art.controls.show();
|
||||
this.art.mask.show();
|
||||
});
|
||||
}
|
||||
}
|
||||
+32
-1
@@ -8,6 +8,12 @@
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
|
||||
.art-icon {
|
||||
svg {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.artplayer-video {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
@@ -30,6 +36,31 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
.art-icon-play {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50px;
|
||||
background: #1aafff;
|
||||
}
|
||||
}
|
||||
|
||||
.artplayer-contextmenu {
|
||||
position: absolute;
|
||||
z-index: 7;
|
||||
@@ -63,7 +94,7 @@
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;
|
||||
}
|
||||
|
||||
.controls-show, &:hover {
|
||||
&.controls-show, &:hover {
|
||||
.artplayer-controls {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
|
||||
@@ -10,6 +10,7 @@ export default class Template {
|
||||
<div class="artplayer-wrap">
|
||||
<video class="artplayer-video" webkit-playsinline playsinline></video>
|
||||
<div class="artplayer-layers"></div>
|
||||
<div class="artplayer-mask"></div>
|
||||
<div class="artplayer-controls"></div>
|
||||
<div class="artplayer-loading"></div>
|
||||
<div class="artplayer-notice"></div>
|
||||
@@ -21,5 +22,6 @@ export default class Template {
|
||||
refs.$layers = refs.$container.querySelector('.artplayer-layers');
|
||||
refs.$loading = refs.$container.querySelector('.artplayer-loading');
|
||||
refs.$notice = refs.$container.querySelector('.artplayer-notice');
|
||||
refs.$mask = refs.$container.querySelector('.artplayer-mask');
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user