mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-12 23:36:15 -08:00
优化互斥关系
This commit is contained in:
Harvey committed
1 parent
abf60cfef6
commit
5cbb8bd1f3
16 files changed
+242
-29
No files matched your search
@@ -14,6 +14,7 @@ var art = new Artplayer({
|
||||
setting: true,
|
||||
loop: true,
|
||||
flip: true,
|
||||
rotate: true,
|
||||
playbackRate: true,
|
||||
aspectRatio: true,
|
||||
fullscreen: true,
|
||||
|
||||
+103
-16
@@ -144,7 +144,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
var css_248z = ".art-undercover{background:#000;position:fixed;top:0;left:0;display:none;height:100%;width:100%;opacity:.9;z-index:10}.art-video-player{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;margin:0 auto;z-index:20;width:100%;height:100%;outline:0;zoom:1;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-tap-highlight-color:rgba(0,0,0,0);-ms-touch-action:manipulation;touch-action:manipulation;-ms-high-contrast-adjust:none}.art-video-player *{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.art-video-player ::-webkit-scrollbar{width:5px}.art-video-player ::-webkit-scrollbar-thumb{background-color:#666}.art-video-player ::-webkit-scrollbar-thumb:hover{background-color:#ccc}.art-video-player .art-icon{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1.5}.art-video-player .art-icon svg{fill:#fff}.art-video-player img{max-width:100%;vertical-align:top}.art-video-player>object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}@supports ((-webkit-backdrop-filter:initial) or (backdrop-filter:initial)){.art-video-player .art-backdrop-filter{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);background-color:rgba(0,0,0,.7)!important}}.art-video-player .art-video{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background-color:#000;cursor:pointer}.art-video-player .art-subtitle{display:none;position:absolute;z-index:20;bottom:10px;width:100%;padding:0 20px;text-align:center;color:#fff;font-size:20px;pointer-events:none;text-shadow:.5px .5px .5px rgba(0,0,0,.5)}.art-video-player .art-subtitle p{word-break:break-all;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin:5px 0 0;line-height:1}.art-video-player .art-bilingual p:nth-child(2){font-size:.6em}.art-video-player.art-subtitle-show .art-subtitle{display:block}.art-video-player.art-control-show .art-subtitle{bottom:50px}.art-video-player .art-danmuku{z-index:30}.art-video-player .art-danmuku,.art-video-player .art-layers{position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden;pointer-events:none}.art-video-player .art-layers{display:none;z-index:40}.art-video-player .art-layers .art-layer{pointer-events:auto}.art-video-player.art-layer-show .art-layers{display:block}.art-video-player .art-mask{display:none;z-index:50;left:0;top:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden;pointer-events:none}.art-video-player .art-mask,.art-video-player .art-mask .art-state{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute}.art-video-player .art-mask .art-state{right:30px;bottom:55px;width:60px;height:60px;opacity:.6}.art-video-player.art-mask-show .art-mask,.art-video-player .art-mask .art-state{display:-webkit-box;display:-ms-flexbox;display:flex}.art-video-player .art-loading{display:none;position:absolute;z-index:70;left:0;top:0;right:0;bottom:0;width:100%;height:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;pointer-events:none}.art-video-player.art-loading-show .art-loading{display:-webkit-box;display:-ms-flexbox;display:flex}.art-video-player .art-bottom{position:absolute;z-index:60;left:0;right:0;bottom:0;height:100px;padding:55px 10px 0;opacity:0;visibility:hidden;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;pointer-events:none;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom}.art-video-player .art-bottom .art-progress{position:relative;pointer-events:auto}.art-video-player .art-bottom .art-progress .art-control-progress{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:4px;cursor:pointer}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner{position:relative;height:50%;width:100%;background:hsla(0,0%,100%,.2)}.art-video-player .art-bottom .art-progress .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;backLine truncated
|
||||
var css_248z = ".art-undercover{background:#000;position:fixed;top:0;left:0;display:none;height:100%;width:100%;opacity:.9;z-index:10}.art-video-player{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;margin:0 auto;z-index:20;width:100%;height:100%;outline:0;zoom:1;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-tap-highlight-color:rgba(0,0,0,0);-ms-touch-action:manipulation;touch-action:manipulation;-ms-high-contrast-adjust:none}.art-video-player *{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.art-video-player ::-webkit-scrollbar{width:5px}.art-video-player ::-webkit-scrollbar-thumb{background-color:#666}.art-video-player ::-webkit-scrollbar-thumb:hover{background-color:#ccc}.art-video-player .art-icon{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1.5}.art-video-player .art-icon svg{fill:#fff}.art-video-player img{max-width:100%;vertical-align:top}.art-video-player>object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}@supports ((-webkit-backdrop-filter:initial) or (backdrop-filter:initial)){.art-video-player .art-backdrop-filter{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);background-color:rgba(0,0,0,.7)!important}}.art-video-player .art-video{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background-color:#000;cursor:pointer}.art-video-player .art-subtitle{display:none;position:absolute;z-index:20;bottom:10px;width:100%;padding:0 20px;text-align:center;color:#fff;font-size:20px;pointer-events:none;text-shadow:.5px .5px .5px rgba(0,0,0,.5)}.art-video-player .art-subtitle p{word-break:break-all;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin:5px 0 0;line-height:1}.art-video-player .art-bilingual p:nth-child(2){font-size:.6em}.art-video-player.art-subtitle-show .art-subtitle{display:block}.art-video-player.art-control-show .art-subtitle{bottom:50px}.art-video-player .art-danmuku{z-index:30}.art-video-player .art-danmuku,.art-video-player .art-layers{position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden;pointer-events:none}.art-video-player .art-layers{display:none;z-index:40}.art-video-player .art-layers .art-layer{pointer-events:auto}.art-video-player.art-layer-show .art-layers{display:block}.art-video-player .art-mask{display:none;z-index:50;left:0;top:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden;pointer-events:none}.art-video-player .art-mask,.art-video-player .art-mask .art-state{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute}.art-video-player .art-mask .art-state{right:30px;bottom:55px;width:60px;height:60px;opacity:.6}.art-video-player.art-mask-show .art-mask,.art-video-player .art-mask .art-state{display:-webkit-box;display:-ms-flexbox;display:flex}.art-video-player .art-loading{display:none;position:absolute;z-index:70;left:0;top:0;right:0;bottom:0;width:100%;height:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;pointer-events:none}.art-video-player.art-loading-show .art-loading{display:-webkit-box;display:-ms-flexbox;display:flex}.art-video-player .art-bottom{position:absolute;z-index:60;left:0;right:0;bottom:0;height:100px;padding:55px 10px 0;opacity:0;visibility:hidden;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;pointer-events:none;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom}.art-video-player .art-bottom .art-progress{position:relative;pointer-events:auto}.art-video-player .art-bottom .art-progress .art-control-progress{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:4px;cursor:pointer}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner{position:relative;height:50%;width:100%;background:hsla(0,0%,100%,.2)}.art-video-player .art-bottom .art-progress .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;backLine truncated
|
||||
styleInject(css_248z);
|
||||
|
||||
var optionValidator = createCommonjsModule(function (module, exports) {
|
||||
@@ -761,6 +761,7 @@
|
||||
autoMini: 'boolean',
|
||||
loop: 'boolean',
|
||||
flip: 'boolean',
|
||||
rotate: 'boolean',
|
||||
playbackRate: 'boolean',
|
||||
aspectRatio: 'boolean',
|
||||
screenshot: 'boolean',
|
||||
@@ -945,7 +946,8 @@
|
||||
var Pause = "暂停";
|
||||
var Rate = "速度";
|
||||
var Mute = "静音";
|
||||
var Flip = "视频翻转";
|
||||
var Flip = "翻转";
|
||||
var Rotate = "旋转";
|
||||
var Horizontal = "水平";
|
||||
var Vertical = "垂直";
|
||||
var Reconnect = "重新连接";
|
||||
@@ -955,17 +957,18 @@
|
||||
var Open = "打开";
|
||||
var Fullscreen = "全屏";
|
||||
var zhCn = {
|
||||
"Video info": "视频统计信息",
|
||||
"Video info": "统计信息",
|
||||
Close: Close,
|
||||
"Light Off": "关灯",
|
||||
"Light On": "开灯",
|
||||
"Video load failed": "视频加载失败",
|
||||
"Video load failed": "加载失败",
|
||||
Volume: Volume,
|
||||
Play: Play,
|
||||
Pause: Pause,
|
||||
Rate: Rate,
|
||||
Mute: Mute,
|
||||
Flip: Flip,
|
||||
Rotate: Rotate,
|
||||
Horizontal: Horizontal,
|
||||
Vertical: Vertical,
|
||||
Reconnect: Reconnect,
|
||||
@@ -1003,7 +1006,8 @@
|
||||
var Pause$1 = "暫停";
|
||||
var Rate$1 = "速度";
|
||||
var Mute$1 = "靜音";
|
||||
var Flip$1 = "影片翻轉";
|
||||
var Flip$1 = "翻轉";
|
||||
var Rotate$1 = "旋轉";
|
||||
var Horizontal$1 = "水平";
|
||||
var Vertical$1 = "垂直";
|
||||
var Reconnect$1 = "重新連接";
|
||||
@@ -1013,17 +1017,18 @@
|
||||
var Open$1 = "打開";
|
||||
var Fullscreen$1 = "全屏";
|
||||
var zhTw = {
|
||||
"Video info": "影片統計訊息",
|
||||
"Video info": "統計訊息",
|
||||
Close: Close$1,
|
||||
"Light Off": "關燈",
|
||||
"Light On": "開燈",
|
||||
"Video load failed": "影片載入失敗",
|
||||
"Video load failed": "載入失敗",
|
||||
Volume: Volume$1,
|
||||
Play: Play$1,
|
||||
Pause: Pause$1,
|
||||
Rate: Rate$1,
|
||||
Mute: Mute$1,
|
||||
Flip: Flip$1,
|
||||
Rotate: Rotate$1,
|
||||
Horizontal: Horizontal$1,
|
||||
Vertical: Vertical$1,
|
||||
Reconnect: Reconnect$1,
|
||||
@@ -1527,6 +1532,7 @@
|
||||
if (ratio) {
|
||||
var ratioList = ['default', '4:3', '16:9'];
|
||||
errorHandle(ratioList.includes(ratio), "'aspectRatio' only accept ".concat(ratioList.toString(), " as parameters"));
|
||||
player.rotate = 0;
|
||||
|
||||
if (ratio === 'default') {
|
||||
player.aspectRatio = false;
|
||||
@@ -1561,7 +1567,7 @@
|
||||
setStyle($video, 'height', null);
|
||||
setStyle($video, 'padding', null);
|
||||
delete $player.dataset.aspectRatio;
|
||||
art.emit('aspectRatio');
|
||||
art.emit('aspectRatio', 'default');
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -2110,11 +2116,17 @@
|
||||
if (flip) {
|
||||
var flipList = ['normal', 'horizontal', 'vertical'];
|
||||
errorHandle(flipList.includes(flip), "'flip' only accept ".concat(flipList.toString(), " as parameters"));
|
||||
$player.dataset.flip = flip;
|
||||
art.emit('flip', flip);
|
||||
player.rotate = 0;
|
||||
|
||||
if (flip === 'normal') {
|
||||
player.flip = false;
|
||||
} else {
|
||||
$player.dataset.flip = flip;
|
||||
art.emit('flip', flip);
|
||||
}
|
||||
} else {
|
||||
delete $player.dataset.flip;
|
||||
art.emit('flip');
|
||||
art.emit('flip', 'normal');
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -2269,9 +2281,44 @@
|
||||
}
|
||||
|
||||
function rotateMix(art, player) {
|
||||
var _art$template = art.template,
|
||||
$video = _art$template.$video,
|
||||
$player = _art$template.$player,
|
||||
i18n = art.i18n,
|
||||
notice = art.notice;
|
||||
def(player, 'rotate', {
|
||||
get: function get() {
|
||||
return 'rotate';
|
||||
return Number($player.dataset.rotate) || 0;
|
||||
},
|
||||
set: function set(deg) {
|
||||
var degList = [-270, -180, -90, 0, 90, 180, 270];
|
||||
errorHandle(degList.includes(deg), "'rotate' only accept ".concat(degList.toString(), " as parameters"));
|
||||
player.flip = false;
|
||||
player.aspectRatio = false;
|
||||
notice.show = "".concat(i18n.get('Rotate'), ": ").concat(deg, "\xB0");
|
||||
|
||||
if (deg) {
|
||||
var videoWidth = $video.videoWidth,
|
||||
videoHeight = $video.videoHeight;
|
||||
var clientWidth = $player.clientWidth,
|
||||
clientHeight = $player.clientHeight;
|
||||
$player.dataset.rotate = deg;
|
||||
art.emit('rotate', deg);
|
||||
} else {
|
||||
setStyle($video, 'width', null);
|
||||
setStyle($video, 'height', null);
|
||||
setStyle($video, 'padding', null);
|
||||
delete $player.dataset.rotate;
|
||||
art.emit('rotate', 0);
|
||||
}
|
||||
}
|
||||
});
|
||||
def(player, 'rotateReset', {
|
||||
set: function set(value) {
|
||||
if (value && player.rotate) {
|
||||
var rotate = player.rotate;
|
||||
player.rotate = rotate;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -4124,11 +4171,45 @@
|
||||
function ownKeys$m(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
||||
|
||||
function _objectSpread$m(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$m(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
||||
function aspectRatio$1(option) {
|
||||
function rotate(option) {
|
||||
return function (art) {
|
||||
var i18n = art.i18n,
|
||||
player = art.player;
|
||||
return _objectSpread$m(_objectSpread$m({}, option), {}, {
|
||||
html: "\n <div class=\"art-setting-header\">\n ".concat(i18n.get('Rotate'), ": <span class=\"art-rotate-value\">0\xB0</span>\n </div>\n <div class=\"art-setting-radio\">\n <div class=\"art-radio-item\">\n <button type=\"button\" data-value=\"90\">+90\xB0</button>\n </div>\n <div class=\"art-radio-item\">\n <button type=\"button\" data-value=\"-90\">-90\xB0</button>\n </div>\n </div>\n "),
|
||||
click: function click(setting, event) {
|
||||
var value = event.target.dataset.value;
|
||||
|
||||
if (value) {
|
||||
var deg = player.rotate + Number(value);
|
||||
|
||||
if (deg === 360 || deg === -360) {
|
||||
player.rotate = 0;
|
||||
} else {
|
||||
player.rotate = deg;
|
||||
}
|
||||
} else {
|
||||
player.rotate = 0;
|
||||
}
|
||||
},
|
||||
mounted: function mounted($setting) {
|
||||
var $value = query('.art-rotate-value', $setting);
|
||||
art.on('rotate', function (rotate) {
|
||||
$value.innerText = "".concat(rotate, "\xB0");
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
function ownKeys$n(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
||||
|
||||
function _objectSpread$n(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$n(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
||||
function aspectRatio$1(option) {
|
||||
return function (art) {
|
||||
var i18n = art.i18n,
|
||||
player = art.player;
|
||||
return _objectSpread$n(_objectSpread$n({}, option), {}, {
|
||||
html: "\n <div class=\"art-setting-header\">".concat(i18n.get('Aspect ratio'), "</div>\n <div class=\"art-setting-radio\">\n <div class=\"art-radio-item current\">\n <button type=\"button\" data-value=\"default\">").concat(i18n.get('Default'), "</button>\n </div>\n <div class=\"art-radio-item\">\n <button type=\"button\" data-value=\"4:3\">4:3</button>\n </div>\n <div class=\"art-radio-item\">\n <button type=\"button\" data-value=\"16:9\">16:9</button>\n </div>\n </div>\n "),
|
||||
click: function click(setting, event) {
|
||||
var value = event.target.dataset.value;
|
||||
@@ -4152,15 +4233,15 @@
|
||||
};
|
||||
}
|
||||
|
||||
function ownKeys$n(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
||||
function ownKeys$o(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
||||
|
||||
function _objectSpread$n(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$n(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
||||
function _objectSpread$o(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$o(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
||||
function playbackRate$1(option) {
|
||||
return function (art) {
|
||||
var i18n = art.i18n,
|
||||
player = art.player,
|
||||
proxy = art.events.proxy;
|
||||
return _objectSpread$n(_objectSpread$n({}, option), {}, {
|
||||
return _objectSpread$o(_objectSpread$o({}, option), {}, {
|
||||
html: "\n <div class=\"art-setting-header\">\n ".concat(i18n.get('Play speed'), ": <span class=\"art-subtitle-value\">1.0</span>x\n </div>\n <div class=\"art-setting-range\">\n <input class=\"art-subtitle-range\" value=\"1\" type=\"range\" min=\"0.5\" max=\"2\" step=\"0.25\">\n </div>\n "),
|
||||
mounted: function mounted($setting) {
|
||||
var $range = query('.art-setting-range input', $setting);
|
||||
@@ -4217,6 +4298,11 @@
|
||||
name: 'flip'
|
||||
}));
|
||||
|
||||
_this.add(rotate({
|
||||
disable: !option.rotate,
|
||||
name: 'rotate'
|
||||
}));
|
||||
|
||||
_this.add(aspectRatio$1({
|
||||
disable: !option.aspectRatio,
|
||||
name: 'aspectRatio'
|
||||
@@ -4790,6 +4876,7 @@
|
||||
autoMini: false,
|
||||
loop: false,
|
||||
flip: false,
|
||||
rotate: false,
|
||||
playbackRate: false,
|
||||
aspectRatio: false,
|
||||
screenshot: false,
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/classCallCheck.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/createClass.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/inherits.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/typeof.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/_style-inject@0.3.0@style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/_option-validator@2.0.6@option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/isNativeFunction.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/isNativeReflectConstruct.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/construct.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/iterableToArray.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/defineProperty.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/urlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/exclusiveInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/_screenfull@5.0.2@screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/fullscreenRotateMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/lightMix.js","../../packages/artplayer/src/player/miniMix.js","../../packages/artplayer/src/player/loopMin.js","../../packages/artplayer/src/player/rotateMix.js","../../packages/artplayer/src/player/index.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/superPropBase.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/get.js","../../packages/artplayer/src/utils/component.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/volume.js","../../packages/artplayer/src/control/setting.js","../../packages/artplayer/src/control/thumbnails.js","../../packages/artplayer/src/control/screenshot.js","../../packages/artplayer/src/control/quality.js","..Line truncated
|
||||
{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/classCallCheck.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/createClass.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/inherits.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/typeof.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/_style-inject@0.3.0@style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/_option-validator@2.0.6@option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/isNativeFunction.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/isNativeReflectConstruct.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/construct.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/iterableToArray.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/defineProperty.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/urlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/exclusiveInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/_screenfull@5.0.2@screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/fullscreenRotateMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/lightMix.js","../../packages/artplayer/src/player/miniMix.js","../../packages/artplayer/src/player/loopMin.js","../../packages/artplayer/src/player/rotateMix.js","../../packages/artplayer/src/player/index.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/superPropBase.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/get.js","../../packages/artplayer/src/utils/component.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/volume.js","../../packages/artplayer/src/control/setting.js","../../packages/artplayer/src/control/thumbnails.js","../../packages/artplayer/src/control/screenshot.js","../../packages/artplayer/src/control/quality.js","..Line truncated
|
||||
@@ -1,15 +1,16 @@
|
||||
{
|
||||
"Video info": "视频统计信息",
|
||||
"Video info": "统计信息",
|
||||
"Close": "关闭",
|
||||
"Light Off": "关灯",
|
||||
"Light On": "开灯",
|
||||
"Video load failed": "视频加载失败",
|
||||
"Video load failed": "加载失败",
|
||||
"Volume": "音量",
|
||||
"Play": "播放",
|
||||
"Pause": "暂停",
|
||||
"Rate": "速度",
|
||||
"Mute": "静音",
|
||||
"Flip": "视频翻转",
|
||||
"Flip": "翻转",
|
||||
"Rotate": "旋转",
|
||||
"Horizontal": "水平",
|
||||
"Vertical": "垂直",
|
||||
"Reconnect": "重新连接",
|
||||
|
||||
@@ -1,15 +1,16 @@
|
||||
{
|
||||
"Video info": "影片統計訊息",
|
||||
"Video info": "統計訊息",
|
||||
"Close": "關閉",
|
||||
"Light Off": "關燈",
|
||||
"Light On": "開燈",
|
||||
"Video load failed": "影片載入失敗",
|
||||
"Video load failed": "載入失敗",
|
||||
"Volume": "音量",
|
||||
"Play": "播放",
|
||||
"Pause": "暫停",
|
||||
"Rate": "速度",
|
||||
"Mute": "靜音",
|
||||
"Flip": "影片翻轉",
|
||||
"Flip": "翻轉",
|
||||
"Rotate": "旋轉",
|
||||
"Horizontal": "水平",
|
||||
"Vertical": "垂直",
|
||||
"Reconnect": "重新連接",
|
||||
|
||||
@@ -114,6 +114,7 @@ export default class Artplayer extends Emitter {
|
||||
autoMini: false,
|
||||
loop: false,
|
||||
flip: false,
|
||||
rotate: false,
|
||||
playbackRate: false,
|
||||
aspectRatio: false,
|
||||
screenshot: false,
|
||||
|
||||
@@ -19,6 +19,7 @@ export default function aspectRatioMix(art, player) {
|
||||
`'aspectRatio' only accept ${ratioList.toString()} as parameters`,
|
||||
);
|
||||
|
||||
player.rotate = 0;
|
||||
if (ratio === 'default') {
|
||||
player.aspectRatio = false;
|
||||
} else {
|
||||
@@ -48,7 +49,7 @@ export default function aspectRatioMix(art, player) {
|
||||
setStyle($video, 'height', null);
|
||||
setStyle($video, 'padding', null);
|
||||
delete $player.dataset.aspectRatio;
|
||||
art.emit('aspectRatio');
|
||||
art.emit('aspectRatio', 'default');
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
@@ -10,11 +10,16 @@ export default function flipMix(art, player) {
|
||||
if (flip) {
|
||||
const flipList = ['normal', 'horizontal', 'vertical'];
|
||||
errorHandle(flipList.includes(flip), `'flip' only accept ${flipList.toString()} as parameters`);
|
||||
$player.dataset.flip = flip;
|
||||
art.emit('flip', flip);
|
||||
player.rotate = 0;
|
||||
if (flip === 'normal') {
|
||||
player.flip = false;
|
||||
} else {
|
||||
$player.dataset.flip = flip;
|
||||
art.emit('flip', flip);
|
||||
}
|
||||
} else {
|
||||
delete $player.dataset.flip;
|
||||
art.emit('flip');
|
||||
art.emit('flip', 'normal');
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,7 +1,44 @@
|
||||
import { def } from '../utils';
|
||||
import { setStyle, errorHandle, def } from '../utils';
|
||||
|
||||
export default function rotateMix(art, player) {
|
||||
const {
|
||||
template: { $video, $player },
|
||||
i18n,
|
||||
notice,
|
||||
} = art;
|
||||
|
||||
def(player, 'rotate', {
|
||||
get: () => 'rotate',
|
||||
get: () => Number($player.dataset.rotate) || 0,
|
||||
set: (deg) => {
|
||||
const degList = [-270, -180, -90, 0, 90, 180, 270];
|
||||
errorHandle(degList.includes(deg), `'rotate' only accept ${degList.toString()} as parameters`);
|
||||
player.flip = false;
|
||||
player.aspectRatio = false;
|
||||
notice.show = `${i18n.get('Rotate')}: ${deg}°`;
|
||||
|
||||
if (deg) {
|
||||
const { videoWidth, videoHeight } = $video;
|
||||
const { clientWidth, clientHeight } = $player;
|
||||
const degFormat = deg < 0 ? deg + 360 : deg;
|
||||
|
||||
$player.dataset.rotate = deg;
|
||||
art.emit('rotate', deg);
|
||||
} else {
|
||||
setStyle($video, 'width', null);
|
||||
setStyle($video, 'height', null);
|
||||
setStyle($video, 'padding', null);
|
||||
delete $player.dataset.rotate;
|
||||
art.emit('rotate', 0);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
def(player, 'rotateReset', {
|
||||
set(value) {
|
||||
if (value && player.rotate) {
|
||||
const { rotate } = player;
|
||||
player.rotate = rotate;
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -35,6 +35,7 @@ export default {
|
||||
autoMini: 'boolean',
|
||||
loop: 'boolean',
|
||||
flip: 'boolean',
|
||||
rotate: 'boolean',
|
||||
playbackRate: 'boolean',
|
||||
aspectRatio: 'boolean',
|
||||
screenshot: 'boolean',
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import Component from '../utils/component';
|
||||
import flip from './flip';
|
||||
import rotate from './rotate';
|
||||
import aspectRatio from './aspectRatio';
|
||||
import playbackRate from './playbackRate';
|
||||
|
||||
@@ -32,6 +33,13 @@ export default class Setting extends Component {
|
||||
}),
|
||||
);
|
||||
|
||||
this.add(
|
||||
rotate({
|
||||
disable: !option.rotate,
|
||||
name: 'rotate',
|
||||
}),
|
||||
);
|
||||
|
||||
this.add(
|
||||
aspectRatio({
|
||||
disable: !option.aspectRatio,
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
import { query } from '../utils';
|
||||
|
||||
export default function rotate(option) {
|
||||
return (art) => {
|
||||
const { i18n, player } = art;
|
||||
return {
|
||||
...option,
|
||||
html: `
|
||||
<div class="art-setting-header">
|
||||
${i18n.get('Rotate')}: <span class="art-rotate-value">0°</span>
|
||||
</div>
|
||||
<div class="art-setting-radio">
|
||||
<div class="art-radio-item">
|
||||
<button type="button" data-value="90">+90°</button>
|
||||
</div>
|
||||
<div class="art-radio-item">
|
||||
<button type="button" data-value="-90">-90°</button>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
click: (setting, event) => {
|
||||
const { value } = event.target.dataset;
|
||||
if (value) {
|
||||
const deg = player.rotate + Number(value);
|
||||
if (deg === 360 || deg === -360) {
|
||||
player.rotate = 0;
|
||||
} else {
|
||||
player.rotate = deg;
|
||||
}
|
||||
} else {
|
||||
player.rotate = 0;
|
||||
}
|
||||
},
|
||||
mounted: ($setting) => {
|
||||
const $value = query('.art-rotate-value', $setting);
|
||||
art.on('rotate', (rotate) => {
|
||||
$value.innerText = `${rotate}°`;
|
||||
});
|
||||
},
|
||||
};
|
||||
};
|
||||
}
|
||||
@@ -17,5 +17,6 @@
|
||||
@import './mini.scss';
|
||||
@import './autoSize.scss';
|
||||
@import './flip.scss';
|
||||
@import './rotate.scss';
|
||||
@import './selector.scss';
|
||||
@import './balloon.scss';
|
||||
@@ -0,0 +1,22 @@
|
||||
.art-video-player {
|
||||
&[data-rotate='90'],
|
||||
&[data-rotate='-270'] {
|
||||
.art-video {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
&[data-rotate='180'],
|
||||
&[data-rotate='-180'] {
|
||||
.art-video {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
&[data-rotate='270'],
|
||||
&[data-rotate='-90'] {
|
||||
.art-video {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -53,6 +53,10 @@
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 2px;
|
||||
|
||||
&:active {
|
||||
background-color: #00a1d6;
|
||||
}
|
||||
}
|
||||
&.current button {
|
||||
background-color: #00a1d6;
|
||||
|
||||
+1
@@ -30,6 +30,7 @@ export default class Artplayer {
|
||||
autoMini?: boolean;
|
||||
loop?: boolean;
|
||||
flip?: boolean;
|
||||
rotate?: boolean;
|
||||
playbackRate?: boolean;
|
||||
aspectRatio?: boolean;
|
||||
screenshot?: boolean;
|
||||
|
||||
Reference in new issue
Block a user