mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-08 10:56:15 -08:00
bugfix
This commit is contained in:
Harvey Zack committed
1 parent
73283a838a
commit
ca9fa0981b
21 files changed
+295
-105
No files matched your search
@@ -1 +1,3 @@
|
||||
.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)}
|
||||
.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)}
|
||||
button[data-balloon]{overflow:visible}[data-balloon]{position:relative;cursor:pointer}[data-balloon]:after{font-family:sans-serif!important;font-weight:400!important;font-style:normal!important;text-shadow:none!important;font-size:12px!important;background:rgba(17,17,17,.9);border-radius:4px;color:#fff;content:attr(data-balloon);padding:.5em 1em;white-space:nowrap}[data-balloon]:after,[data-balloon]:before{filter:alpha(opactiy=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-moz-opacity:0;-khtml-opacity:0;opacity:0;pointer-events:none;transition:all .18s ease-out .18s;position:absolute;z-index:10}[data-balloon]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='M2.658 0h32.004c-6 0-11.627 12.002-16.002 12.002C14.285 12.002 8.594 0 2.658 0z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;content:""}[data-balloon]:hover:after,[data-balloon]:hover:before,[data-balloon][data-balloon-visible]:after,[data-balloon][data-balloon-visible]:before{filter:alpha(opactiy=100);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";-moz-opacity:1;-khtml-opacity:1;opacity:1;pointer-events:auto}[data-balloon].font-awesome:after{font-family:FontAwesome}[data-balloon][data-balloon-break]:after{white-space:pre}[data-balloon][data-balloon-blunt]:after,[data-balloon][data-balloon-blunt]:before{transition:none}[data-balloon][data-balloon-pos=up]:after{margin-bottom:11px}[data-balloon][data-balloon-pos=up]:after,[data-balloon][data-balloon-pos=up]:before{bottom:100%;left:50%;-webkit-transform:translate(-50%,10px);transform:translate(-50%,10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up]:before{margin-bottom:5px}[data-balloon][data-balloon-pos=up]:hover:after,[data-balloon][data-balloon-pos=up]:hover:before,[data-balloon][data-balloon-pos=up][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up][data-balloon-visible]:before{-webkit-transform:translate(-50%);transform:translate(-50%)}[data-balloon][data-balloon-pos=up-left]:after{left:0;margin-bottom:11px}[data-balloon][data-balloon-pos=up-left]:after,[data-balloon][data-balloon-pos=up-left]:before{bottom:100%;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up-left]:before{left:5px;margin-bottom:5px}[data-balloon][data-balloon-pos=up-left]:hover:after,[data-balloon][data-balloon-pos=up-left]:hover:before,[data-balloon][data-balloon-pos=up-left][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up-left][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=up-right]:after{right:0;margin-bottom:11px}[data-balloon][data-balloon-pos=up-right]:after,[data-balloon][data-balloon-pos=up-right]:before{bottom:100%;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up-right]:before{right:5px;margin-bottom:5px}[data-balloon][data-balloon-pos=up-right]:hover:after,[data-balloon][data-balloon-pos=up-right]:hover:before,[data-balloon][data-balloon-pos=up-right][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up-right][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=down]:after{margin-top:11px}[data-balloon][data-balloon-pos=down]:after,[data-balloon][data-balloon-pos=down]:before{left:50%;top:100%;-webkit-transform:translate(-50%,-10px);transform:translate(-50%,-10px)}[data-balloon][data-balloon-pos=down]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;margin-top:5px}[data-balloon][data-balloon-pos=down]:hover:after,[data-balloon][data-balloon-pos=down]:hover:before,[data-balloon][data-balloon-pos=down][data-balloon-visible]:after,[data-balloon][data-balloon-pos=down][data-balloon-visible]:before{-webkit-transform:translate(-50%);transform:translate(-50%)}[data-balloon][data-balloon-pos=down-left]:after{left:0;margin-top:11px;top:100%;-webkit-transform:translateY(-10px);transform:translateY(-10px)}[data-balloon][data-balloon-pos=down-left]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;left:5px;margin-top:5px;top:100%;-webkit-transform:translateY(-10px);transform:translateY(-10px)}[data-balloon][data-balloon-pos=dLine truncated
|
||||
button[data-balloon]{overflow:visible}[data-balloon]{position:relative;cursor:pointer}[data-balloon]:after{font-family:sans-serif!important;font-weight:400!important;font-style:normal!important;text-shadow:none!important;font-size:12px!important;background:rgba(17,17,17,.9);border-radius:4px;color:#fff;content:attr(data-balloon);padding:.5em 1em;white-space:nowrap}[data-balloon]:after,[data-balloon]:before{filter:alpha(opactiy=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-moz-opacity:0;-khtml-opacity:0;opacity:0;pointer-events:none;transition:all .18s ease-out .18s;position:absolute;z-index:10}[data-balloon]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M2.658 0h32.004c-6 0-11.627 12.002-16.002 12.002C14.285 12.002 8.594 0 2.658 0z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;content:""}[data-balloon]:hover:after,[data-balloon]:hover:before,[data-balloon][data-balloon-visible]:after,[data-balloon][data-balloon-visible]:before{filter:alpha(opactiy=100);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";-moz-opacity:1;-khtml-opacity:1;opacity:1;pointer-events:auto}[data-balloon].font-awesome:after{font-family:FontAwesome}[data-balloon][data-balloon-break]:after{white-space:pre}[data-balloon][data-balloon-blunt]:after,[data-balloon][data-balloon-blunt]:before{transition:none}[data-balloon][data-balloon-pos=up]:after{margin-bottom:11px}[data-balloon][data-balloon-pos=up]:after,[data-balloon][data-balloon-pos=up]:before{bottom:100%;left:50%;-webkit-transform:translate(-50%,10px);transform:translate(-50%,10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up]:before{margin-bottom:5px}[data-balloon][data-balloon-pos=up]:hover:after,[data-balloon][data-balloon-pos=up]:hover:before,[data-balloon][data-balloon-pos=up][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up][data-balloon-visible]:before{-webkit-transform:translate(-50%);transform:translate(-50%)}[data-balloon][data-balloon-pos=up-left]:after{left:0;margin-bottom:11px}[data-balloon][data-balloon-pos=up-left]:after,[data-balloon][data-balloon-pos=up-left]:before{bottom:100%;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up-left]:before{left:5px;margin-bottom:5px}[data-balloon][data-balloon-pos=up-left]:hover:after,[data-balloon][data-balloon-pos=up-left]:hover:before,[data-balloon][data-balloon-pos=up-left][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up-left][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=up-right]:after{right:0;margin-bottom:11px}[data-balloon][data-balloon-pos=up-right]:after,[data-balloon][data-balloon-pos=up-right]:before{bottom:100%;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up-right]:before{right:5px;margin-bottom:5px}[data-balloon][data-balloon-pos=up-right]:hover:after,[data-balloon][data-balloon-pos=up-right]:hover:before,[data-balloon][data-balloon-pos=up-right][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up-right][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=down]:after{margin-top:11px}[data-balloon][data-balloon-pos=down]:after,[data-balloon][data-balloon-pos=down]:before{left:50%;top:100%;-webkit-transform:translate(-50%,-10px);transform:translate(-50%,-10px)}[data-balloon][data-balloon-pos=down]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;margin-top:5px}[data-balloon][data-balloon-pos=down]:hover:after,[data-balloon][data-balloon-pos=down]:hover:before,[data-balloon][data-balloon-pos=down][data-balloon-visible]:after,[data-balloon][data-balloon-pos=down][data-balloon-visible]:before{-webkit-transform:translate(-50%);transform:translate(-50%)}[data-balloon][data-balloon-pos=down-left]:after{left:0;margin-top:11px;top:100%;-webkit-transform:translateY(-10px);transform:translateY(-10px)}[data-balloon][data-balloon-pos=down-left]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;left:5px;margin-top:5px;top:100%;-webkit-transform:translateY(-10px);transform:translateY(-10px)}[data-balloon][data-balloon-pos=down-left]Line truncated
|
||||
+3
-1
@@ -29,7 +29,9 @@
|
||||
container: '.artplayer-app',
|
||||
url: 'https://blog.zhw-island.com/cdn-assets/video/YUI-Again-subbed-web.mp4',
|
||||
poster: './img/poster.png',
|
||||
subtitle: './subtitle/dw_trailer_low.vtt'
|
||||
subtitle: {
|
||||
url: './subtitle/dw_trailer_low.vtt'
|
||||
}
|
||||
});
|
||||
|
||||
player.layers.add({
|
||||
|
||||
+143
-50
@@ -271,8 +271,8 @@
|
||||
errorHandle(typeof option.loading === 'string' || option.loading instanceof Element, "'loading' option require 'string' type, but got '".concat(_typeof_1(option.loading), "'."));
|
||||
errorHandle(typeof option.theme === 'string', "'theme' option require 'string' type, but got '".concat(_typeof_1(option.theme), "'."));
|
||||
errorHandle(typeof option.hotkey === 'boolean', "'hotkey' option require 'boolean' type, but got '".concat(_typeof_1(option.hotkey), "'."));
|
||||
errorHandle(typeof option.subtitle === 'string', "'subtitle' option require 'string' type, but got '".concat(_typeof_1(option.subtitle), "'."));
|
||||
errorHandle(Object.prototype.toString.call(option.subtitleStyle) === '[object Object]', "'subtitleStyle' option require 'object' type, but got '".concat(_typeof_1(option.subtitleStyle), "'."));
|
||||
errorHandle(Object.prototype.toString.call(option.subtitle) === '[object Object]', "'subtitle' option require 'object' type, but got '".concat(_typeof_1(option.subtitle), "'."));
|
||||
errorHandle(Array.isArray(option.controls), "'controls' option require 'array' type, but got '".concat(_typeof_1(option.controls), "'."));
|
||||
}
|
||||
|
||||
var mimeCodec = {
|
||||
@@ -737,75 +737,86 @@
|
||||
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(typeof option.html === 'string' || option.html instanceof Element, "'html' option require 'string' or 'Element' type, but got '".concat(_typeof_1(option.html), "'."));
|
||||
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) {
|
||||
var Danmu = function Danmu(art, option) {
|
||||
classCallCheck(this, Danmu);
|
||||
|
||||
this.art = art;
|
||||
this.option = option;
|
||||
};
|
||||
|
||||
var Fullscreen = function Fullscreen(art) {
|
||||
var Fullscreen = function Fullscreen(art, option) {
|
||||
classCallCheck(this, Fullscreen);
|
||||
|
||||
this.art = art;
|
||||
this.option = option;
|
||||
};
|
||||
|
||||
var Highlight = function Highlight(art) {
|
||||
var Highlight = function Highlight(art, option) {
|
||||
classCallCheck(this, Highlight);
|
||||
|
||||
this.art = art;
|
||||
this.option = option;
|
||||
};
|
||||
|
||||
var Pip = function Pip(art) {
|
||||
var Pip = function Pip(art, option) {
|
||||
classCallCheck(this, Pip);
|
||||
|
||||
this.art = art;
|
||||
this.option = option;
|
||||
};
|
||||
|
||||
var PlayAndPause = function PlayAndPause(art) {
|
||||
var PlayAndPause = function PlayAndPause(art, option) {
|
||||
classCallCheck(this, PlayAndPause);
|
||||
|
||||
this.art = art;
|
||||
this.option = option;
|
||||
};
|
||||
|
||||
var Progress = function Progress(art) {
|
||||
var Progress = function Progress(art, option) {
|
||||
classCallCheck(this, Progress);
|
||||
|
||||
this.art = art;
|
||||
this.option = option;
|
||||
};
|
||||
|
||||
var Screenshot = function Screenshot(art) {
|
||||
var Screenshot = function Screenshot(art, option) {
|
||||
classCallCheck(this, Screenshot);
|
||||
|
||||
this.art = art;
|
||||
this.option = option;
|
||||
};
|
||||
|
||||
var Subtitle = function Subtitle(art) {
|
||||
var Subtitle = function Subtitle(art, option) {
|
||||
classCallCheck(this, Subtitle);
|
||||
|
||||
this.art = art;
|
||||
this.option = option;
|
||||
};
|
||||
|
||||
var Time = function Time(art) {
|
||||
var Time = function Time(art, option) {
|
||||
classCallCheck(this, Time);
|
||||
|
||||
this.art = art;
|
||||
this.option = option;
|
||||
};
|
||||
|
||||
var Volume = function Volume(art) {
|
||||
var Volume = function Volume(art, option) {
|
||||
classCallCheck(this, Volume);
|
||||
|
||||
this.art = art;
|
||||
this.option = option;
|
||||
};
|
||||
|
||||
var Setting = function Setting(art) {
|
||||
var Setting = function Setting(art, option) {
|
||||
classCallCheck(this, Setting);
|
||||
|
||||
this.art = art;
|
||||
this.option = option;
|
||||
};
|
||||
|
||||
var id = 0;
|
||||
@@ -817,7 +828,13 @@
|
||||
classCallCheck(this, Controls);
|
||||
|
||||
this.art = art;
|
||||
this.$map = {
|
||||
top: [],
|
||||
left: [],
|
||||
right: []
|
||||
};
|
||||
this.init();
|
||||
this.mount();
|
||||
}
|
||||
|
||||
createClass(Controls, [{
|
||||
@@ -825,62 +842,88 @@
|
||||
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: Progress,
|
||||
disable: false,
|
||||
html: 'Progress',
|
||||
position: 'top',
|
||||
index: 0
|
||||
});
|
||||
this.add({
|
||||
control: Highlight,
|
||||
disable: false,
|
||||
html: 'Highlight',
|
||||
position: 'top',
|
||||
index: 10
|
||||
});
|
||||
this.add({
|
||||
control: Screenshot,
|
||||
disable: false,
|
||||
html: 'Screenshot',
|
||||
position: 'top',
|
||||
index: 20
|
||||
});
|
||||
this.add({
|
||||
control: PlayAndPause,
|
||||
disable: false,
|
||||
icon: 'PlayAndPause',
|
||||
html: 'PlayAndPause',
|
||||
tooltip: 'PlayAndPause',
|
||||
position: 'left',
|
||||
index: 0
|
||||
});
|
||||
this.add({
|
||||
control: Volume,
|
||||
disable: false,
|
||||
icon: 'Volume',
|
||||
html: 'Volume',
|
||||
tooltip: 'Volume',
|
||||
position: 'left',
|
||||
index: 10
|
||||
});
|
||||
this.add({
|
||||
control: Time,
|
||||
disable: false,
|
||||
icon: 'Time',
|
||||
html: 'Time',
|
||||
tooltip: 'Volume',
|
||||
position: 'left',
|
||||
index: 20
|
||||
});
|
||||
this.add({
|
||||
control: Danmu,
|
||||
disable: false,
|
||||
icon: 'Danmu',
|
||||
html: 'Danmu',
|
||||
tooltip: 'Danmu',
|
||||
position: 'right',
|
||||
index: 0
|
||||
});
|
||||
this.add({
|
||||
control: Subtitle,
|
||||
disable: false,
|
||||
icon: 'Subtitle',
|
||||
html: 'Subtitle',
|
||||
tooltip: 'Subtitle',
|
||||
position: 'right',
|
||||
index: 10
|
||||
});
|
||||
this.add({
|
||||
control: Setting,
|
||||
disable: false,
|
||||
icon: 'Setting',
|
||||
html: 'Setting',
|
||||
tooltip: 'Setting',
|
||||
position: 'right',
|
||||
index: 20
|
||||
});
|
||||
this.add({
|
||||
control: Pip,
|
||||
disable: false,
|
||||
icon: 'Pip',
|
||||
html: 'Pip',
|
||||
tooltip: 'Pip',
|
||||
position: 'right',
|
||||
index: 30
|
||||
});
|
||||
this.add({
|
||||
control: Fullscreen,
|
||||
disable: false,
|
||||
icon: 'Fullscreen',
|
||||
html: 'Fullscreen',
|
||||
tooltip: 'Fullscreen',
|
||||
position: 'right',
|
||||
index: 40
|
||||
});
|
||||
@@ -892,30 +935,80 @@
|
||||
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';
|
||||
};
|
||||
$control.setAttribute('data-control-index', String(option.index) || id);
|
||||
setStyle($control, option.style || {});
|
||||
append($control, option.html);
|
||||
option.ref = $control;
|
||||
this.commonMethod(option);
|
||||
this[name] = new option.control(this.art, option);
|
||||
this.$map[option.position].push($control);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: "mount",
|
||||
value: function mount() {
|
||||
var _this2 = this;
|
||||
|
||||
var _this$art$refs = this.art.refs,
|
||||
$progress = _this$art$refs.$progress,
|
||||
$controlsLeft = _this$art$refs.$controlsLeft,
|
||||
$controlsRight = _this$art$refs.$controlsRight;
|
||||
Object.keys(this.$map).forEach(function (key) {
|
||||
var $list = _this2.$map[key].sort(function (a, b) {
|
||||
return Number(a.dataset.controlIndex) - Number(b.dataset.controlIndex);
|
||||
});
|
||||
|
||||
$list.forEach(function ($control) {
|
||||
switch (key) {
|
||||
case 'top':
|
||||
$progress.appendChild($control);
|
||||
break;
|
||||
|
||||
case 'left':
|
||||
$controlsLeft.appendChild($control);
|
||||
break;
|
||||
|
||||
case 'right':
|
||||
$controlsRight.appendChild($control);
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: "commonMethod",
|
||||
value: function commonMethod(option) {
|
||||
var _this3 = this;
|
||||
|
||||
Object.defineProperty(option.control.prototype, 'hide', {
|
||||
value: function value() {
|
||||
option.ref.style.display = 'none';
|
||||
|
||||
_this3.art.emit('control:hide', option.ref);
|
||||
}
|
||||
});
|
||||
Object.defineProperty(option.control.prototype, 'show', {
|
||||
value: function value() {
|
||||
option.ref.style.display = option.position === 'top' ? 'block' : 'inline-block';
|
||||
|
||||
_this3.art.emit('control:show', option.ref);
|
||||
}
|
||||
});
|
||||
Object.defineProperty(option.control.prototype, 'addMenu', {
|
||||
value: function value(menus) {
|
||||
console.log(menus);
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: "show",
|
||||
value: function show() {
|
||||
@@ -1162,7 +1255,7 @@
|
||||
this.art = art;
|
||||
|
||||
if (this.art.option.subtitle) {
|
||||
errorHandle(getExt(this.art.option.subtitle) === 'vtt', "'subtitle' option require 'vtt' format, but got '".concat(getExt(this.art.option.subtitle), "'."));
|
||||
errorHandle(getExt(this.art.option.subtitle.url) === 'vtt', "'url' option require 'vtt' format, but got '".concat(getExt(this.art.option.subtitle.url), "'."));
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
@@ -1174,17 +1267,15 @@
|
||||
|
||||
var _this$art = this.art,
|
||||
proxy = _this$art.events.proxy,
|
||||
_this$art$option = _this$art.option,
|
||||
subtitle = _this$art$option.subtitle,
|
||||
subtitleStyle = _this$art$option.subtitleStyle,
|
||||
subtitle = _this$art.option.subtitle,
|
||||
_this$art$refs = _this$art.refs,
|
||||
$video = _this$art$refs.$video,
|
||||
$subtitle = _this$art$refs.$subtitle;
|
||||
setStyle($subtitle, subtitleStyle);
|
||||
setStyle($subtitle, subtitle.style || {});
|
||||
var $track = document.createElement('track');
|
||||
$track.default = true;
|
||||
$track.kind = 'metadata';
|
||||
$track.src = subtitle;
|
||||
$track.src = subtitle.url;
|
||||
$video.appendChild($track);
|
||||
this.art.refs.$track = $track;
|
||||
|
||||
@@ -1660,7 +1751,7 @@
|
||||
key: "DEFAULTS",
|
||||
get: function get() {
|
||||
return {
|
||||
container: document.querySelector('.artplayer'),
|
||||
container: '.artplayer',
|
||||
url: '',
|
||||
poster: '',
|
||||
volume: 0.7,
|
||||
@@ -1673,8 +1764,10 @@
|
||||
loading: '',
|
||||
theme: '#1aafff',
|
||||
hotkey: true,
|
||||
subtitle: '',
|
||||
subtitleStyle: {},
|
||||
subtitle: {
|
||||
url: '',
|
||||
style: {}
|
||||
},
|
||||
controls: [],
|
||||
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/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
|
||||
{"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/verification/player.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/verification/control.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) Line truncated
|
||||
@@ -44,6 +44,7 @@
|
||||
"rollup-plugin-uglify": "^6.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"balloon-css": "^0.5.0",
|
||||
"tiny-emitter": "^2.0.2"
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
export default class Danmu {
|
||||
constructor(art) {
|
||||
constructor(art, option) {
|
||||
this.art = art;
|
||||
this.option = option;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
export default class Fullscreen {
|
||||
constructor(art) {
|
||||
constructor(art, option) {
|
||||
this.art = art;
|
||||
this.option = option;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
export default class Highlight {
|
||||
constructor(art) {
|
||||
constructor(art, option) {
|
||||
this.art = art;
|
||||
this.option = option;
|
||||
}
|
||||
}
|
||||
+102
-24
@@ -1,5 +1,5 @@
|
||||
import { append } from '../utils';
|
||||
import validControl from '../utils/validControl';
|
||||
import { append, setStyle } from '../utils';
|
||||
import validControl from '../verification/control';
|
||||
import Danmu from './danmu';
|
||||
import Fullscreen from './fullscreen';
|
||||
import Highlight from './highlight';
|
||||
@@ -16,18 +16,45 @@ let id = 0;
|
||||
export default class Controls {
|
||||
constructor(art) {
|
||||
this.art = art;
|
||||
this.$map = {
|
||||
top: [],
|
||||
left: [],
|
||||
right: []
|
||||
};
|
||||
this.init();
|
||||
this.mount();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.progress = new Progress(this.art);
|
||||
this.highlight = new Highlight(this.art);
|
||||
this.screenshot = new Screenshot(this.art);
|
||||
this.add({
|
||||
control: Progress,
|
||||
disable: false,
|
||||
html: 'Progress',
|
||||
position: 'top',
|
||||
index: 0
|
||||
});
|
||||
|
||||
this.add({
|
||||
control: Highlight,
|
||||
disable: false,
|
||||
html: 'Highlight',
|
||||
position: 'top',
|
||||
index: 10
|
||||
});
|
||||
|
||||
this.add({
|
||||
control: Screenshot,
|
||||
disable: false,
|
||||
html: 'Screenshot',
|
||||
position: 'top',
|
||||
index: 20
|
||||
});
|
||||
|
||||
this.add({
|
||||
control: PlayAndPause,
|
||||
disable: false,
|
||||
icon: 'PlayAndPause',
|
||||
html: 'PlayAndPause',
|
||||
tooltip: 'PlayAndPause',
|
||||
position: 'left',
|
||||
index: 0
|
||||
});
|
||||
@@ -35,7 +62,8 @@ export default class Controls {
|
||||
this.add({
|
||||
control: Volume,
|
||||
disable: false,
|
||||
icon: 'Volume',
|
||||
html: 'Volume',
|
||||
tooltip: 'Volume',
|
||||
position: 'left',
|
||||
index: 10
|
||||
});
|
||||
@@ -43,7 +71,8 @@ export default class Controls {
|
||||
this.add({
|
||||
control: Time,
|
||||
disable: false,
|
||||
icon: 'Time',
|
||||
html: 'Time',
|
||||
tooltip: 'Volume',
|
||||
position: 'left',
|
||||
index: 20
|
||||
});
|
||||
@@ -51,7 +80,8 @@ export default class Controls {
|
||||
this.add({
|
||||
control: Danmu,
|
||||
disable: false,
|
||||
icon: 'Danmu',
|
||||
html: 'Danmu',
|
||||
tooltip: 'Danmu',
|
||||
position: 'right',
|
||||
index: 0
|
||||
});
|
||||
@@ -59,7 +89,8 @@ export default class Controls {
|
||||
this.add({
|
||||
control: Subtitle,
|
||||
disable: false,
|
||||
icon: 'Subtitle',
|
||||
html: 'Subtitle',
|
||||
tooltip: 'Subtitle',
|
||||
position: 'right',
|
||||
index: 10
|
||||
});
|
||||
@@ -67,7 +98,8 @@ export default class Controls {
|
||||
this.add({
|
||||
control: Setting,
|
||||
disable: false,
|
||||
icon: 'Setting',
|
||||
html: 'Setting',
|
||||
tooltip: 'Setting',
|
||||
position: 'right',
|
||||
index: 20
|
||||
});
|
||||
@@ -75,7 +107,8 @@ export default class Controls {
|
||||
this.add({
|
||||
control: Pip,
|
||||
disable: false,
|
||||
icon: 'Pip',
|
||||
html: 'Pip',
|
||||
tooltip: 'Pip',
|
||||
position: 'right',
|
||||
index: 30
|
||||
});
|
||||
@@ -83,7 +116,8 @@ export default class Controls {
|
||||
this.add({
|
||||
control: Fullscreen,
|
||||
disable: false,
|
||||
icon: 'Fullscreen',
|
||||
html: 'Fullscreen',
|
||||
tooltip: 'Fullscreen',
|
||||
position: 'right',
|
||||
index: 40
|
||||
});
|
||||
@@ -95,25 +129,69 @@ export default class Controls {
|
||||
|
||||
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';
|
||||
};
|
||||
$control.setAttribute('data-control-index', String(option.index) || id);
|
||||
setStyle($control, option.style || {});
|
||||
append($control, option.html);
|
||||
option.ref = $control;
|
||||
this.commonMethod(option);
|
||||
this[name] = new option.control(this.art, option);
|
||||
this.$map[option.position].push($control);
|
||||
}
|
||||
}
|
||||
|
||||
mount() {
|
||||
const { $progress, $controlsLeft, $controlsRight } = this.art.refs;
|
||||
Object.keys(this.$map).forEach(key => {
|
||||
const $list = this.$map[key].sort(
|
||||
(a, b) =>
|
||||
Number(a.dataset.controlIndex) - Number(b.dataset.controlIndex)
|
||||
);
|
||||
|
||||
$list.forEach($control => {
|
||||
switch (key) {
|
||||
case 'top':
|
||||
$progress.appendChild($control);
|
||||
break;
|
||||
case 'left':
|
||||
$controlsLeft.appendChild($control);
|
||||
break;
|
||||
case 'right':
|
||||
$controlsRight.appendChild($control);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
commonMethod(option) {
|
||||
Object.defineProperty(option.control.prototype, 'hide', {
|
||||
value: () => {
|
||||
option.ref.style.display = 'none';
|
||||
this.art.emit('control:hide', option.ref);
|
||||
}
|
||||
});
|
||||
|
||||
Object.defineProperty(option.control.prototype, 'show', {
|
||||
value: () => {
|
||||
option.ref.style.display = option.position === 'top' ? 'block' : 'inline-block';
|
||||
this.art.emit('control:show', option.ref);
|
||||
}
|
||||
});
|
||||
|
||||
Object.defineProperty(option.control.prototype, 'addMenu', {
|
||||
value: (menus) => {
|
||||
console.log(menus);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
show() {
|
||||
const { $wrap } = this.art.refs;
|
||||
$wrap.classList.add('controls-show');
|
||||
|
||||
+2
-1
@@ -1,5 +1,6 @@
|
||||
export default class Pip {
|
||||
constructor(art) {
|
||||
constructor(art, option) {
|
||||
this.art = art;
|
||||
this.option = option;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
export default class PlayAndPause {
|
||||
constructor(art) {
|
||||
constructor(art, option) {
|
||||
this.art = art;
|
||||
this.option = option;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
export default class Progress {
|
||||
constructor(art) {
|
||||
constructor(art, option) {
|
||||
this.art = art;
|
||||
this.option = option;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
export default class Screenshot {
|
||||
constructor(art) {
|
||||
constructor(art, option) {
|
||||
this.art = art;
|
||||
this.option = option;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
export default class Setting {
|
||||
constructor(art) {
|
||||
constructor(art, option) {
|
||||
this.art = art;
|
||||
this.option = option;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
export default class Subtitle {
|
||||
constructor(art) {
|
||||
constructor(art, option) {
|
||||
this.art = art;
|
||||
this.option = option;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
export default class Time {
|
||||
constructor(art) {
|
||||
constructor(art, option) {
|
||||
this.art = art;
|
||||
this.option = option;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
export default class Volume {
|
||||
constructor(art) {
|
||||
constructor(art, option) {
|
||||
this.art = art;
|
||||
this.option = option;
|
||||
}
|
||||
}
|
||||
+7
-4
@@ -1,5 +1,6 @@
|
||||
import './style/index.scss';
|
||||
import validOption from './utils/validOption';
|
||||
import 'balloon-css/balloon.min.css';
|
||||
import validOption from './verification/player';
|
||||
import config from './config';
|
||||
import Emitter from 'tiny-emitter';
|
||||
import Template from './template';
|
||||
@@ -41,7 +42,7 @@ class Artplayer extends Emitter {
|
||||
|
||||
static get DEFAULTS() {
|
||||
return {
|
||||
container: document.querySelector('.artplayer'),
|
||||
container: '.artplayer',
|
||||
url: '',
|
||||
poster: '',
|
||||
volume: 0.7,
|
||||
@@ -54,8 +55,10 @@ class Artplayer extends Emitter {
|
||||
loading: '',
|
||||
theme: '#1aafff',
|
||||
hotkey: true,
|
||||
subtitle: '',
|
||||
subtitleStyle: {},
|
||||
subtitle: {
|
||||
url: '',
|
||||
style: {}
|
||||
},
|
||||
controls: [],
|
||||
lang: navigator.language.toLowerCase()
|
||||
};
|
||||
|
||||
+5
-5
@@ -5,8 +5,8 @@ export default class Subtitle {
|
||||
this.art = art;
|
||||
if (this.art.option.subtitle) {
|
||||
errorHandle(
|
||||
getExt(this.art.option.subtitle) === 'vtt',
|
||||
`'subtitle' option require 'vtt' format, but got '${getExt(this.art.option.subtitle)}'.`
|
||||
getExt(this.art.option.subtitle.url) === 'vtt',
|
||||
`'url' option require 'vtt' format, but got '${getExt(this.art.option.subtitle.url)}'.`
|
||||
);
|
||||
this.init();
|
||||
}
|
||||
@@ -15,15 +15,15 @@ export default class Subtitle {
|
||||
init() {
|
||||
const {
|
||||
events: { proxy },
|
||||
option: { subtitle, subtitleStyle },
|
||||
option: { subtitle },
|
||||
refs: { $video, $subtitle }
|
||||
} = this.art;
|
||||
|
||||
setStyle($subtitle, subtitleStyle);
|
||||
setStyle($subtitle, subtitle.style || {});
|
||||
const $track = document.createElement('track');
|
||||
$track.default = true;
|
||||
$track.kind = 'metadata';
|
||||
$track.src = subtitle;
|
||||
$track.src = subtitle.url;
|
||||
$video.appendChild($track);
|
||||
this.art.refs.$track = $track;
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { errorHandle } from '.';
|
||||
import { errorHandle } from '../utils';
|
||||
|
||||
export default function validControl(option) {
|
||||
errorHandle(
|
||||
@@ -12,8 +12,8 @@ export default function validControl(option) {
|
||||
);
|
||||
|
||||
errorHandle(
|
||||
typeof option.icon === 'string' || option.icon instanceof Element,
|
||||
`'icon' option require 'string' or 'Element' type, but got '${typeof option.icon}'.`
|
||||
typeof option.html === 'string' || option.html instanceof Element,
|
||||
`'html' option require 'string' or 'Element' type, but got '${typeof option.html}'.`
|
||||
);
|
||||
|
||||
errorHandle(
|
||||
@@ -1,4 +1,4 @@
|
||||
import { errorHandle } from '.';
|
||||
import { errorHandle } from '../utils';
|
||||
|
||||
export default function validOption(option) {
|
||||
errorHandle(
|
||||
@@ -82,12 +82,12 @@ export default function validOption(option) {
|
||||
);
|
||||
|
||||
errorHandle(
|
||||
typeof option.subtitle === 'string',
|
||||
`'subtitle' option require 'string' type, but got '${typeof option.subtitle}'.`
|
||||
Object.prototype.toString.call(option.subtitle) === '[object Object]',
|
||||
`'subtitle' option require 'object' type, but got '${typeof option.subtitle}'.`
|
||||
);
|
||||
|
||||
errorHandle(
|
||||
Object.prototype.toString.call(option.subtitleStyle) === '[object Object]',
|
||||
`'subtitleStyle' option require 'object' type, but got '${typeof option.subtitleStyle}'.`
|
||||
Array.isArray(option.controls),
|
||||
`'controls' option require 'array' type, but got '${typeof option.controls}'.`
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user