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

add posterMix

Browse Source
This commit is contained in:
Harvey committed 2021-11-01 09:21:14 +08:00
1 parent d5b4851a8f
commit ec97a5912e
9 files changed
+77 -55
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/uncompiled/artplayer.js
+29 -8
View File
@@ -225,7 +225,7 @@
return Emitter;
}();
var userAgent = window.navigator.userAgent;
var userAgent = typeof window !== 'undefined' ? window.navigator.userAgent : '';
var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
var isSafari = /^((?!chrome|android).)*safari/i.test(userAgent);
var isWechat = /MicroMessenger/i.test(userAgent);
@@ -883,21 +883,16 @@
value: function query$1(className) {
return query(className, this.$container);
}
}, {
key: "html",
value: function html() {
var theme = this.art.option.theme;
return "\n <div class=\"art-undercover\"></div>\n <div class=\"art-video-player art-subtitle-show art-layer-show\" style=\"--theme: ".concat(theme, "\">\n <video class=\"art-video\"></video>\n <div class=\"art-poster\"></div>\n <div class=\"art-subtitle\"></div>\n <div class=\"art-danmuku\"></div>\n <div class=\"art-layers\"></div>\n <div class=\"art-mask\">\n <div class=\"art-state\"></div>\n </div>\n <div class=\"art-bottom\">\n <div class=\"art-progress\"></div>\n <div class=\"art-controls\">\n <div class=\"art-controls-left\"></div>\n <div class=\"art-controls-right\"></div>\n </div>\n </div>\n <div class=\"art-loading\"></div>\n <div class=\"art-notice\">\n <div class=\"art-notice-inner\"></div>\n </div>\n <div class=\"art-settings\">\n <div class=\"art-setting-inner\">\n <div class=\"art-setting-body\"></div>\n </div>\n </div>\n <div class=\"art-info\">\n <div class=\"art-info-panel\">\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Player version:</div>\n <div class=\"art-info-content\">3.5.30</div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video url:</div>\n <div class=\"art-info-content\" data-video=\"src\"></div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video volume:</div>\n <div class=\"art-info-content\" data-video=\"volume\"></div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video time:</div>\n <div class=\"art-info-content\" data-video=\"currentTime\"></div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video duration:</div>\n <div class=\"art-info-content\" data-video=\"duration\"></div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video resolution:</div>\n <div class=\"art-info-content\">\n <span data-video=\"videoWidth\"></span> x <span data-video=\"videoHeight\"></span>\n </div>\n </div>\n </div>\n <div class=\"art-info-close\">[x]</div>\n </div>\n <div class=\"art-mini-header\">\n <div class=\"art-mini-title\"></div>\n <div class=\"art-mini-close\">\xD7</div>\n </div>\n <div class=\"art-contextmenus\"></div>\n </div>\n ");
}
}, {
key: "desktop",
value: function desktop() {
var _this$art$option = this.art.option,
backdrop = _this$art$option.backdrop,
theme = _this$art$option.theme,
useSSR = _this$art$option.useSSR;
if (!useSSR) {
this.$container.innerHTML = this.html();
this.$container.innerHTML = Template.html;
}
this.$undercover = this.query('.art-undercover');
@@ -927,6 +922,7 @@
this.$miniTitle = this.query('.art-mini-title');
this.$miniClose = this.query('.art-mini-close');
this.$contextmenu = this.query('.art-contextmenus');
setStyle(this.$player, '--theme', theme);
if (backdrop) {
addClass(this.$settingInner, 'art-backdrop-filter');
@@ -957,6 +953,11 @@
addClass(this.$player, 'art-destroy');
}
}
}], [{
key: "html",
get: function get() {
return "\n <div class=\"art-undercover\"></div>\n <div class=\"art-video-player art-subtitle-show art-layer-show\">\n <video class=\"art-video\"></video>\n <div class=\"art-poster\"></div>\n <div class=\"art-subtitle\"></div>\n <div class=\"art-danmuku\"></div>\n <div class=\"art-layers\"></div>\n <div class=\"art-mask\">\n <div class=\"art-state\"></div>\n </div>\n <div class=\"art-bottom\">\n <div class=\"art-progress\"></div>\n <div class=\"art-controls\">\n <div class=\"art-controls-left\"></div>\n <div class=\"art-controls-right\"></div>\n </div>\n </div>\n <div class=\"art-loading\"></div>\n <div class=\"art-notice\">\n <div class=\"art-notice-inner\"></div>\n </div>\n <div class=\"art-settings\">\n <div class=\"art-setting-inner\">\n <div class=\"art-setting-body\"></div>\n </div>\n </div>\n <div class=\"art-info\">\n <div class=\"art-info-panel\">\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Player version:</div>\n <div class=\"art-info-content\">3.5.30</div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video url:</div>\n <div class=\"art-info-content\" data-video=\"src\"></div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video volume:</div>\n <div class=\"art-info-content\" data-video=\"volume\"></div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video time:</div>\n <div class=\"art-info-content\" data-video=\"currentTime\"></div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video duration:</div>\n <div class=\"art-info-content\" data-video=\"duration\"></div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video resolution:</div>\n <div class=\"art-info-content\">\n <span data-video=\"videoWidth\"></span> x <span data-video=\"videoHeight\"></span>\n </div>\n </div>\n </div>\n <div class=\"art-info-close\">[x]</div>\n </div>\n <div class=\"art-mini-header\">\n <div class=\"art-mini-title\"></div>\n <div class=\"art-mini-close\">\xD7</div>\n </div>\n <div class=\"art-contextmenus\"></div>\n </div>\n ";
}
}]);
return Template;
@@ -2440,6 +2441,20 @@
});
}
function posterMix(art, player) {
var option = art.option,
$poster = art.template.$poster;
def(player, 'poster', {
get: function get() {
return option.poster;
},
set: function set(url) {
option.poster = url;
setStyle($poster, 'backgroundImage', "url(".concat(url, ")"));
}
});
}
var Player = function Player(art) {
classCallCheck(this, Player);
@@ -2472,6 +2487,7 @@
miniMix(art, this);
loopMin(art, this);
rotateMix(art, this);
posterMix(art, this);
proxyPropertys(art, this);
};
@@ -5064,6 +5080,11 @@
get: function get() {
return optionValidator.kindOf;
}
}, {
key: "html",
get: function get() {
return Template.html;
}
}, {
key: "option",
get: function get() {