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

add more event

Browse Source
This commit is contained in:
Harvey Zack committed 2018-10-18 11:17:37 +08:00
1 parent b2159e7d4d
commit 506b34522b
14 files changed
+202 -77
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{position:absolute;z-index:1;left:0;top:0;right:0;bottom:0;width:100%;height:100%}.artplayer-wrap .artplayer-subtitle{position:absolute;z-index:2;bottom:40px;width:100%;padding:0 20px;text-align:center;color:#fff;text-shadow:.5px .5px .5px rgba(0,0,0,.5);font-size:20px;box-sizing:border-box}.artplayer-wrap .artplayer-layers{z-index:3}.artplayer-wrap .artplayer-layers,.artplayer-wrap .artplayer-mask{position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%}.artplayer-wrap .artplayer-mask{display:none;z-index:4;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)}
.artplayer-wrap{position:relative;width:100%;height:100%;text-align:left;overflow:hidden;font-family:Roboto,Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;-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{position:absolute;z-index:1;left:0;top:0;right:0;bottom:0;width:100%;height:100%}.artplayer-wrap .artplayer-subtitle{position:absolute;z-index:2;bottom:40px;width:100%;padding:0 20px;text-align:center;color:#fff;text-shadow:.5px .5px .5px rgba(0,0,0,.5);font-size:20px;box-sizing:border-box}.artplayer-wrap .artplayer-layers{z-index:3}.artplayer-wrap .artplayer-layers,.artplayer-wrap .artplayer-mask{position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%}.artplayer-wrap .artplayer-mask{display:none;z-index:4;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:200px;padding:5px 0;background:rgba(0,0,0,.8)}.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;text-shadow:0 0 2px rgba(0,0,0,.5)}.artplayer-wrap .artplayer-contextmenu a:hover{background-color:hsla(0,0%,100%,.1)}.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/index.html
+2 -2
View File
@@ -26,8 +26,8 @@
<script src="./js/artplayer.js"></script>
<script>
var player = new Artplayer({
container: document.querySelector('.artplayer-app'),
url: './video/frag_bunny.mp4',
container: '.artplayer-app',
url: 'https://fansoop.com/wp-content/uploads/2018/10/fansoop-YUI-Again-subbed-web.mp4',
poster: './img/poster.png',
subtitle: './subtitle/dw_trailer_low.vtt'
});
docs/js/artplayer.js
+101 -35
View File
@@ -530,12 +530,17 @@
}, {
key: "play",
value: function play() {
return this.art.refs.$video.play();
var $video = this.art.refs.$video;
var promise = $video.play();
this.art.emit('play', $video);
return promise;
}
}, {
key: "pause",
value: function pause() {
return this.art.refs.$video.pause();
var $video = this.art.refs.$video;
$video.pause();
this.art.emit('pause', $video);
}
}, {
key: "toggle",
@@ -548,15 +553,32 @@
}
}, {
key: "seek",
value: function seek() {//
value: function seek(time) {
var $video = this.art.refs.$video;
var newTime = Math.max(time, 0);
if ($video.duration) {
newTime = Math.min(newTime, $video.duration);
}
$video.currentTime = newTime;
this.art.emit('seek', newTime);
}
}, {
key: "currentTime",
value: function currentTime() {//
value: function currentTime() {
return this.art.refs.$video.currentTime;
}
}, {
key: "volume",
value: function volume() {//
value: function volume(percentage) {
var $video = this.art.refs.$video;
if (percentage) {
$video.volume = clamp(percentage, 0, 1);
}
this.art.emit('volume', $video.volume);
}
}, {
key: "switchVolumeIcon",
@@ -571,12 +593,15 @@
value: function switchQuality() {//
}
}, {
key: "switchSubtitle",
value: function switchSubtitle() {//
key: "resize",
value: function resize() {//
}
}, {
key: "speed",
value: function speed() {//
value: function speed(rate) {
var $video = this.art.refs.$video;
$video.playbackRate = rate;
this.art.emit('speed', rate);
}
}]);
@@ -678,12 +703,15 @@
var _this3 = this;
var _this$art2 = this.art,
option = _this$art2.option,
url = _this$art2.option.url,
notice = _this$art2.notice,
i18n = _this$art2.i18n,
loading = _this$art2.loading;
request(option.url).then(function (response) {
this.art.emit('player:fetch:start', url);
request(url).then(function (response) {
_this3.sourceBuffer.appendBuffer(response);
_this3.art.emit('player:fetch:success', url);
}).catch(function (err) {
if (_this3.repeat++ < _this3.maxRepeat) {
_this3.fetchUrl();
@@ -691,6 +719,8 @@
notice.show(i18n.get('Video load failed'));
console.warn(err);
loading.hide();
_this3.art.emit('player:fetch:failure', url);
}
});
}
@@ -747,8 +777,8 @@
proxy = _this$art.events.proxy;
option.contextmenu.push({
text: i18n.get('Video info'),
click: function click(art) {
art.info.show();
click: function click() {
_this.art.info.show();
}
}, {
text: i18n.get('About author'),
@@ -834,11 +864,11 @@
var menuTop = mouseY - cTop;
if (mouseX + mWidth > cLeft + cWidth) {
menuLeft -= mWidth;
menuLeft = cWidth - mWidth;
}
if (mouseY + mHeight > cTop + cHeight) {
menuTop -= mHeight;
menuTop = cHeight - mHeight;
}
refs.$contextmenu.style.left = "".concat(menuLeft, "px");
@@ -847,14 +877,22 @@
}, {
key: "hide",
value: function hide() {
var refs = this.art.refs;
refs.$contextmenu && (refs.$contextmenu.style.display = 'none');
var $contextmenu = this.art.refs.$contextmenu;
if ($contextmenu) {
$contextmenu.style.display = 'none';
this.art.emit('contextmenu:hide', $contextmenu);
}
}
}, {
key: "show",
value: function show() {
var refs = this.art.refs;
refs.$contextmenu && (refs.$contextmenu.style.display = 'block');
var $contextmenu = this.art.refs.$contextmenu;
if ($contextmenu) {
$contextmenu.style.display = 'block';
this.art.emit('contextmenu:show', $contextmenu);
}
}
}]);
@@ -954,6 +992,8 @@
createClass(Subtitle, [{
key: "init",
value: function init() {
var _this = this;
var _this$art = this.art,
proxy = _this$art.events.proxy,
_this$art$option = _this$art.option,
@@ -987,24 +1027,33 @@
return "<p>".concat(item, "</p>");
}).join('');
}
_this.art.emit('subtitle:update', $subtitle);
});
}
}
}, {
key: "show",
value: function show() {
this.art.refs.$subtitle.style.display = 'block';
var $subtitle = this.art.refs.$subtitle;
$subtitle.style.display = 'block';
this.art.emit('subtitle:show', $subtitle);
}
}, {
key: "hide",
value: function hide() {
this.art.refs.$subtitle.style.display = 'none';
var $subtitle = this.art.refs.$subtitle;
$subtitle.style.display = 'none';
this.art.emit('subtitle:hide', $subtitle);
}
}, {
key: "change",
value: function change(url) {
key: "switch",
value: function _switch(url) {
var $track = this.art.refs.$track;
errorHandle(getExt(url) === 'vtt', "'url' option require 'vtt' format, but got '".concat(getExt(url), "'."));
this.art.refs.$track.src = url;
errorHandle($track, 'You need to initialize the subtitle option first.');
$track.src = url;
this.art.emit('subtitle:switch', url);
}
}]);
@@ -1161,17 +1210,22 @@
append($layer, option.html);
setStyle($layer, option.style || {});
refs.$layers.appendChild($layer);
this.art.emit('layers:add', $layer);
callback && callback($layer);
}
}, {
key: "show",
value: function show() {
this.art.refs.$layers.style.display = 'block';
var $layers = this.art.refs.$layers;
$layers.style.display = 'block';
this.art.emit('layers:show', $layers);
}
}, {
key: "hide",
value: function hide() {
this.art.refs.$layers.style.display = 'none';
var $layers = this.art.refs.$layers;
$layers.style.display = 'none';
this.art.emit('layers:hide', $layers);
}
}]);
@@ -1218,22 +1272,21 @@
var _this$art = this.art,
option = _this$art.option,
$loading = _this$art.refs.$loading;
if (option.loading) {
append($loading, option.loading);
} else {
append($loading, icons$1.loading);
}
append($loading, option.loading || icons$1.loading);
}
}, {
key: "hide",
value: function hide() {
this.art.refs.$loading.style.display = 'none';
var $loading = this.art.refs.$loading;
$loading.style.display = 'none';
this.art.emit('loading:hide', $loading);
}
}, {
key: "show",
value: function show() {
this.art.refs.$loading.style.display = 'flex';
var $loading = this.art.refs.$loading;
$loading.style.display = 'flex';
this.art.emit('loading:show', $loading);
}
}]);
@@ -1265,12 +1318,15 @@
_this.hide();
}, 1000);
}
this.art.emit('notice:show', $notice);
}
}, {
key: "hide",
value: function hide() {
var $notice = this.art.refs.$notice;
$notice.style.display = 'none';
this.art.emit('notice:hide', $notice);
}
}]);
@@ -1308,12 +1364,16 @@
}, {
key: "show",
value: function show() {
this.art.refs.$mask.style.display = 'flex';
var $mask = this.art.refs.$mask;
$mask.style.display = 'flex';
this.art.emit('mask:show', $mask);
}
}, {
key: "hide",
value: function hide() {
this.art.refs.$mask.style.display = 'none';
var $mask = this.art.refs.$mask;
$mask.style.display = 'none';
this.art.emit('mask:show', $mask);
}
}]);
@@ -1334,11 +1394,16 @@
classCallCheck(this, Artplayer);
_this = possibleConstructorReturn(this, getPrototypeOf(Artplayer).call(this));
_this.art.emit('init:start');
_this.option = Object.assign({}, Artplayer.DEFAULTS, option);
verification(_this.option);
_this.init();
_this.art.emit('init:end');
return _this;
}
@@ -1380,6 +1445,7 @@
this.events.destroy();
this.refs.$container.innerHTML = '';
instances.splice(instances.indexOf(this), 1);
this.art.emit('destroy');
}
}], [{
key: "use",
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/danmu.js","../../src/info.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/subtitle.js","../../src/events.js","../../src/hotkey.js","../../src/layers.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
{"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","../../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/subtitle.js","../../src/events.js","../../src/hotkey.js","../../src/layers.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
+14 -9
View File
@@ -17,8 +17,8 @@ export default class Contextmenu {
option.contextmenu.push(
{
text: i18n.get('Video info'),
click: art => {
art.info.show();
click: () => {
this.art.info.show();
}
},
{
@@ -88,16 +88,15 @@ export default class Contextmenu {
const mouseY = event.clientY;
const { height: cHeight, width: cWidth, left: cLeft, top: cTop } = refs.$container.getBoundingClientRect();
const { height: mHeight, width: mWidth } = refs.$contextmenu.getBoundingClientRect();
let menuLeft = mouseX - cLeft;
let menuTop = mouseY - cTop;
if (mouseX + mWidth > cLeft + cWidth) {
menuLeft -= mWidth;
menuLeft = cWidth - mWidth;
}
if (mouseY + mHeight > cTop + cHeight) {
menuTop -= mHeight;
menuTop = cHeight - mHeight;
}
refs.$contextmenu.style.left = `${menuLeft}px`;
@@ -105,12 +104,18 @@ export default class Contextmenu {
}
hide() {
const { refs } = this.art;
refs.$contextmenu && (refs.$contextmenu.style.display = 'none');
const { refs: { $contextmenu } } = this.art;
if ($contextmenu) {
$contextmenu.style.display = 'none';
this.art.emit('contextmenu:hide', $contextmenu);
}
}
show() {
const { refs } = this.art;
refs.$contextmenu && (refs.$contextmenu.style.display = 'block');
const { refs: { $contextmenu } } = this.art;
if ($contextmenu) {
$contextmenu.style.display = 'block';
this.art.emit('contextmenu:show', $contextmenu);
}
}
}
src/index.js
+3
View File
@@ -24,9 +24,11 @@ export const instances = [];
class Artplayer extends Emitter {
constructor(option) {
super();
this.art.emit('init:start');
this.option = Object.assign({}, Artplayer.DEFAULTS, option);
verification(this.option);
this.init();
this.art.emit('init:end');
}
static get version() {
@@ -111,6 +113,7 @@ class Artplayer extends Emitter {
this.events.destroy();
this.refs.$container.innerHTML = '';
instances.splice(instances.indexOf(this), 1);
this.art.emit('destroy');
}
}
src/layers.js
+7 -2
View File
@@ -29,14 +29,19 @@ export default class Layers {
append($layer, option.html);
setStyle($layer, option.style || {});
refs.$layers.appendChild($layer);
this.art.emit('layers:add', $layer);
callback && callback($layer);
}
show() {
this.art.refs.$layers.style.display = 'block';
const { refs: { $layers } } = this.art;
$layers.style.display = 'block';
this.art.emit('layers:show', $layers);
}
hide() {
this.art.refs.$layers.style.display = 'none';
const { refs: { $layers } } = this.art;
$layers.style.display = 'none';
this.art.emit('layers:hide', $layers);
}
}
src/loading.js
+7 -7
View File
@@ -9,18 +9,18 @@ export default class Loading {
init() {
const { option, refs: { $loading } } = this.art;
if (option.loading) {
append($loading, option.loading);
} else {
append($loading, icons.loading);
}
append($loading, option.loading || icons.loading);
}
hide() {
this.art.refs.$loading.style.display = 'none';
const { refs: { $loading } } = this.art;
$loading.style.display = 'none';
this.art.emit('loading:hide', $loading);
}
show() {
this.art.refs.$loading.style.display = 'flex';
const { refs: { $loading } } = this.art;
$loading.style.display = 'flex';
this.art.emit('loading:show', $loading);
}
}
src/mask.js
+6 -2
View File
@@ -25,10 +25,14 @@ export default class Mask {
}
show() {
this.art.refs.$mask.style.display = 'flex';
const { refs: { $mask } } = this.art;
$mask.style.display = 'flex';
this.art.emit('mask:show', $mask);
}
hide() {
this.art.refs.$mask.style.display = 'none';
const { refs: { $mask } } = this.art;
$mask.style.display = 'none';
this.art.emit('mask:show', $mask);
}
}
src/mse.js
+5 -2
View File
@@ -91,10 +91,12 @@ export default class Mse {
}
fetchUrl() {
const { option, notice, i18n, loading } = this.art;
request(option.url)
const { option: { url }, notice, i18n, loading } = this.art;
this.art.emit('player:fetch:start', url);
request(url)
.then(response => {
this.sourceBuffer.appendBuffer(response);
this.art.emit('player:fetch:success', url);
})
.catch(err => {
if (this.repeat++ < this.maxRepeat) {
@@ -103,6 +105,7 @@ export default class Mse {
notice.show(i18n.get('Video load failed'));
console.warn(err);
loading.hide();
this.art.emit('player:fetch:failure', url);
}
});
}
src/notice.js
+2
View File
@@ -14,10 +14,12 @@ export default class Notice {
this.hide();
}, 1000);
}
this.art.emit('notice:show', $notice);
}
hide() {
const { refs: { $notice } } = this.art;
$notice.style.display = 'none';
this.art.emit('notice:hide', $notice);
}
}
src/player.js
+29 -10
View File
@@ -68,11 +68,16 @@ export default class Player {
}
play() {
return this.art.refs.$video.play();
const { refs: { $video } } = this.art;
const promise = $video.play();
this.art.emit('play', $video);
return promise;
}
pause() {
return this.art.refs.$video.pause();
const { refs: { $video } } = this.art;
$video.pause();
this.art.emit('pause', $video);
}
toggle() {
@@ -83,16 +88,28 @@ export default class Player {
}
}
seek() {
//
seek(time) {
const { refs: { $video } } = this.art;
let newTime = Math.max(time, 0);
if ($video.duration) {
newTime = Math.min(newTime, $video.duration);
}
$video.currentTime = newTime;
this.art.emit('seek', newTime);
}
currentTime() {
//
return this.art.refs.$video.currentTime;
}
volume() {
//
volume(percentage) {
const { refs: { $video } } = this.art;
if (percentage) {
$video.volume = clamp(percentage, 0, 1);
}
this.art.emit('volume', $video.volume);
}
switchVolumeIcon() {
@@ -107,11 +124,13 @@ export default class Player {
//
}
switchSubtitle() {
resize() {
//
}
speed() {
//
speed(rate) {
const { refs: { $video } } = this.art;
$video.playbackRate = rate;
this.art.emit('speed', rate);
}
}
src/style/index.scss
+9 -2
View File
@@ -6,6 +6,8 @@
height: 100%;
text-align: left;
overflow: hidden;
font-family: Roboto,Arial,Helvetica,sans-serif;
-webkit-font-smoothing: antialiased;
user-select: none;
.art-icon {
@@ -79,9 +81,9 @@
z-index: 7;
left: 0;
top: 0;
width: 170px;
width: 200px;
padding: 5px 0;
background:rgba(0, 0, 0, 0.75);
background:rgba(0, 0, 0, 0.8);
a {
font-size: 13px;
display: block;
@@ -91,6 +93,11 @@
text-overflow: ellipsis;
white-space: nowrap;
text-decoration: none;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
&:hover {
background-color: rgba(255,255,255,.1);
}
}
}
src/subtitle.js
+15 -4
View File
@@ -40,23 +40,34 @@ export default class Subtitle {
.map(item => `<p>${item}</p>`)
.join('');
}
this.art.emit('subtitle:update', $subtitle);
});
}
}
show() {
this.art.refs.$subtitle.style.display = 'block';
const { refs: { $subtitle } } = this.art;
$subtitle.style.display = 'block';
this.art.emit('subtitle:show', $subtitle);
}
hide() {
this.art.refs.$subtitle.style.display = 'none';
const { refs: { $subtitle } } = this.art;
$subtitle.style.display = 'none';
this.art.emit('subtitle:hide', $subtitle);
}
change(url) {
switch(url) {
const { refs: { $track } } = this.art;
errorHandle(
getExt(url) === 'vtt',
`'url' option require 'vtt' format, but got '${getExt(url)}'.`
);
this.art.refs.$track.src = url;
errorHandle(
$track,
'You need to initialize the subtitle option first.'
);
$track.src = url;
this.art.emit('subtitle:switch', url);
}
}