mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-08 10:56:15 -08:00
add thumbnails
This commit is contained in:
Harvey Zack committed
1 parent
adb572b807
commit
1b3b2de8d4
9 files changed
+111
-20
No files matched your search
@@ -1,2 +1,2 @@
|
||||
.artplayer-video-player{position:relative;width:100%;height:100%;overflow:hidden;outline:0;font-family:Roboto,Arial,Helvetica,sans-serif;color:#eee;text-align:left;direction:ltr;font-size:14px;line-height:1.3;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:manipulation;-ms-high-contrast-adjust:none}.artplayer-video-player *{box-sizing:border-box}.artplayer-video-player .art-icon svg{fill:#fff}.artplayer-video-player .artplayer-video{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background-color:#000;outline:0}.artplayer-video-player .artplayer-subtitle{position:absolute;z-index:20;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-video-player .artplayer-layers{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;width:100%;height:100%}.artplayer-video-player .artplayer-mask{display:none;position:absolute;z-index:40;left:0;top:0;right:0;bottom:0;width:100%;height:100%;align-items:center;justify-content:center;cursor:pointer}.artplayer-video-player .artplayer-mask .art-icon-play{opacity:.8;display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50px}.artplayer-video-player .artplayer-loading{display:none;position:absolute;z-index:40;left:0;top:0;right:0;bottom:0;width:100%;height:100%;align-items:center;justify-content:center}.artplayer-video-player .artplayer-bottom{position:absolute;z-index:50;left:0;right:0;bottom:0;height:100px;padding:50px 10px 0;opacity:0;visibility:hidden;transition:all .2s ease-in-out;box-sizing:border-box;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom}.artplayer-video-player .artplayer-bottom .art-control-progress{position:relative;height:5px;padding:1px 0;cursor:pointer}.artplayer-video-player .artplayer-bottom .art-control-progress .art-control-progress-inner{position:relative;height:100%;background:hsla(0,0%,100%,.2)}.artplayer-video-player .artplayer-bottom .art-control-progress .art-control-progress-inner .art-progress-loaded{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;height:100%;width:0;background:hsla(0,0%,100%,.4)}.artplayer-video-player .artplayer-bottom .art-control-progress .art-control-progress-inner .art-progress-played{position:absolute;z-index:20;left:0;top:0;right:0;bottom:0;height:100%;width:0}.artplayer-video-player .artplayer-bottom .art-control-progress .art-control-progress-inner .art-progress-highlight{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;height:0}.artplayer-video-player .artplayer-bottom .art-control-progress .art-control-progress-inner .art-progress-highlight span{display:inline-block;position:absolute;left:0;top:0;width:7px;height:3px;background:#fff;border-radius:3px}.artplayer-video-player .artplayer-bottom .art-control-progress .art-control-progress-inner .art-progress-indicator{display:none;position:absolute;z-index:40;top:-5px;left:-6.5px;width:13px;height:13px;border-radius:50%}.artplayer-video-player .artplayer-bottom .art-control-progress .art-control-progress-inner .art-progress-indicator.show-indicator{display:block}.artplayer-video-player .artplayer-bottom .art-control-progress .art-control-progress-inner .art-progress-tip{display:none;position:absolute;z-index:50;top:-25px;left:0;height:20px;padding:0 5px;line-height:20px;color:#fff;font-size:12px;text-align:center;background:rgba(0,0,0,.7);border-radius:3px;font-weight:700}.artplayer-video-player .artplayer-bottom .art-control-progress:hover .art-progress-indicator,.artplayer-video-player .artplayer-bottom .art-control-progress:hover .art-progress-tip{display:block}.artplayer-video-player.controls-show .artplayer-bottom,.artplayer-video-player:hover .artplayer-bottom{opacity:1;visibility:visible}.artplayer-video-player .artplayer-notice{display:none;font-size:13px;position:absolute;z-index:60;left:10px;top:10px;height:30px;line-height:30px;padding:0 10px;color:#fff;background:rgba(0,0,0,.6)}.artplayer-video-player .artplayer-contextmenu{position:absolute;z-index:70;left:0;top:0;width:200px;padding:5px 0;background:rgba(0,0,0,.8)}.artplayer-video-player .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-video-player .artplayer-contextmenu a:hover{background-color:hsla(0,0%,100%,.1)}
|
||||
.artplayer-video-player{position:relative;width:100%;height:100%;overflow:hidden;outline:0;font-family:Roboto,Arial,Helvetica,sans-serif;color:#eee;text-align:left;direction:ltr;font-size:14px;line-height:1.3;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:manipulation;-ms-high-contrast-adjust:none}.artplayer-video-player *{box-sizing:border-box}.artplayer-video-player .art-icon svg{fill:#fff}.artplayer-video-player .artplayer-video{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background-color:#000;outline:0}.artplayer-video-player .artplayer-subtitle{position:absolute;z-index:20;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-video-player .artplayer-layers{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;width:100%;height:100%}.artplayer-video-player .artplayer-mask{display:none;position:absolute;z-index:40;left:0;top:0;right:0;bottom:0;width:100%;height:100%;align-items:center;justify-content:center;cursor:pointer}.artplayer-video-player .artplayer-mask .art-icon-play{opacity:.8;display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50px}.artplayer-video-player .artplayer-loading{display:none;position:absolute;z-index:40;left:0;top:0;right:0;bottom:0;width:100%;height:100%;align-items:center;justify-content:center}.artplayer-video-player .artplayer-bottom{position:absolute;z-index:50;left:0;right:0;bottom:0;height:100px;padding:50px 10px 0;opacity:0;visibility:hidden;transition:all .2s ease-in-out;box-sizing:border-box;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom}.artplayer-video-player .artplayer-bottom .art-control-progress{position:relative;height:5px;padding:1px 0;cursor:pointer}.artplayer-video-player .artplayer-bottom .art-control-progress .art-control-progress-inner{position:relative;height:100%;background:hsla(0,0%,100%,.2)}.artplayer-video-player .artplayer-bottom .art-control-progress .art-control-progress-inner .art-progress-loaded{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;height:100%;width:0;background:hsla(0,0%,100%,.4)}.artplayer-video-player .artplayer-bottom .art-control-progress .art-control-progress-inner .art-progress-played{position:absolute;z-index:20;left:0;top:0;right:0;bottom:0;height:100%;width:0}.artplayer-video-player .artplayer-bottom .art-control-progress .art-control-progress-inner .art-progress-highlight{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;height:0}.artplayer-video-player .artplayer-bottom .art-control-progress .art-control-progress-inner .art-progress-highlight span{display:inline-block;position:absolute;left:0;top:0;width:7px;height:3px;background:#fff;border-radius:3px}.artplayer-video-player .artplayer-bottom .art-control-progress .art-control-progress-inner .art-progress-thumbnails{position:absolute;z-index:50;top:-95px;left:0;pointer-events:none;background-color:rgba(0,0,0,.7)}.artplayer-video-player .artplayer-bottom .art-control-progress .art-control-progress-inner .art-progress-indicator{display:none;position:absolute;z-index:40;top:-5px;left:-6.5px;width:13px;height:13px;border-radius:50%}.artplayer-video-player .artplayer-bottom .art-control-progress .art-control-progress-inner .art-progress-indicator.show-indicator{display:block}.artplayer-video-player .artplayer-bottom .art-control-progress .art-control-progress-inner .art-progress-tip{display:none;position:absolute;z-index:50;top:-25px;left:0;height:20px;padding:0 5px;line-height:20px;color:#fff;font-size:12px;text-align:center;background:rgba(0,0,0,.7);border-radius:3px;font-weight:700}.artplayer-video-player .artplayer-bottom .art-control-progress:hover .art-progress-indicator,.artplayer-video-player .artplayer-bottom .art-control-progress:hover .art-progress-tip{display:block}.artplayer-video-player.controls-show .artplayer-bottom,.artplayer-video-player:hover .artplayer-bottom{opacity:1;visibility:visible}.artplayer-video-player .artplayer-notice{display:none;font-size:13px;position:absolute;z-index:60;left:10px;top:10px;height:30px;line-height:30px;padding:0 10px;color:#fff;background:rgba(0,0,0,.6)}.artplayer-video-player .artplayer-contextmenu{position:absolute;z-index:70;left:0;top:0;width:200px;padding:5px 0;background:rgba(0,0,0,.8)}.artplayer-video-player .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-video-player .artplayer-contextmenu a:hover{bacLine 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
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
@@ -32,6 +32,12 @@
|
||||
subtitle: {
|
||||
url: './subtitle/dw_trailer_low.vtt'
|
||||
},
|
||||
thumbnails: {
|
||||
url: './img/thumbnails.jpg',
|
||||
number: 100,
|
||||
width: 160,
|
||||
height: 90
|
||||
},
|
||||
highlight: [
|
||||
{
|
||||
time: 20,
|
||||
|
||||
+49
-8
@@ -267,6 +267,7 @@
|
||||
errorHandle(typeof option.container === 'string' || option.container instanceof Element, "'container' option require 'string' or 'Element' type, but got '".concat(_typeof_1(option.container), "'."));
|
||||
errorHandle(typeof option.url === 'string', "'url' option require 'string' type, but got '".concat(_typeof_1(option.url), "'."));
|
||||
errorHandle(typeof option.poster === 'string', "'poster' option require 'string' type, but got '".concat(_typeof_1(option.poster), "'."));
|
||||
errorHandle(Object.prototype.toString.call(option.thumbnails) === '[object Object]', "'thumbnails' option require 'object' type, but got '".concat(_typeof_1(option.thumbnails), "'."));
|
||||
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\u3001metadata\u3001auto', but got '".concat(option.preload, "."));
|
||||
@@ -820,11 +821,11 @@
|
||||
proxy = _this$art.events.proxy,
|
||||
$video = _this$art.refs.$video,
|
||||
player = _this$art.player;
|
||||
append(this.option.ref, "\n <div class=\"art-control-progress-inner\">\n <div class=\"art-progress-loaded\"></div>\n <div class=\"art-progress-played\" style=\"background: ".concat(theme, "\"></div>\n <div class=\"art-progress-highlight\"></div>\n <div class=\"art-progress-screenshot\"></div>\n <div class=\"art-progress-indicator\" style=\"background: ").concat(theme, "\"></div>\n <div class=\"art-progress-tip art-tip\"></div>\n </div>\n "));
|
||||
append(this.option.ref, "\n <div class=\"art-control-progress-inner\">\n <div class=\"art-progress-loaded\"></div>\n <div class=\"art-progress-played\" style=\"background: ".concat(theme, "\"></div>\n <div class=\"art-progress-highlight\"></div>\n <div class=\"art-progress-thumbnails\"></div>\n <div class=\"art-progress-indicator\" style=\"background: ").concat(theme, "\"></div>\n <div class=\"art-progress-tip art-tip\"></div>\n </div>\n "));
|
||||
this.$loaded = this.option.ref.querySelector('.art-progress-loaded');
|
||||
this.$played = this.option.ref.querySelector('.art-progress-played');
|
||||
this.$highlight = this.option.ref.querySelector('.art-progress-highlight');
|
||||
this.$screenshot = this.option.ref.querySelector('.art-progress-screenshot');
|
||||
this.$thumbnails = this.option.ref.querySelector('.art-progress-thumbnails');
|
||||
this.$indicator = this.option.ref.querySelector('.art-progress-indicator');
|
||||
this.$tip = this.option.ref.querySelector('.art-progress-tip');
|
||||
this.art.on('video:canplay', function () {
|
||||
@@ -852,9 +853,19 @@
|
||||
} else {
|
||||
_this.showTime(event);
|
||||
}
|
||||
|
||||
if (_this.art.option.thumbnails.url) {
|
||||
_this.$thumbnails.style.display = 'block';
|
||||
|
||||
_this.showThumbnails(event);
|
||||
}
|
||||
});
|
||||
proxy(this.option.ref, 'mouseout', function () {
|
||||
_this.$tip.style.display = 'none';
|
||||
|
||||
if (_this.art.option.thumbnails.url) {
|
||||
_this.$thumbnails.style.display = 'none';
|
||||
}
|
||||
});
|
||||
proxy(this.option.ref, 'click', function (event) {
|
||||
if (event.target !== _this.$indicator) {
|
||||
@@ -909,19 +920,43 @@
|
||||
width = _this$getPos3.width,
|
||||
time = _this$getPos3.time;
|
||||
|
||||
var tipWidth = this.$tip.clientWidth;
|
||||
this.$tip.innerHTML = time;
|
||||
|
||||
if (width <= 20) {
|
||||
if (width <= tipWidth / 2) {
|
||||
this.$tip.style.left = 0;
|
||||
} else if (width > this.option.ref.clientWidth - 20) {
|
||||
this.$tip.style.left = "".concat(this.option.ref.clientWidth - 40, "px");
|
||||
} else if (width > this.option.ref.clientWidth - tipWidth / 2) {
|
||||
this.$tip.style.left = "".concat(this.option.ref.clientWidth - tipWidth, "px");
|
||||
} else {
|
||||
this.$tip.style.left = "".concat(width - 20, "px");
|
||||
this.$tip.style.left = "".concat(width - tipWidth / 2, "px");
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: "showScreenshot",
|
||||
value: function showScreenshot() {//
|
||||
key: "showThumbnails",
|
||||
value: function showThumbnails(event) {
|
||||
var _this$getPos4 = this.getPos(event),
|
||||
posWidth = _this$getPos4.width;
|
||||
|
||||
var _this$art$option$thum = this.art.option.thumbnails,
|
||||
url = _this$art$option$thum.url,
|
||||
height = _this$art$option$thum.height,
|
||||
width = _this$art$option$thum.width,
|
||||
number = _this$art$option$thum.number;
|
||||
this.$thumbnails.style.backgroundImage = "url(".concat(url, ")");
|
||||
this.$thumbnails.style.height = "".concat(height, "px");
|
||||
this.$thumbnails.style.width = "".concat(width, "px");
|
||||
|
||||
if (posWidth <= width / 2) {
|
||||
this.$thumbnails.style.left = 0;
|
||||
} else if (posWidth > this.option.ref.clientWidth - width / 2) {
|
||||
this.$thumbnails.style.left = "".concat(this.option.ref.clientWidth - width, "px");
|
||||
} else {
|
||||
this.$thumbnails.style.left = "".concat(posWidth - width / 2, "px");
|
||||
}
|
||||
|
||||
var perWidth = this.option.ref.clientWidth / number;
|
||||
var index = Math.ceil(posWidth / perWidth);
|
||||
this.$thumbnails.style.backgroundPosition = "-".concat(index * width, "px 0");
|
||||
}
|
||||
}, {
|
||||
key: "getPos",
|
||||
@@ -1917,6 +1952,12 @@
|
||||
container: '.artplayer',
|
||||
url: '',
|
||||
poster: '',
|
||||
thumbnails: {
|
||||
url: '',
|
||||
number: 100,
|
||||
width: 160,
|
||||
height: 90
|
||||
},
|
||||
volume: 0.7,
|
||||
autoplay: false,
|
||||
preload: 'auto',
|
||||
|
||||
@@ -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/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/pip.js","../../src/controls/playAndPause.js","../../src/controls/progress.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 throw new TypeError(\"Super expression must either be null or 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/pip.js","../../src/controls/playAndPause.js","../../src/controls/progress.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 throw new TypeError(\"Super expression must either be null or Line truncated
|
||||
+33
-10
@@ -27,7 +27,7 @@ export default class Progress {
|
||||
<div class="art-progress-loaded"></div>
|
||||
<div class="art-progress-played" style="background: ${theme}"></div>
|
||||
<div class="art-progress-highlight"></div>
|
||||
<div class="art-progress-screenshot"></div>
|
||||
<div class="art-progress-thumbnails"></div>
|
||||
<div class="art-progress-indicator" style="background: ${theme}"></div>
|
||||
<div class="art-progress-tip art-tip"></div>
|
||||
</div>
|
||||
@@ -37,9 +37,7 @@ export default class Progress {
|
||||
this.$loaded = this.option.ref.querySelector('.art-progress-loaded');
|
||||
this.$played = this.option.ref.querySelector('.art-progress-played');
|
||||
this.$highlight = this.option.ref.querySelector('.art-progress-highlight');
|
||||
this.$screenshot = this.option.ref.querySelector(
|
||||
'.art-progress-screenshot'
|
||||
);
|
||||
this.$thumbnails = this.option.ref.querySelector('.art-progress-thumbnails');
|
||||
this.$indicator = this.option.ref.querySelector('.art-progress-indicator');
|
||||
this.$tip = this.option.ref.querySelector('.art-progress-tip');
|
||||
|
||||
@@ -73,10 +71,18 @@ export default class Progress {
|
||||
} else {
|
||||
this.showTime(event);
|
||||
}
|
||||
|
||||
if (this.art.option.thumbnails.url) {
|
||||
this.$thumbnails.style.display = 'block';
|
||||
this.showThumbnails(event);
|
||||
}
|
||||
});
|
||||
|
||||
proxy(this.option.ref, 'mouseout', () => {
|
||||
this.$tip.style.display = 'none';
|
||||
if (this.art.option.thumbnails.url) {
|
||||
this.$thumbnails.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
proxy(this.option.ref, 'click', event => {
|
||||
@@ -121,18 +127,35 @@ export default class Progress {
|
||||
|
||||
showTime(event) {
|
||||
const { width, time } = this.getPos(event);
|
||||
const tipWidth = this.$tip.clientWidth;
|
||||
this.$tip.innerHTML = time;
|
||||
if (width <= 20) {
|
||||
if (width <= tipWidth / 2) {
|
||||
this.$tip.style.left = 0;
|
||||
} else if (width > this.option.ref.clientWidth - 20) {
|
||||
this.$tip.style.left = `${this.option.ref.clientWidth - 40}px`;
|
||||
} else if (width > this.option.ref.clientWidth - tipWidth / 2) {
|
||||
this.$tip.style.left = `${this.option.ref.clientWidth - tipWidth}px`;
|
||||
} else {
|
||||
this.$tip.style.left = `${width - 20}px`;
|
||||
this.$tip.style.left = `${width - tipWidth / 2}px`;
|
||||
}
|
||||
}
|
||||
|
||||
showScreenshot() {
|
||||
//
|
||||
showThumbnails(event) {
|
||||
const { width: posWidth } = this.getPos(event);
|
||||
const { url, height, width, number } = this.art.option.thumbnails;
|
||||
this.$thumbnails.style.backgroundImage = `url(${url})`;
|
||||
this.$thumbnails.style.height = `${height}px`;
|
||||
this.$thumbnails.style.width = `${width}px`;
|
||||
|
||||
if (posWidth <= width / 2) {
|
||||
this.$thumbnails.style.left = 0;
|
||||
} else if (posWidth > this.option.ref.clientWidth - width / 2) {
|
||||
this.$thumbnails.style.left = `${this.option.ref.clientWidth - width}px`;
|
||||
} else {
|
||||
this.$thumbnails.style.left = `${posWidth - width / 2}px`;
|
||||
}
|
||||
|
||||
const perWidth = this.option.ref.clientWidth / number;
|
||||
const index = Math.ceil(posWidth / perWidth);
|
||||
this.$thumbnails.style.backgroundPosition = `-${index * width}px 0`;
|
||||
}
|
||||
|
||||
getPos(event) {
|
||||
|
||||
@@ -45,6 +45,12 @@ class Artplayer extends Emitter {
|
||||
container: '.artplayer',
|
||||
url: '',
|
||||
poster: '',
|
||||
thumbnails: {
|
||||
url: '',
|
||||
number: 100,
|
||||
width: 160,
|
||||
height: 90
|
||||
},
|
||||
volume: 0.7,
|
||||
autoplay: false,
|
||||
preload: 'auto',
|
||||
|
||||
@@ -171,6 +171,16 @@
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.art-progress-thumbnails {
|
||||
// display: none;
|
||||
position: absolute;
|
||||
z-index: 50;
|
||||
top: -95px;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
background-color: rgba(0,0,0,.7);
|
||||
}
|
||||
|
||||
.art-progress-indicator {
|
||||
display: none;
|
||||
|
||||
@@ -26,6 +26,11 @@ export default function validOption(option) {
|
||||
`'poster' option require 'string' type, but got '${typeof option.poster}'.`
|
||||
);
|
||||
|
||||
errorHandle(
|
||||
Object.prototype.toString.call(option.thumbnails) === '[object Object]',
|
||||
`'thumbnails' option require 'object' type, but got '${typeof option.thumbnails}'.`
|
||||
);
|
||||
|
||||
errorHandle(
|
||||
typeof option.volume === 'number',
|
||||
`'volume' option require 'number' type, but got '${typeof option.volume}'.`
|
||||
|
||||
Reference in new issue
Block a user