mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-08 10:56:15 -08:00
add bar
This commit is contained in:
Harvey Zack committed
1 parent
f58684991f
commit
e988f00cf8
15 files changed
+538
-140
No files matched your search
@@ -193,7 +193,7 @@
|
||||
"constructor-super": 2,
|
||||
"generator-star-spacing": 1,
|
||||
"no-class-assign": 2,
|
||||
"no-confusing-arrow": 2,
|
||||
"no-confusing-arrow": 0,
|
||||
"no-const-assign": 2,
|
||||
"no-dupe-class-members": 2,
|
||||
"no-duplicate-imports": 2,
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
.artplayer-container{position:relative;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-container .art-icon svg{fill:#fff}.artplayer-container .artplayer-video{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;width:100%;height:100%}.artplayer-container .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-container .artplayer-layers{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;width:100%;height:100%}.artplayer-container .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-container .artplayer-mask .art-icon-play{opacity:.8;display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50px}.artplayer-container .artplayer-bottom{position:absolute;z-index:40;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-container.controls-show .artplayer-bottom,.artplayer-container:hover .artplayer-bottom{opacity:1;visibility:visible}.artplayer-container .artplayer-loading{display:none;position:absolute;z-index:50;left:0;top:0;right:0;bottom:0;width:100%;height:100%;align-items:center;justify-content:center}.artplayer-container .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-container .artplayer-contextmenu{position:absolute;z-index:70;left:0;top:0;width:200px;padding:5px 0;background:rgba(0,0,0,.8)}.artplayer-container .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-container .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;box-sizing:border-box}.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:1;left:0;top:0;right:0;bottom:0;height:100%;width:0;background:hsla(0,0%,100%,.4);-webkit-transform-origin:0 0;transform-origin:0 0}.artplayer-video-player .artplayer-bottom .art-control-progress .art-control-progress-inner .art-progress-played{position:absolute;z-index:2;left:0;top:0;right:0;bottom:0;height:100%;width:0;-webkit-transform-origin:0 0;transform-origin:0 0}.artplayer-video-player .artplayer-bottom .art-control-progress .art-control-progress-inner .art-progress-indicator{display:none;position:absolute;z-index:3;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-timer{display:none;position:absolute;z-index:4;top:-25px;left:0;width:40px;height:20px;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-timer{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)}
|
||||
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
|
||||
+35
-35
@@ -34,47 +34,47 @@
|
||||
}
|
||||
});
|
||||
|
||||
player.layers.add({
|
||||
html: '23333',
|
||||
index: 999,
|
||||
name: 'test',
|
||||
style: {
|
||||
'color': 'red'
|
||||
}
|
||||
}, dom => {
|
||||
console.log(dom)
|
||||
});
|
||||
// player.layers.add({
|
||||
// html: '23333',
|
||||
// index: 999,
|
||||
// name: 'test',
|
||||
// style: {
|
||||
// 'color': 'red'
|
||||
// }
|
||||
// }, dom => {
|
||||
// console.log(dom)
|
||||
// });
|
||||
|
||||
console.dir(Artplayer);
|
||||
// console.dir(Artplayer);
|
||||
|
||||
console.log(player);
|
||||
// console.log(player);
|
||||
|
||||
Artplayer.config.video.events.forEach(item => {
|
||||
player.on('video:' + item, event => {
|
||||
console.log('video', event);
|
||||
});
|
||||
});
|
||||
// Artplayer.config.video.events.forEach(item => {
|
||||
// player.on('video:' + item, event => {
|
||||
// console.log('video', event);
|
||||
// });
|
||||
// });
|
||||
|
||||
Artplayer.config.mse.mediaSource.events.forEach(item => {
|
||||
player.on('mediaSource:' + item, event => {
|
||||
console.log('mediaSource', event);
|
||||
});
|
||||
});
|
||||
// Artplayer.config.mse.mediaSource.events.forEach(item => {
|
||||
// player.on('mediaSource:' + item, event => {
|
||||
// console.log('mediaSource', event);
|
||||
// });
|
||||
// });
|
||||
|
||||
Artplayer.config.mse.sourceBufferList.events.forEach(item => {
|
||||
player.on('sourceBuffers:' + item, event => {
|
||||
console.log('sourceBuffers', event);
|
||||
});
|
||||
player.on('activeSourceBuffers:' + item, event => {
|
||||
console.log('activeSourceBuffers', event);
|
||||
});
|
||||
});
|
||||
// Artplayer.config.mse.sourceBufferList.events.forEach(item => {
|
||||
// player.on('sourceBuffers:' + item, event => {
|
||||
// console.log('sourceBuffers', event);
|
||||
// });
|
||||
// player.on('activeSourceBuffers:' + item, event => {
|
||||
// console.log('activeSourceBuffers', event);
|
||||
// });
|
||||
// });
|
||||
|
||||
Artplayer.config.mse.sourceBuffer.events.forEach(item => {
|
||||
player.on('sourceBuffer:' + item, event => {
|
||||
console.log('sourceBuffer', event);
|
||||
});
|
||||
});
|
||||
// Artplayer.config.mse.sourceBuffer.events.forEach(item => {
|
||||
// player.on('sourceBuffer:' + item, event => {
|
||||
// console.log('sourceBuffer', event);
|
||||
// });
|
||||
// });
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
||||
+202
-38
@@ -229,13 +229,17 @@
|
||||
return getExt(url.split('?')[0]);
|
||||
}
|
||||
|
||||
if (url.includes('#')) {
|
||||
return getExt(url.split('#')[0]);
|
||||
}
|
||||
|
||||
return url.trim().toLowerCase().split('.').pop();
|
||||
}
|
||||
function append(parent, child) {
|
||||
if (child instanceof Element) {
|
||||
parent.appendChild(child);
|
||||
} else {
|
||||
parent.innerHTML = child;
|
||||
parent.insertAdjacentHTML('beforeend', child);
|
||||
}
|
||||
|
||||
return parent;
|
||||
@@ -246,6 +250,16 @@
|
||||
});
|
||||
return element;
|
||||
}
|
||||
function secondToTime(second) {
|
||||
var add0 = function add0(num) {
|
||||
return num < 10 ? "0".concat(num) : String(num);
|
||||
};
|
||||
|
||||
var hour = Math.floor(second / 3600);
|
||||
var min = Math.floor((second - hour * 3600) / 60);
|
||||
var sec = Math.floor(second - hour * 3600 - min * 60);
|
||||
return (hour > 0 ? [hour, min, sec] : [min, sec]).map(add0).join(':');
|
||||
}
|
||||
|
||||
function validOption(option) {
|
||||
errorHandle(option.container, '\'container\' option is required.');
|
||||
@@ -383,7 +397,8 @@
|
||||
key: "init",
|
||||
value: function init() {
|
||||
var refs = this.art.refs;
|
||||
refs.$container.innerHTML = "\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 ";
|
||||
refs.$container.innerHTML = "\n <div class=\"artplayer-video-player\">\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.$player = refs.$container.querySelector('.artplayer-video-player');
|
||||
refs.$video = refs.$container.querySelector('.artplayer-video');
|
||||
refs.$subtitle = refs.$container.querySelector('.artplayer-subtitle');
|
||||
refs.$bottom = refs.$container.querySelector('.artplayer-bottom');
|
||||
@@ -461,7 +476,7 @@
|
||||
value: function init() {
|
||||
var option = this.art.option;
|
||||
var $video = this.art.refs.$video;
|
||||
$video.controls = true;
|
||||
$video.controls = false;
|
||||
$video.poster = option.poster;
|
||||
$video.volume = clamp(option.volume, 0, 1);
|
||||
$video.autoplay = option.autoplay;
|
||||
@@ -487,11 +502,16 @@
|
||||
this.art.on('video:loadeddata', function () {
|
||||
_this.art.loading.hide();
|
||||
});
|
||||
this.art.on('video:seeking', function () {
|
||||
_this.art.loading.show();
|
||||
});
|
||||
this.art.on('video:canplay', function () {
|
||||
_this.art.controls.show();
|
||||
|
||||
_this.art.mask.show();
|
||||
|
||||
_this.art.loading.hide();
|
||||
|
||||
if (_this.art.option.autoplay) {
|
||||
var promise = _this.play();
|
||||
|
||||
@@ -503,26 +523,29 @@
|
||||
}
|
||||
});
|
||||
this.art.on('video:playing', function () {
|
||||
_this.art.playing = true;
|
||||
_this.art.isPlaying = true;
|
||||
|
||||
_this.art.controls.hide();
|
||||
|
||||
_this.art.mask.hide();
|
||||
});
|
||||
this.art.on('video:pause', function () {
|
||||
_this.art.playing = false;
|
||||
_this.art.isPlaying = false;
|
||||
|
||||
_this.art.controls.show();
|
||||
|
||||
_this.art.mask.show();
|
||||
});
|
||||
this.art.on('video:ended', function () {
|
||||
_this.art.playing = false;
|
||||
_this.art.isPlaying = false;
|
||||
|
||||
_this.art.controls.show();
|
||||
|
||||
_this.art.mask.show();
|
||||
});
|
||||
this.art.on('video:error', function () {
|
||||
_this.art.isPlaying = false;
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: "play",
|
||||
@@ -542,7 +565,7 @@
|
||||
}, {
|
||||
key: "toggle",
|
||||
value: function toggle() {
|
||||
if (this.art.playing) {
|
||||
if (this.art.isPlaying) {
|
||||
this.pause();
|
||||
} else {
|
||||
this.play();
|
||||
@@ -778,12 +801,142 @@
|
||||
this.option = option;
|
||||
};
|
||||
|
||||
var Progress = function Progress(art, option) {
|
||||
classCallCheck(this, Progress);
|
||||
var Progress =
|
||||
/*#__PURE__*/
|
||||
function () {
|
||||
function Progress(art, option) {
|
||||
classCallCheck(this, Progress);
|
||||
|
||||
this.art = art;
|
||||
this.option = option;
|
||||
};
|
||||
this.art = art;
|
||||
this.option = option;
|
||||
this.getLoaded = this.getLoaded.bind(this);
|
||||
this.getPlayed = this.getPlayed.bind(this);
|
||||
this.getPos = this.getPos.bind(this);
|
||||
this.set = this.set.bind(this);
|
||||
this.init();
|
||||
}
|
||||
|
||||
createClass(Progress, [{
|
||||
key: "init",
|
||||
value: function init() {
|
||||
var _this = this;
|
||||
|
||||
var _this$art = this.art,
|
||||
theme = _this$art.option.theme,
|
||||
proxy = _this$art.events.proxy,
|
||||
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-indicator\" style=\"background: ").concat(theme, "\"></div>\n <div class=\"art-progress-timer\">00:00</div>\n </div>\n "));
|
||||
this.$loaded = this.option.ref.querySelector('.art-progress-loaded');
|
||||
this.$played = this.option.ref.querySelector('.art-progress-played');
|
||||
this.$indicator = this.option.ref.querySelector('.art-progress-indicator');
|
||||
this.$timer = this.option.ref.querySelector('.art-progress-timer');
|
||||
this.art.on('video:canplay', function () {
|
||||
_this.set('loaded', _this.getLoaded());
|
||||
});
|
||||
this.art.on('video:progress', function () {
|
||||
_this.set('loaded', _this.getLoaded());
|
||||
});
|
||||
this.art.on('video:timeupdate', function () {
|
||||
_this.set('played', _this.getPlayed());
|
||||
});
|
||||
this.art.on('video:ended', function () {
|
||||
_this.set('played', 1);
|
||||
});
|
||||
proxy(this.option.ref, 'mousemove', function (event) {
|
||||
var _this$getPos = _this.getPos(event),
|
||||
width = _this$getPos.width,
|
||||
time = _this$getPos.time;
|
||||
|
||||
if (width <= 20) {
|
||||
_this.$timer.style.left = 0;
|
||||
} else if (width > _this.option.ref.clientWidth - 20) {
|
||||
_this.$timer.style.left = "".concat(_this.option.ref.clientWidth - 40, "px");
|
||||
} else {
|
||||
_this.$timer.style.left = "".concat(width - 20, "px");
|
||||
}
|
||||
|
||||
_this.$timer.innerHTML = time;
|
||||
});
|
||||
proxy(this.option.ref, 'click', function (event) {
|
||||
if (event.target !== _this.$indicator) {
|
||||
var _this$getPos2 = _this.getPos(event),
|
||||
second = _this$getPos2.second,
|
||||
percentage = _this$getPos2.percentage;
|
||||
|
||||
_this.set('played', percentage);
|
||||
|
||||
player.seek(second);
|
||||
}
|
||||
});
|
||||
this.isDroging = false;
|
||||
proxy(this.$indicator, 'mousedown', function () {
|
||||
_this.isDroging = true;
|
||||
});
|
||||
proxy(document, 'mousemove', function (event) {
|
||||
if (_this.isDroging) {
|
||||
var _this$getPos3 = _this.getPos(event),
|
||||
second = _this$getPos3.second,
|
||||
percentage = _this$getPos3.percentage;
|
||||
|
||||
_this.$indicator.classList.add('show-indicator');
|
||||
|
||||
_this.set('played', percentage);
|
||||
|
||||
player.seek(second);
|
||||
}
|
||||
});
|
||||
proxy(document, 'mouseup', function () {
|
||||
if (_this.isDroging) {
|
||||
_this.isDroging = false;
|
||||
|
||||
_this.$indicator.classList.remove('show-indicator');
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: "getPos",
|
||||
value: function getPos(event) {
|
||||
var $video = this.art.refs.$video;
|
||||
|
||||
var _this$option$ref$getB = this.option.ref.getBoundingClientRect(),
|
||||
left = _this$option$ref$getB.left;
|
||||
|
||||
var width = event.x - left;
|
||||
var second = width / this.option.ref.clientWidth * $video.duration;
|
||||
var time = secondToTime(second);
|
||||
var percentage = clamp(width / this.option.ref.clientWidth, 0, 1);
|
||||
return {
|
||||
second: second,
|
||||
time: time,
|
||||
width: width,
|
||||
percentage: percentage
|
||||
};
|
||||
}
|
||||
}, {
|
||||
key: "getPlayed",
|
||||
value: function getPlayed() {
|
||||
var $video = this.art.refs.$video;
|
||||
return $video.currentTime / $video.duration;
|
||||
}
|
||||
}, {
|
||||
key: "getLoaded",
|
||||
value: function getLoaded() {
|
||||
var $video = this.art.refs.$video;
|
||||
return $video.buffered.length ? $video.buffered.end($video.buffered.length - 1) / $video.duration : 0;
|
||||
}
|
||||
}, {
|
||||
key: "set",
|
||||
value: function set(type, percentage) {
|
||||
this["$".concat(type)].style.width = "".concat(percentage * 100, "%");
|
||||
|
||||
if (type === 'played') {
|
||||
this.$indicator.style.left = "calc(".concat(percentage * 100, "% - 6.5px)");
|
||||
}
|
||||
}
|
||||
}]);
|
||||
|
||||
return Progress;
|
||||
}();
|
||||
|
||||
var Screenshot = function Screenshot(art, option) {
|
||||
classCallCheck(this, Screenshot);
|
||||
@@ -846,21 +999,21 @@
|
||||
this.add({
|
||||
control: Progress,
|
||||
disable: false,
|
||||
html: 'Progress',
|
||||
html: '',
|
||||
position: 'top',
|
||||
index: 10
|
||||
});
|
||||
this.add({
|
||||
control: Highlight,
|
||||
disable: false,
|
||||
html: 'Highlight',
|
||||
html: '<div class="art-progress-highlight"></div>',
|
||||
position: 'top',
|
||||
index: 20
|
||||
});
|
||||
this.add({
|
||||
control: Screenshot,
|
||||
disable: false,
|
||||
html: 'Screenshot',
|
||||
html: '<div class="art-progress-screenshot"></div>',
|
||||
position: 'top',
|
||||
index: 30
|
||||
});
|
||||
@@ -1011,14 +1164,14 @@
|
||||
}, {
|
||||
key: "show",
|
||||
value: function show() {
|
||||
var $container = this.art.refs.$container;
|
||||
$container.classList.add('controls-show');
|
||||
var $player = this.art.refs.$player;
|
||||
$player.classList.add('controls-show');
|
||||
}
|
||||
}, {
|
||||
key: "hide",
|
||||
value: function hide() {
|
||||
var $container = this.art.refs.$container;
|
||||
$container.classList.remove('controls-show');
|
||||
var $player = this.art.refs.$player;
|
||||
$player.classList.remove('controls-show');
|
||||
}
|
||||
}]);
|
||||
|
||||
@@ -1062,9 +1215,9 @@
|
||||
_this.hide();
|
||||
}
|
||||
});
|
||||
proxy(refs.$container, 'contextmenu', function (event) {
|
||||
proxy(refs.$player, 'contextmenu', function (event) {
|
||||
event.preventDefault();
|
||||
_this.art.focus = true;
|
||||
_this.art.isFocus = true;
|
||||
|
||||
if (!refs.$contextmenu) {
|
||||
_this.creatMenu();
|
||||
@@ -1074,7 +1227,7 @@
|
||||
|
||||
_this.setPos(event);
|
||||
});
|
||||
proxy(refs.$container, 'click', function (event) {
|
||||
proxy(refs.$player, 'click', function (event) {
|
||||
if (refs.$contextmenu && !event.path.includes(refs.$contextmenu)) {
|
||||
_this.hide();
|
||||
}
|
||||
@@ -1111,7 +1264,7 @@
|
||||
|
||||
append(refs.$contextmenu, $menu);
|
||||
});
|
||||
append(refs.$container, refs.$contextmenu);
|
||||
append(refs.$player, refs.$contextmenu);
|
||||
}
|
||||
}, {
|
||||
key: "setPos",
|
||||
@@ -1120,11 +1273,11 @@
|
||||
var mouseX = event.clientX;
|
||||
var mouseY = event.clientY;
|
||||
|
||||
var _refs$$container$getB = refs.$container.getBoundingClientRect(),
|
||||
cHeight = _refs$$container$getB.height,
|
||||
cWidth = _refs$$container$getB.width,
|
||||
cLeft = _refs$$container$getB.left,
|
||||
cTop = _refs$$container$getB.top;
|
||||
var _refs$$player$getBoun = refs.$player.getBoundingClientRect(),
|
||||
cHeight = _refs$$player$getBoun.height,
|
||||
cWidth = _refs$$player$getBoun.width,
|
||||
cLeft = _refs$$player$getBoun.left,
|
||||
cTop = _refs$$player$getBoun.top;
|
||||
|
||||
var _refs$$contextmenu$ge = refs.$contextmenu.getBoundingClientRect(),
|
||||
mHeight = _refs$$contextmenu$ge.height,
|
||||
@@ -1342,11 +1495,24 @@
|
||||
createClass(Events, [{
|
||||
key: "proxy",
|
||||
value: function proxy(target, name, callback) {
|
||||
var _this = this;
|
||||
|
||||
var option = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
|
||||
|
||||
if (Array.isArray(name)) {
|
||||
name.forEach(function (item) {
|
||||
return _this.proxy(target, item, callback, option);
|
||||
});
|
||||
}
|
||||
|
||||
target.addEventListener(name, callback, option);
|
||||
this.destroyEvents.push(function () {
|
||||
|
||||
var destroy = function destroy() {
|
||||
target.removeEventListener(name, callback, option);
|
||||
});
|
||||
};
|
||||
|
||||
this.destroyEvents.push(destroy);
|
||||
return destroy;
|
||||
}
|
||||
}, {
|
||||
key: "destroy",
|
||||
@@ -1382,13 +1548,13 @@
|
||||
player = _this$art.player,
|
||||
notice = _this$art.notice,
|
||||
i18n = _this$art.i18n,
|
||||
$container = _this$art.refs.$container,
|
||||
$player = _this$art.refs.$player,
|
||||
proxy = _this$art.events.proxy;
|
||||
proxy(document, 'click', function (event) {
|
||||
_this.art.focus = event.path.indexOf($container) > -1;
|
||||
_this.art.isFocus = event.path.indexOf($player) > -1;
|
||||
});
|
||||
proxy(window, 'keydown', function (event) {
|
||||
if (_this.art.focus) {
|
||||
if (_this.art.isFocus) {
|
||||
var tag = document.activeElement.tagName.toUpperCase();
|
||||
var editable = document.activeElement.getAttribute('contenteditable');
|
||||
|
||||
@@ -1678,8 +1844,8 @@
|
||||
createClass(Artplayer, [{
|
||||
key: "init",
|
||||
value: function init() {
|
||||
this.focus = false;
|
||||
this.playing = false;
|
||||
this.isFocus = false;
|
||||
this.isPlaying = false;
|
||||
this.refs = {};
|
||||
|
||||
if (this.option.container instanceof Element) {
|
||||
@@ -1688,7 +1854,6 @@
|
||||
this.refs.$container = document.querySelector(this.option.container);
|
||||
}
|
||||
|
||||
this.refs.$container.classList.add('artplayer-container');
|
||||
this.template = new Template(this);
|
||||
this.i18n = new I18n(this);
|
||||
this.events = new Events(this);
|
||||
@@ -1712,7 +1877,6 @@
|
||||
key: "destroy",
|
||||
value: function destroy() {
|
||||
this.events.destroy();
|
||||
this.refs.$container.classList.remove('artplayer-container');
|
||||
this.refs.$container.innerHTML = '';
|
||||
instances.splice(instances.indexOf(this), 1);
|
||||
this.emit('destroy');
|
||||
@@ -1763,7 +1927,7 @@
|
||||
layers: [],
|
||||
contextmenu: [],
|
||||
loading: '',
|
||||
theme: '#1aafff',
|
||||
theme: '#f00',
|
||||
hotkey: true,
|
||||
subtitle: {
|
||||
url: '',
|
||||
|
||||
@@ -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/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
|
||||
{"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
|
||||
+5
-5
@@ -37,9 +37,9 @@ export default class Contextmenu {
|
||||
}
|
||||
);
|
||||
|
||||
proxy(refs.$container, 'contextmenu', event => {
|
||||
proxy(refs.$player, 'contextmenu', event => {
|
||||
event.preventDefault();
|
||||
this.art.focus = true;
|
||||
this.art.isFocus = true;
|
||||
if (!refs.$contextmenu) {
|
||||
this.creatMenu();
|
||||
}
|
||||
@@ -47,7 +47,7 @@ export default class Contextmenu {
|
||||
this.setPos(event);
|
||||
});
|
||||
|
||||
proxy(refs.$container, 'click', event => {
|
||||
proxy(refs.$player, 'click', event => {
|
||||
if (refs.$contextmenu && !event.path.includes(refs.$contextmenu)) {
|
||||
this.hide();
|
||||
}
|
||||
@@ -79,14 +79,14 @@ export default class Contextmenu {
|
||||
}
|
||||
append(refs.$contextmenu, $menu);
|
||||
});
|
||||
append(refs.$container, refs.$contextmenu);
|
||||
append(refs.$player, refs.$contextmenu);
|
||||
}
|
||||
|
||||
setPos(event) {
|
||||
const { refs } = this.art;
|
||||
const mouseX = event.clientX;
|
||||
const mouseY = event.clientY;
|
||||
const { height: cHeight, width: cWidth, left: cLeft, top: cTop } = refs.$container.getBoundingClientRect();
|
||||
const { height: cHeight, width: cWidth, left: cLeft, top: cTop } = refs.$player.getBoundingClientRect();
|
||||
const { height: mHeight, width: mWidth } = refs.$contextmenu.getBoundingClientRect();
|
||||
let menuLeft = mouseX - cLeft;
|
||||
let menuTop = mouseY - cTop;
|
||||
|
||||
@@ -29,7 +29,7 @@ export default class Controls {
|
||||
this.add({
|
||||
control: Progress,
|
||||
disable: false,
|
||||
html: 'Progress',
|
||||
html: '',
|
||||
position: 'top',
|
||||
index: 10
|
||||
});
|
||||
@@ -37,7 +37,7 @@ export default class Controls {
|
||||
this.add({
|
||||
control: Highlight,
|
||||
disable: false,
|
||||
html: 'Highlight',
|
||||
html: '<div class="art-progress-highlight"></div>',
|
||||
position: 'top',
|
||||
index: 20
|
||||
});
|
||||
@@ -45,7 +45,7 @@ export default class Controls {
|
||||
this.add({
|
||||
control: Screenshot,
|
||||
disable: false,
|
||||
html: 'Screenshot',
|
||||
html: '<div class="art-progress-screenshot"></div>',
|
||||
position: 'top',
|
||||
index: 30
|
||||
});
|
||||
@@ -194,12 +194,12 @@ export default class Controls {
|
||||
}
|
||||
|
||||
show() {
|
||||
const { $container } = this.art.refs;
|
||||
$container.classList.add('controls-show');
|
||||
const { $player } = this.art.refs;
|
||||
$player.classList.add('controls-show');
|
||||
}
|
||||
|
||||
hide() {
|
||||
const { $container } = this.art.refs;
|
||||
$container.classList.remove('controls-show');
|
||||
const { $player } = this.art.refs;
|
||||
$player.classList.remove('controls-show');
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,116 @@
|
||||
import { append, secondToTime, clamp } from '../utils';
|
||||
|
||||
export default class Progress {
|
||||
constructor(art, option) {
|
||||
this.art = art;
|
||||
this.option = option;
|
||||
this.getLoaded = this.getLoaded.bind(this);
|
||||
this.getPlayed = this.getPlayed.bind(this);
|
||||
this.getPos = this.getPos.bind(this);
|
||||
this.set = this.set.bind(this);
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
const { option: { theme }, events: { proxy }, player } = this.art;
|
||||
|
||||
append(this.option.ref, `
|
||||
<div class="art-control-progress-inner">
|
||||
<div class="art-progress-loaded"></div>
|
||||
<div class="art-progress-played" style="background: ${theme}"></div>
|
||||
<div class="art-progress-indicator" style="background: ${theme}"></div>
|
||||
<div class="art-progress-timer">00:00</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
this.$loaded = this.option.ref.querySelector('.art-progress-loaded');
|
||||
this.$played = this.option.ref.querySelector('.art-progress-played');
|
||||
this.$indicator = this.option.ref.querySelector('.art-progress-indicator');
|
||||
this.$timer = this.option.ref.querySelector('.art-progress-timer');
|
||||
|
||||
this.art.on('video:canplay', () => {
|
||||
this.set('loaded', this.getLoaded());
|
||||
});
|
||||
|
||||
this.art.on('video:progress', () => {
|
||||
this.set('loaded', this.getLoaded());
|
||||
});
|
||||
|
||||
this.art.on('video:timeupdate', () => {
|
||||
this.set('played', this.getPlayed());
|
||||
});
|
||||
|
||||
this.art.on('video:ended', () => {
|
||||
this.set('played', 1);
|
||||
});
|
||||
|
||||
proxy(this.option.ref, 'mousemove', event => {
|
||||
const { width, time } = this.getPos(event);
|
||||
if (width <= 20) {
|
||||
this.$timer.style.left = 0;
|
||||
} else if (width > this.option.ref.clientWidth - 20) {
|
||||
this.$timer.style.left = `${this.option.ref.clientWidth - 40}px`;
|
||||
} else {
|
||||
this.$timer.style.left = `${width - 20}px`;
|
||||
}
|
||||
this.$timer.innerHTML = time;
|
||||
});
|
||||
|
||||
proxy(this.option.ref, 'click', event => {
|
||||
if (event.target !== this.$indicator) {
|
||||
const { second, percentage } = this.getPos(event);
|
||||
this.set('played', percentage);
|
||||
player.seek(second);
|
||||
}
|
||||
});
|
||||
|
||||
this.isDroging = false;
|
||||
proxy(this.$indicator, 'mousedown', () => {
|
||||
this.isDroging = true;
|
||||
});
|
||||
|
||||
proxy(document, 'mousemove', event => {
|
||||
if (this.isDroging) {
|
||||
const { second, percentage } = this.getPos(event);
|
||||
this.$indicator.classList.add('show-indicator');
|
||||
this.set('played', percentage);
|
||||
player.seek(second);
|
||||
}
|
||||
});
|
||||
|
||||
proxy(document, 'mouseup', () => {
|
||||
if (this.isDroging) {
|
||||
this.isDroging = false;
|
||||
this.$indicator.classList.remove('show-indicator');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getPos(event) {
|
||||
const { $video } = this.art.refs;
|
||||
const { left } = this.option.ref.getBoundingClientRect();
|
||||
const width = event.x - left;
|
||||
const second = width / this.option.ref.clientWidth * $video.duration;
|
||||
const time = secondToTime(second);
|
||||
const percentage = clamp(width / this.option.ref.clientWidth, 0, 1);
|
||||
return { second, time, width, percentage };
|
||||
}
|
||||
|
||||
getPlayed() {
|
||||
const { $video } = this.art.refs;
|
||||
return $video.currentTime / $video.duration;
|
||||
}
|
||||
|
||||
getLoaded() {
|
||||
const { $video } = this.art.refs;
|
||||
return $video.buffered.length ? $video.buffered.end($video.buffered.length - 1) / $video.duration : 0;
|
||||
}
|
||||
|
||||
set(type, percentage) {
|
||||
this[`$${type}`].style.width = `${percentage * 100}%`;
|
||||
if (type === 'played') {
|
||||
this.$indicator.style.left = `calc(${percentage * 100}% - 6.5px)`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+11
-2
@@ -6,10 +6,19 @@ export default class Events {
|
||||
}
|
||||
|
||||
proxy(target, name, callback, option = {}) {
|
||||
if (Array.isArray(name)) {
|
||||
name.forEach(item => this.proxy(target, item, callback, option));
|
||||
}
|
||||
|
||||
target.addEventListener(name, callback, option);
|
||||
this.destroyEvents.push(() => {
|
||||
|
||||
const destroy = () => {
|
||||
target.removeEventListener(name, callback, option);
|
||||
});
|
||||
};
|
||||
|
||||
this.destroyEvents.push(destroy);
|
||||
|
||||
return destroy;
|
||||
}
|
||||
|
||||
destroy() {
|
||||
|
||||
+3
-3
@@ -11,16 +11,16 @@ export default class Hotkey {
|
||||
player,
|
||||
notice,
|
||||
i18n,
|
||||
refs: { $container },
|
||||
refs: { $player },
|
||||
events: { proxy }
|
||||
} = this.art;
|
||||
|
||||
proxy(document, 'click', event => {
|
||||
this.art.focus = event.path.indexOf($container) > -1;
|
||||
this.art.isFocus = event.path.indexOf($player) > -1;
|
||||
});
|
||||
|
||||
proxy(window, 'keydown', event => {
|
||||
if (this.art.focus) {
|
||||
if (this.art.isFocus) {
|
||||
const tag = document.activeElement.tagName.toUpperCase();
|
||||
const editable = document.activeElement.getAttribute('contenteditable');
|
||||
if (
|
||||
|
||||
+3
-5
@@ -53,7 +53,7 @@ class Artplayer extends Emitter {
|
||||
layers: [],
|
||||
contextmenu: [],
|
||||
loading: '',
|
||||
theme: '#1aafff',
|
||||
theme: '#f00',
|
||||
hotkey: true,
|
||||
subtitle: {
|
||||
url: '',
|
||||
@@ -82,8 +82,8 @@ class Artplayer extends Emitter {
|
||||
}
|
||||
|
||||
init() {
|
||||
this.focus = false;
|
||||
this.playing = false;
|
||||
this.isFocus = false;
|
||||
this.isPlaying = false;
|
||||
this.refs = {};
|
||||
|
||||
if (this.option.container instanceof Element) {
|
||||
@@ -91,7 +91,6 @@ class Artplayer extends Emitter {
|
||||
} else {
|
||||
this.refs.$container = document.querySelector(this.option.container);
|
||||
}
|
||||
this.refs.$container.classList.add('artplayer-container');
|
||||
|
||||
this.template = new Template(this);
|
||||
this.i18n = new I18n(this);
|
||||
@@ -116,7 +115,6 @@ class Artplayer extends Emitter {
|
||||
|
||||
destroy() {
|
||||
this.events.destroy();
|
||||
this.refs.$container.classList.remove('artplayer-container');
|
||||
this.refs.$container.innerHTML = '';
|
||||
instances.splice(instances.indexOf(this), 1);
|
||||
this.emit('destroy');
|
||||
|
||||
+14
-5
@@ -11,7 +11,7 @@ export default class Player {
|
||||
init() {
|
||||
const { option } = this.art;
|
||||
const { $video } = this.art.refs;
|
||||
$video.controls = true;
|
||||
$video.controls = false;
|
||||
$video.poster = option.poster;
|
||||
$video.volume = clamp(option.volume, 0, 1);
|
||||
$video.autoplay = option.autoplay;
|
||||
@@ -36,9 +36,14 @@ export default class Player {
|
||||
this.art.loading.hide();
|
||||
});
|
||||
|
||||
this.art.on('video:seeking', () => {
|
||||
this.art.loading.show();
|
||||
});
|
||||
|
||||
this.art.on('video:canplay', () => {
|
||||
this.art.controls.show();
|
||||
this.art.mask.show();
|
||||
this.art.loading.hide();
|
||||
if (this.art.option.autoplay) {
|
||||
const promise = this.play();
|
||||
if (promise !== undefined) {
|
||||
@@ -50,22 +55,26 @@ export default class Player {
|
||||
});
|
||||
|
||||
this.art.on('video:playing', () => {
|
||||
this.art.playing = true;
|
||||
this.art.isPlaying = true;
|
||||
this.art.controls.hide();
|
||||
this.art.mask.hide();
|
||||
});
|
||||
|
||||
this.art.on('video:pause', () => {
|
||||
this.art.playing = false;
|
||||
this.art.isPlaying = false;
|
||||
this.art.controls.show();
|
||||
this.art.mask.show();
|
||||
});
|
||||
|
||||
this.art.on('video:ended', () => {
|
||||
this.art.playing = false;
|
||||
this.art.isPlaying = false;
|
||||
this.art.controls.show();
|
||||
this.art.mask.show();
|
||||
});
|
||||
|
||||
this.art.on('video:error', () => {
|
||||
this.art.isPlaying = false;
|
||||
});
|
||||
}
|
||||
|
||||
play() {
|
||||
@@ -82,7 +91,7 @@ export default class Player {
|
||||
}
|
||||
|
||||
toggle() {
|
||||
if (this.art.playing) {
|
||||
if (this.art.isPlaying) {
|
||||
this.pause();
|
||||
} else {
|
||||
this.play();
|
||||
|
||||
+118
-24
@@ -1,12 +1,26 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
.artplayer-container {
|
||||
.artplayer-video-player {
|
||||
position: relative;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
outline: 0;
|
||||
font-family: Roboto,Arial,Helvetica,sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
color: #eee;
|
||||
text-align: left;
|
||||
direction: ltr;
|
||||
font-size: 14px;
|
||||
line-height: 1.3;
|
||||
user-select: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
touch-action: manipulation;
|
||||
-ms-high-contrast-adjust: none;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.art-icon {
|
||||
svg {
|
||||
@@ -23,6 +37,8 @@
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #000;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.artplayer-subtitle {
|
||||
@@ -74,30 +90,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.artplayer-bottom {
|
||||
position: absolute;
|
||||
z-index: 40;
|
||||
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;
|
||||
}
|
||||
|
||||
&.controls-show, &:hover {
|
||||
.artplayer-bottom {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.artplayer-loading {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 50;
|
||||
z-index: 40;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@@ -108,6 +104,104 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
.art-control-progress {
|
||||
position: relative;
|
||||
height: 5px;
|
||||
padding: 1px 0;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
|
||||
.art-control-progress-inner {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background: rgba(255,255,255,.2);
|
||||
.art-progress-loaded {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
background: rgba(255,255,255,.4);
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
.art-progress-played {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
.art-progress-indicator {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
top: -5px;
|
||||
left: -6.5px;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
border-radius: 50%;
|
||||
|
||||
&.show-indicator {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.art-progress-timer {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
top: -25px;
|
||||
left: 0;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
background: rgba(0,0,0,.7);
|
||||
border-radius: 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.art-progress-indicator, .art-progress-timer {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.controls-show, &:hover {
|
||||
.artplayer-bottom {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.artplayer-notice {
|
||||
display: none;
|
||||
font-size: 13px;
|
||||
|
||||
+14
-11
@@ -7,20 +7,23 @@ export default class Template {
|
||||
init() {
|
||||
const { refs } = this.art;
|
||||
refs.$container.innerHTML = `
|
||||
<video class="artplayer-video" webkit-playsinline playsinline></video>
|
||||
<div class="artplayer-subtitle"></div>
|
||||
<div class="artplayer-layers"></div>
|
||||
<div class="artplayer-mask"></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 class="artplayer-video-player">
|
||||
<video class="artplayer-video" webkit-playsinline playsinline></video>
|
||||
<div class="artplayer-subtitle"></div>
|
||||
<div class="artplayer-layers"></div>
|
||||
<div class="artplayer-mask"></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>
|
||||
<div class="artplayer-loading"></div>
|
||||
<div class="artplayer-notice"></div>
|
||||
`;
|
||||
refs.$player = refs.$container.querySelector('.artplayer-video-player');
|
||||
refs.$video = refs.$container.querySelector('.artplayer-video');
|
||||
refs.$subtitle = refs.$container.querySelector('.artplayer-subtitle');
|
||||
refs.$bottom = refs.$container.querySelector('.artplayer-bottom');
|
||||
|
||||
+13
-2
@@ -15,6 +15,10 @@ export function getExt(url) {
|
||||
return getExt(url.split('?')[0]);
|
||||
}
|
||||
|
||||
if (url.includes('#')) {
|
||||
return getExt(url.split('#')[0]);
|
||||
}
|
||||
|
||||
return url
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
@@ -22,12 +26,11 @@ export function getExt(url) {
|
||||
.pop();
|
||||
}
|
||||
|
||||
|
||||
export function append(parent, child) {
|
||||
if (child instanceof Element) {
|
||||
parent.appendChild(child);
|
||||
} else {
|
||||
parent.innerHTML = child;
|
||||
parent.insertAdjacentHTML('beforeend', child);
|
||||
}
|
||||
return parent;
|
||||
}
|
||||
@@ -38,3 +41,11 @@ export function setStyle(element, styles) {
|
||||
});
|
||||
return element;
|
||||
}
|
||||
|
||||
export function secondToTime(second) {
|
||||
const add0 = num => num < 10 ? `0${num}` : String(num);
|
||||
const hour = Math.floor(second / 3600);
|
||||
const min = Math.floor((second - hour * 3600) / 60);
|
||||
const sec = Math.floor(second - hour * 3600 - min * 60);
|
||||
return (hour > 0 ? [hour, min, sec] : [min, sec]).map(add0).join(':');
|
||||
}
|
||||
Reference in new issue
Block a user