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

add more file

Browse Source
This commit is contained in:
Harvey Zack committed 2018-10-18 15:05:18 +08:00
1 parent 506b34522b
commit 73283a838a
26 files changed
+435 -51
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/index.html
+1 -1
View File
@@ -27,7 +27,7 @@
<script>
var player = new Artplayer({
container: '.artplayer-app',
url: 'https://fansoop.com/wp-content/uploads/2018/10/fansoop-YUI-Again-subbed-web.mp4',
url: 'https://blog.zhw-island.com/cdn-assets/video/YUI-Again-subbed-web.mp4',
poster: './img/poster.png',
subtitle: './subtitle/dw_trailer_low.vtt'
});
docs/js/artplayer.js
+200 -21
View File
@@ -254,7 +254,7 @@
return element;
}
function verification(option) {
function validOption(option) {
errorHandle(option.container, '\'container\' option is required.');
errorHandle(option.url, '\'url\' option is required.');
errorHandle(typeof option.container === 'string' || option.container instanceof Element, "'container' option require 'string' or 'Element' type, but got '".concat(_typeof_1(option.container), "'."));
@@ -262,7 +262,7 @@
errorHandle(typeof option.poster === 'string', "'poster' option require 'string' type, but got '".concat(_typeof_1(option.poster), "'."));
errorHandle(typeof option.volume === 'number', "'volume' option require 'number' type, but got '".concat(_typeof_1(option.volume), "'."));
errorHandle(typeof option.autoplay === 'boolean', "'autoplay' option require 'boolean' type, but got '".concat(_typeof_1(option.autoplay), "'."));
errorHandle(['none', 'metadata', 'auto'].indexOf(option.preload) > -1, '\'preload\' option require one of \'none、metadata、auto\'.');
errorHandle(['none', 'metadata', 'auto'].indexOf(option.preload) > -1, "'preload' option require one of 'none\u3001metadata\u3001auto', but got '".concat(option.preload, "."));
errorHandle(typeof option.lang === 'string', "'lang' option require 'string' type, but got '".concat(_typeof_1(option.lang), "'."));
errorHandle(typeof option.type === 'string', "'type' option require 'string' type, but got '".concat(_typeof_1(option.type), "'."));
errorHandle(typeof option.mimeCodec === 'string', "'mimeCodec' option require 'string' type, but got '".concat(_typeof_1(option.mimeCodec), "'."));
@@ -390,11 +390,15 @@
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-subtitle\"></div>\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.$container.innerHTML = "\n <div class=\"artplayer-wrap\">\n <video class=\"artplayer-video\" webkit-playsinline playsinline></video>\n <div class=\"artplayer-subtitle\"></div>\n <div class=\"artplayer-layers\"></div>\n <div class=\"artplayer-mask\"></div>\n <div class=\"artplayer-bottom\">\n <div class=\"artplayer-progress\"></div>\n <div class=\"artplayer-controls\">\n <div class=\"artplayer-controls-left\"></div>\n <div class=\"artplayer-controls-right\"></div>\n </div>\n </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.$subtitle = refs.$container.querySelector('.artplayer-subtitle');
refs.$bottom = refs.$container.querySelector('.artplayer-bottom');
refs.$progress = refs.$container.querySelector('.artplayer-progress');
refs.$controls = refs.$container.querySelector('.artplayer-controls');
refs.$controlsLeft = refs.$container.querySelector('.artplayer-controls-left');
refs.$controlsRight = refs.$container.querySelector('.artplayer-controls-right');
refs.$layers = refs.$container.querySelector('.artplayer-layers');
refs.$loading = refs.$container.querySelector('.artplayer-loading');
refs.$notice = refs.$container.querySelector('.artplayer-notice');
@@ -465,11 +469,12 @@
value: function init() {
var option = this.art.option;
var $video = this.art.refs.$video;
$video.controls = false;
$video.controls = true;
$video.poster = option.poster;
$video.volume = clamp(option.volume, 0, 1);
$video.autoplay = option.autoplay;
$video.preload = option.preload;
$video.src = option.url;
}
}, {
key: "eventBind",
@@ -729,6 +734,82 @@
return Mse;
}();
function validControl(option) {
errorHandle(typeof option.control === 'function', "'control' option require 'function' type, but got '".concat(_typeof_1(option.control), "'."));
errorHandle(typeof option.disable === 'boolean', "'disable' option require 'boolean' type, but got '".concat(_typeof_1(option.disable), "'."));
errorHandle(typeof option.icon === 'string' || option.icon instanceof Element, "'icon' option require 'string' or 'Element' type, but got '".concat(_typeof_1(option.icon), "'."));
errorHandle(['top', 'left', 'right'].indexOf(option.position) > -1, "'position' option require one of 'top\u3001left\u3001right', but got '".concat(option.position, "'."));
errorHandle(typeof option.index === 'number', "'index' option require 'number' type, but got '".concat(_typeof_1(option.index), "'."));
}
var Danmu = function Danmu(art) {
classCallCheck(this, Danmu);
this.art = art;
};
var Fullscreen = function Fullscreen(art) {
classCallCheck(this, Fullscreen);
this.art = art;
};
var Highlight = function Highlight(art) {
classCallCheck(this, Highlight);
this.art = art;
};
var Pip = function Pip(art) {
classCallCheck(this, Pip);
this.art = art;
};
var PlayAndPause = function PlayAndPause(art) {
classCallCheck(this, PlayAndPause);
this.art = art;
};
var Progress = function Progress(art) {
classCallCheck(this, Progress);
this.art = art;
};
var Screenshot = function Screenshot(art) {
classCallCheck(this, Screenshot);
this.art = art;
};
var Subtitle = function Subtitle(art) {
classCallCheck(this, Subtitle);
this.art = art;
};
var Time = function Time(art) {
classCallCheck(this, Time);
this.art = art;
};
var Volume = function Volume(art) {
classCallCheck(this, Volume);
this.art = art;
};
var Setting = function Setting(art) {
classCallCheck(this, Setting);
this.art = art;
};
var id = 0;
var Controls =
/*#__PURE__*/
function () {
@@ -736,9 +817,106 @@
classCallCheck(this, Controls);
this.art = art;
this.init();
}
createClass(Controls, [{
key: "init",
value: function init() {
var _this = this;
this.progress = new Progress(this.art);
this.highlight = new Highlight(this.art);
this.screenshot = new Screenshot(this.art);
this.add({
control: PlayAndPause,
disable: false,
icon: 'PlayAndPause',
position: 'left',
index: 0
});
this.add({
control: Volume,
disable: false,
icon: 'Volume',
position: 'left',
index: 10
});
this.add({
control: Time,
disable: false,
icon: 'Time',
position: 'left',
index: 20
});
this.add({
control: Danmu,
disable: false,
icon: 'Danmu',
position: 'right',
index: 0
});
this.add({
control: Subtitle,
disable: false,
icon: 'Subtitle',
position: 'right',
index: 10
});
this.add({
control: Setting,
disable: false,
icon: 'Setting',
position: 'right',
index: 20
});
this.add({
control: Pip,
disable: false,
icon: 'Pip',
position: 'right',
index: 30
});
this.add({
control: Fullscreen,
disable: false,
icon: 'Fullscreen',
position: 'right',
index: 40
});
this.art.option.controls.forEach(function (item) {
_this.add(item);
});
}
}, {
key: "add",
value: function add(option) {
validControl(option);
var _this$art$refs = this.art.refs,
$progress = _this$art$refs.$progress,
$controlsLeft = _this$art$refs.$controlsLeft,
$controlsRight = _this$art$refs.$controlsRight;
if (!option.disable) {
id++;
var name = option.control.name.toLowerCase() || "control".concat(id);
var $control = document.createElement('div');
$control.setAttribute('class', "art-control art-control-".concat(name));
$control.setAttribute('data-control-index', option.index || id);
append($control, option.icon);
this[name] = new option.control(this.art);
this[name].ref = $control;
this[name].show = function show() {
$control.style.display = 'inline-block';
};
this[name].hide = function show() {
$control.style.display = 'none';
};
}
}
}, {
key: "show",
value: function show() {
var $wrap = this.art.refs.$wrap;
@@ -899,7 +1077,7 @@
return Contextmenu;
}();
var Danmu = function Danmu(art) {
var Danmu$1 = function Danmu(art) {
classCallCheck(this, Danmu);
this.art = art;
@@ -975,7 +1153,7 @@
var slicedToArray = _slicedToArray;
var Subtitle =
var Subtitle$1 =
/*#__PURE__*/
function () {
function Subtitle(art) {
@@ -1171,7 +1349,7 @@
return Hotkey;
}();
var id = 0;
var id$1 = 0;
var Layers =
/*#__PURE__*/
@@ -1202,11 +1380,11 @@
key: "add",
value: function add(option, callback) {
var refs = this.art.refs;
id++;
id$1++;
var $layer = document.createElement('div');
$layer.setAttribute('data-art-layer-id', id);
$layer.setAttribute('class', "art-layer art-layer-".concat(option.name || id));
$layer.style.zIndex = option.index || id;
$layer.setAttribute('data-art-layer-id', id$1);
$layer.setAttribute('class', "art-layer art-layer-".concat(option.name || id$1));
$layer.style.zIndex = option.index || id$1;
append($layer, option.html);
setStyle($layer, option.style || {});
refs.$layers.appendChild($layer);
@@ -1380,7 +1558,7 @@
return Mask;
}();
var id$1 = 0;
var id$2 = 0;
var instances = [];
var Artplayer =
@@ -1395,14 +1573,14 @@
_this = possibleConstructorReturn(this, getPrototypeOf(Artplayer).call(this));
_this.art.emit('init:start');
_this.emit('init:start');
_this.option = Object.assign({}, Artplayer.DEFAULTS, option);
verification(_this.option);
validOption(_this.option);
_this.init();
_this.art.emit('init:end');
_this.emit('init:end');
return _this;
}
@@ -1423,19 +1601,19 @@
this.template = new Template(this);
this.i18n = new I18n(this);
this.events = new Events(this);
this.player = new Player(this);
this.mse = new Mse(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.danmu = new Danmu(this);
this.subtitle = new Subtitle(this);
this.danmu = new Danmu$1(this);
this.subtitle = new Subtitle$1(this);
this.info = new Info(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++;
this.id = id$2++;
instances.push(this);
return this;
}
@@ -1445,7 +1623,7 @@
this.events.destroy();
this.refs.$container.innerHTML = '';
instances.splice(instances.indexOf(this), 1);
this.art.emit('destroy');
this.emit('destroy');
}
}], [{
key: "use",
@@ -1497,6 +1675,7 @@
hotkey: true,
subtitle: '',
subtitleStyle: {},
controls: [],
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/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/validOption.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/utils/validControl.js","../../src/controls/danmu.js","../../src/controls/fullscreen.js","../../src/controls/highlight.js","../../src/controls/pip.js","../../src/controls/playAndPause.js","../../src/controls/progress.js","../../src/controls/screenshot.js","../../src/controls/subtitle.js","../../src/controls/time.js","../../src/controls/volume.js","../../src/controls/setting.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 Line truncated
src/controls/danmu.js
+5
View File
@@ -0,0 +1,5 @@
export default class Danmu {
constructor(art) {
this.art = art;
}
}
src/controls/fullscreen.js
+5
View File
@@ -0,0 +1,5 @@
export default class Fullscreen {
constructor(art) {
this.art = art;
}
}
src/controls/highlight.js
+5
View File
@@ -0,0 +1,5 @@
export default class Highlight {
constructor(art) {
this.art = art;
}
}
src/controls/index.js
+111
View File
@@ -1,6 +1,117 @@
import { append } from '../utils';
import validControl from '../utils/validControl';
import Danmu from './danmu';
import Fullscreen from './fullscreen';
import Highlight from './highlight';
import Pip from './pip';
import PlayAndPause from './playAndPause';
import Progress from './progress';
import Screenshot from './screenshot';
import Subtitle from './subtitle';
import Time from './time';
import Volume from './volume';
import Setting from './setting';
let id = 0;
export default class Controls {
constructor(art) {
this.art = art;
this.init();
}
init() {
this.progress = new Progress(this.art);
this.highlight = new Highlight(this.art);
this.screenshot = new Screenshot(this.art);
this.add({
control: PlayAndPause,
disable: false,
icon: 'PlayAndPause',
position: 'left',
index: 0
});
this.add({
control: Volume,
disable: false,
icon: 'Volume',
position: 'left',
index: 10
});
this.add({
control: Time,
disable: false,
icon: 'Time',
position: 'left',
index: 20
});
this.add({
control: Danmu,
disable: false,
icon: 'Danmu',
position: 'right',
index: 0
});
this.add({
control: Subtitle,
disable: false,
icon: 'Subtitle',
position: 'right',
index: 10
});
this.add({
control: Setting,
disable: false,
icon: 'Setting',
position: 'right',
index: 20
});
this.add({
control: Pip,
disable: false,
icon: 'Pip',
position: 'right',
index: 30
});
this.add({
control: Fullscreen,
disable: false,
icon: 'Fullscreen',
position: 'right',
index: 40
});
this.art.option.controls.forEach(item => {
this.add(item);
});
}
add(option) {
validControl(option);
const { $progress, $controlsLeft, $controlsRight } = this.art.refs;
if (!option.disable) {
id++;
const name = option.control.name.toLowerCase() || `control${id}`;
const $control = document.createElement('div');
$control.setAttribute('class', `art-control art-control-${name}`);
$control.setAttribute('data-control-index', option.index || id);
append($control, option.icon);
this[name] = new option.control(this.art);
this[name].ref = $control;
this[name].show = function show() {
$control.style.display = 'inline-block';
};
this[name].hide = function show() {
$control.style.display = 'none';
};
}
}
show() {
src/controls/pip.js
+5
View File
@@ -0,0 +1,5 @@
export default class Pip {
constructor(art) {
this.art = art;
}
}
src/controls/playAndPause.js
+5
View File
@@ -0,0 +1,5 @@
export default class PlayAndPause {
constructor(art) {
this.art = art;
}
}
src/controls/progress.js
+5
View File
@@ -0,0 +1,5 @@
export default class Progress {
constructor(art) {
this.art = art;
}
}
src/controls/quality.js
View File
Whitespace-only changes.
src/controls/screenshot.js
+5
View File
@@ -0,0 +1,5 @@
export default class Screenshot {
constructor(art) {
this.art = art;
}
}
src/controls/setting.js
+5
View File
@@ -0,0 +1,5 @@
export default class Setting {
constructor(art) {
this.art = art;
}
}
src/controls/subtitle.js
+5
View File
@@ -0,0 +1,5 @@
export default class Subtitle {
constructor(art) {
this.art = art;
}
}
src/controls/time.js
+5
View File
@@ -0,0 +1,5 @@
export default class Time {
constructor(art) {
this.art = art;
}
}
src/controls/volume.js
+5
View File
@@ -0,0 +1,5 @@
export default class Volume {
constructor(art) {
this.art = art;
}
}
src/index.js
+7 -6
View File
@@ -1,5 +1,5 @@
import './style/index.scss';
import verification from './utils/verification';
import validOption from './utils/validOption';
import config from './config';
import Emitter from 'tiny-emitter';
import Template from './template';
@@ -24,11 +24,11 @@ export const instances = [];
class Artplayer extends Emitter {
constructor(option) {
super();
this.art.emit('init:start');
this.emit('init:start');
this.option = Object.assign({}, Artplayer.DEFAULTS, option);
verification(this.option);
validOption(this.option);
this.init();
this.art.emit('init:end');
this.emit('init:end');
}
static get version() {
@@ -56,6 +56,7 @@ class Artplayer extends Emitter {
hotkey: true,
subtitle: '',
subtitleStyle: {},
controls: [],
lang: navigator.language.toLowerCase()
};
}
@@ -92,7 +93,7 @@ class Artplayer extends Emitter {
this.i18n = new I18n(this);
this.events = new Events(this);
this.player = new Player(this);
this.mse = new Mse(this);
// this.mse = new Mse(this);
this.layers = new Layers(this);
this.controls = new Controls(this);
this.contextmenu = new Contextmenu(this);
@@ -113,7 +114,7 @@ class Artplayer extends Emitter {
this.events.destroy();
this.refs.$container.innerHTML = '';
instances.splice(instances.indexOf(this), 1);
this.art.emit('destroy');
this.emit('destroy');
}
}
src/layers.js
+2 -2
View File
@@ -34,13 +34,13 @@ export default class Layers {
}
show() {
const { refs: { $layers } } = this.art;
const { $layers } = this.art.refs;
$layers.style.display = 'block';
this.art.emit('layers:show', $layers);
}
hide() {
const { refs: { $layers } } = this.art;
const { $layers } = this.art.refs;
$layers.style.display = 'none';
this.art.emit('layers:hide', $layers);
}
src/loading.js
+2 -2
View File
@@ -13,13 +13,13 @@ export default class Loading {
}
hide() {
const { refs: { $loading } } = this.art;
const { $loading } = this.art.refs;
$loading.style.display = 'none';
this.art.emit('loading:hide', $loading);
}
show() {
const { refs: { $loading } } = this.art;
const { $loading } = this.art.refs;
$loading.style.display = 'flex';
this.art.emit('loading:show', $loading);
}
src/mask.js
+2 -2
View File
@@ -25,13 +25,13 @@ export default class Mask {
}
show() {
const { refs: { $mask } } = this.art;
const { $mask } = this.art.refs;
$mask.style.display = 'flex';
this.art.emit('mask:show', $mask);
}
hide() {
const { refs: { $mask } } = this.art;
const { $mask } = this.art.refs;
$mask.style.display = 'none';
this.art.emit('mask:show', $mask);
}
src/notice.js
+2 -2
View File
@@ -5,7 +5,7 @@ export default class Notice {
}
show(msg, autoHide) {
const { refs: { $notice } } = this.art;
const { $notice } = this.art.refs;
$notice.style.display = 'block';
$notice.innerHTML = msg instanceof Error ? msg.message.trim() : msg;
if (autoHide) {
@@ -18,7 +18,7 @@ export default class Notice {
}
hide() {
const { refs: { $notice } } = this.art;
const { $notice } = this.art.refs;
$notice.style.display = 'none';
this.art.emit('notice:hide', $notice);
}
src/player.js
+7 -7
View File
@@ -11,11 +11,12 @@ export default class Player {
init() {
const { option } = this.art;
const { $video } = this.art.refs;
$video.controls = false;
$video.controls = true;
$video.poster = option.poster;
$video.volume = clamp(option.volume, 0, 1);
$video.autoplay = option.autoplay;
$video.preload = option.preload;
$video.src = option.url;
}
eventBind() {
@@ -68,14 +69,14 @@ export default class Player {
}
play() {
const { refs: { $video } } = this.art;
const { $video } = this.art.refs;
const promise = $video.play();
this.art.emit('play', $video);
return promise;
}
pause() {
const { refs: { $video } } = this.art;
const { $video } = this.art.refs;
$video.pause();
this.art.emit('pause', $video);
}
@@ -89,7 +90,7 @@ export default class Player {
}
seek(time) {
const { refs: { $video } } = this.art;
const { $video } = this.art.refs;
let newTime = Math.max(time, 0);
if ($video.duration) {
newTime = Math.min(newTime, $video.duration);
@@ -104,11 +105,10 @@ export default class Player {
}
volume(percentage) {
const { refs: { $video } } = this.art;
const { $video } = this.art.refs;
if (percentage) {
$video.volume = clamp(percentage, 0, 1);
}
this.art.emit('volume', $video.volume);
}
@@ -129,7 +129,7 @@ export default class Player {
}
speed(rate) {
const { refs: { $video } } = this.art;
const { $video } = this.art.refs;
$video.playbackRate = rate;
this.art.emit('speed', rate);
}
src/subtitle.js
+3 -3
View File
@@ -46,19 +46,19 @@ export default class Subtitle {
}
show() {
const { refs: { $subtitle } } = this.art;
const { $subtitle } = this.art.refs;
$subtitle.style.display = 'block';
this.art.emit('subtitle:show', $subtitle);
}
hide() {
const { refs: { $subtitle } } = this.art;
const { $subtitle } = this.art.refs;
$subtitle.style.display = 'none';
this.art.emit('subtitle:hide', $subtitle);
}
switch(url) {
const { refs: { $track } } = this.art;
const { $track } = this.art.refs;
errorHandle(
getExt(url) === 'vtt',
`'url' option require 'vtt' format, but got '${getExt(url)}'.`
src/template.js
+11 -1
View File
@@ -12,7 +12,13 @@ export default class Template {
<div class="artplayer-subtitle"></div>
<div class="artplayer-layers"></div>
<div class="artplayer-mask"></div>
<div class="artplayer-controls"></div>
<div class="artplayer-bottom">
<div class="artplayer-progress"></div>
<div class="artplayer-controls">
<div class="artplayer-controls-left"></div>
<div class="artplayer-controls-right"></div>
</div>
</div>
<div class="artplayer-loading"></div>
<div class="artplayer-notice"></div>
</div>
@@ -20,7 +26,11 @@ export default class Template {
refs.$wrap = refs.$container.querySelector('.artplayer-wrap');
refs.$video = refs.$container.querySelector('.artplayer-video');
refs.$subtitle = refs.$container.querySelector('.artplayer-subtitle');
refs.$bottom = refs.$container.querySelector('.artplayer-bottom');
refs.$progress = refs.$container.querySelector('.artplayer-progress');
refs.$controls = refs.$container.querySelector('.artplayer-controls');
refs.$controlsLeft = refs.$container.querySelector('.artplayer-controls-left');
refs.$controlsRight = refs.$container.querySelector('.artplayer-controls-right');
refs.$layers = refs.$container.querySelector('.artplayer-layers');
refs.$loading = refs.$container.querySelector('.artplayer-loading');
refs.$notice = refs.$container.querySelector('.artplayer-notice');
src/utils/validControl.js
+28
View File
@@ -0,0 +1,28 @@
import { errorHandle } from '.';
export default function validControl(option) {
errorHandle(
typeof option.control === 'function',
`'control' option require 'function' type, but got '${typeof option.control}'.`
);
errorHandle(
typeof option.disable === 'boolean',
`'disable' option require 'boolean' type, but got '${typeof option.disable}'.`
);
errorHandle(
typeof option.icon === 'string' || option.icon instanceof Element,
`'icon' option require 'string' or 'Element' type, but got '${typeof option.icon}'.`
);
errorHandle(
['top', 'left', 'right'].indexOf(option.position) > -1,
`'position' option require one of 'top、left、right', but got '${option.position}'.`
);
errorHandle(
typeof option.index === 'number',
`'index' option require 'number' type, but got '${typeof option.index}'.`
);
}
src/utils/verification.js → src/utils/validOption.js
+3 -3
View File
@@ -1,6 +1,6 @@
import { errorHandle } from './index';
import { errorHandle } from '.';
export default function verification(option) {
export default function validOption(option) {
errorHandle(
option.container,
'\'container\' option is required.'
@@ -38,7 +38,7 @@ export default function verification(option) {
errorHandle(
['none', 'metadata', 'auto'].indexOf(option.preload) > -1,
'\'preload\' option require one of \'none、metadata、auto\'.'
`'preload' option require one of 'none、metadata、auto', but got '${option.preload}.`
);
errorHandle(