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

update

Browse Source
This commit is contained in:
Harvey committed 2022-06-21 10:01:07 +08:00
1 parent 0535b798b2
commit 9a2fd6d9fd
4 files changed
+135 -97
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/uncompiled/artplayer-plugin-ads/index.js
+83 -70
View File
@@ -142,7 +142,7 @@
this[globalName] = mainExports;
}
}
})({"3H9sA":[function(require,module,exports) {
})({"gEVO5":[function(require,module,exports) {
var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
parcelHelpers.defineInteropFlag(exports);
var _styleLess = require("bundle-text:./style.less");
@@ -150,12 +150,31 @@ var _styleLessDefault = parcelHelpers.interopDefault(_styleLess);
function artplayerPluginAds(option) {
return (art)=>{
const { template: { $player } , icons: { volume , volumeClose , fullscreenOn , fullscreenOff } , constructor: { validator , utils: { query , append , setStyle } , } , } = art;
option = validator(option, {
html: '?string',
video: '?string',
url: '?string',
playDuration: 'number',
totalDuration: 'number'
option = validator({
html: "",
video: "",
url: "",
playDuration: 5,
totalDuration: 10,
i18n: {
close: "\u5173\u95ED\u5E7F\u544A",
countdown: "%s\u79D2",
detail: "\u67E5\u770B\u8BE6\u60C5",
canBeClosed: "%s\u79D2\u540E\u53EF\u5173\u95ED\u5E7F\u544A"
},
...option
}, {
html: "?string",
video: "?string",
url: "?string",
playDuration: "number",
totalDuration: "number",
i18n: {
close: "string",
countdown: "string",
detail: "string",
canBeClosed: "string"
}
});
let $ads = null;
let $timer = null;
@@ -165,24 +184,27 @@ function artplayerPluginAds(option) {
let time = 0;
let timer = null;
let isEnd = false;
function getI18n(val, str) {
return str.replace("%s", val);
}
function skip() {
isEnd = true;
art.play();
if (option.video) $ads.pause();
setStyle(art.template.$ads, 'display', 'none');
art.emit('artplayerPluginAds:skip', option);
setStyle(art.template.$ads, "display", "none");
art.emit("artplayerPluginAds:skip", option);
}
function play() {
if (isEnd) return;
timer = setTimeout(()=>{
time += 1;
const playDuration = option.playDuration - time;
if (playDuration >= 1) $close.innerHTML = `${playDuration}秒后可关闭广告`;
if (playDuration >= 1) $close.innerHTML = getI18n(playDuration, option.i18n.canBeClosed);
else {
$close.innerHTML = '关闭广告';
art.proxy($close, 'click', skip);
$close.innerHTML = option.i18n.close;
art.proxy($close, "click", skip);
}
$countdown.innerHTML = `${option.totalDuration - time}秒`;
$countdown.innerHTML = getI18n(option.totalDuration - time, option.i18n.countdown);
if (time >= option.totalDuration) skip();
else play();
}, 1000);
@@ -193,92 +215,83 @@ function artplayerPluginAds(option) {
}
function init() {
art.template.$ads = append($player, '<div class="artplayer-plugin-ads"></div>');
$ads = append(art.template.$ads, option.video ? `<video class="artplayer-plugin-ads-video" src="${option.video}"></video>` : `<div class="artplayer-plugin-ads-html">${option.html}</div>`);
$ads = append(art.template.$ads, option.video ? `<video class="artplayer-plugin-ads-video" src="${option.video}" loop></video>` : `<div class="artplayer-plugin-ads-html">${option.html}</div>`);
$timer = append(art.template.$ads, `<div class="artplayer-plugin-ads-timer">
<div class="artplayer-plugin-ads-close">${option.playDuration}秒后可关闭广告</div>
<div class="artplayer-plugin-ads-countdown">${option.totalDuration}秒</div>
<div class="artplayer-plugin-ads-close">${getI18n(option.playDuration, option.i18n.canBeClosed)}</div>
<div class="artplayer-plugin-ads-countdown">${getI18n(option.totalDuration, option.i18n.countdown)}</div>
</div>`);
$close = query('.artplayer-plugin-ads-close', $timer);
$countdown = query('.artplayer-plugin-ads-countdown', $timer);
$close = query(".artplayer-plugin-ads-close", $timer);
$countdown = query(".artplayer-plugin-ads-countdown", $timer);
$control = append(art.template.$ads, `<div class="artplayer-plugin-ads-control">
<div class="artplayer-plugin-ads-detail">查看详情</div>
<div class="artplayer-plugin-ads-detail">${option.i18n.detail}</div>
<div class="artplayer-plugin-ads-muted"></div>
<div class="artplayer-plugin-ads-fullscreen"></div>
</div>`);
const $detail = query('.artplayer-plugin-ads-detail', $control);
const $muted = query('.artplayer-plugin-ads-muted', $control);
const $fullscreen = query('.artplayer-plugin-ads-fullscreen', $control);
const $detail = query(".artplayer-plugin-ads-detail", $control);
const $muted = query(".artplayer-plugin-ads-muted", $control);
const $fullscreen = query(".artplayer-plugin-ads-fullscreen", $control);
if (option.video) {
const $volume = append($muted, volume);
const $volumeClose = append($muted, volumeClose);
setStyle($volumeClose, 'display', 'none');
art.proxy($ads, 'loadedmetadata', ()=>{
if ($ads.muted) {
setStyle($volume, 'display', 'none');
setStyle($volumeClose, 'display', 'inline-flex');
} else {
setStyle($volume, 'display', 'inline-flex');
setStyle($volumeClose, 'display', 'none');
}
});
art.proxy($muted, 'click', ()=>{
setStyle($volumeClose, "display", "none");
art.proxy($muted, "click", ()=>{
$ads.muted = !$ads.muted;
if ($ads.muted) {
setStyle($volume, 'display', 'none');
setStyle($volumeClose, 'display', 'inline-flex');
setStyle($volume, "display", "none");
setStyle($volumeClose, "display", "inline-flex");
} else {
setStyle($volume, 'display', 'inline-flex');
setStyle($volumeClose, 'display', 'none');
setStyle($volume, "display", "inline-flex");
setStyle($volumeClose, "display", "none");
}
});
} else setStyle($muted, 'display', 'none');
} else setStyle($muted, "display", "none");
const $fullscreenOn = append($fullscreen, fullscreenOn);
const $fullscreenOff = append($fullscreen, fullscreenOff);
setStyle($fullscreenOff, 'display', 'none');
art.proxy($fullscreen, 'click', ()=>{
setStyle($fullscreenOff, "display", "none");
art.proxy($fullscreen, "click", ()=>{
art.fullscreen = !art.fullscreen;
if (art.fullscreen) {
setStyle($fullscreenOn, 'display', 'inline-flex');
setStyle($fullscreenOff, 'display', 'none');
setStyle($fullscreenOn, "display", "inline-flex");
setStyle($fullscreenOff, "display", "none");
} else {
setStyle($fullscreenOn, 'display', 'none');
setStyle($fullscreenOff, 'display', 'inline-flex');
setStyle($fullscreenOn, "display", "none");
setStyle($fullscreenOff, "display", "inline-flex");
}
});
art.proxy($ads, 'click', ()=>{
art.proxy($ads, "click", ()=>{
if (option.url) window.open(option.url);
art.emit('artplayerPluginAds:click', option);
art.emit("artplayerPluginAds:click", option);
});
art.proxy($detail, 'click', ()=>{
art.proxy($detail, "click", ()=>{
if (option.url) window.open(option.url);
art.emit('artplayerPluginAds:click', option);
art.emit("artplayerPluginAds:click", option);
});
}
art.on('ready', ()=>{
art.once('play', ()=>{
art.on("ready", ()=>{
art.once("play", ()=>{
init();
art.pause();
if (option.video) {
art.loading.show = true;
art.proxy($ads, 'error', skip);
art.proxy($ads, 'loadedmetadata', ()=>{
art.proxy($ads, "error", skip);
art.proxy($ads, "loadedmetadata", ()=>{
play();
$ads.play();
art.loading.show = false;
setStyle($timer, 'display', 'flex');
setStyle($timer, "display", "flex");
});
} else {
play();
setStyle($timer, 'display', 'flex');
setStyle($timer, "display", "flex");
}
});
art.proxy(document, 'visibilitychange', ()=>{
art.proxy(document, "visibilitychange", ()=>{
if (document.hidden) pause();
else play();
});
});
return {
name: 'artplayerPluginAds',
name: "artplayerPluginAds",
skip,
pause,
play
@@ -288,34 +301,31 @@ function artplayerPluginAds(option) {
exports.default = artplayerPluginAds;
artplayerPluginAds.env = "development";
artplayerPluginAds.version = "4.4.8";
artplayerPluginAds.build = "1655733759532";
if (typeof document !== 'undefined') {
if (!document.getElementById('artplayer-plugin-ads')) {
const $style = document.createElement('style');
$style.id = 'artplayer-plugin-ads';
$style.textContent = _styleLessDefault.default;
artplayerPluginAds.build = "1655692550967";
if (typeof document !== "undefined") {
if (!document.getElementById("artplayer-plugin-ads")) {
const $style = document.createElement("style");
$style.id = "artplayer-plugin-ads";
$style.textContent = (0, _styleLessDefault.default);
document.head.appendChild($style);
}
}
if (typeof window !== 'undefined') window['artplayerPluginAds'] = artplayerPluginAds;
if (typeof window !== "undefined") window["artplayerPluginAds"] = artplayerPluginAds;
},{"bundle-text:./style.less":"juGHU","@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"juGHU":[function(require,module,exports) {
module.exports = ".artplayer-plugin-ads {\n z-index: 150;\n width: 100%;\n height: 100%;\n color: #fff;\n background-color: #000;\n font-size: 13px;\n line-height: 1;\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-html {\n width: 100%;\n height: 100%;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-video {\n width: 100%;\n height: 100%;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-timer {\n display: none;\n position: absolute;\n top: 10px;\n right: 10px;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-timer > div {\n cursor: pointer;\n background-color: #000000bf;\n border-radius: 15px;\n align-items: center;\n margin-left: 5px;\n padding: 5px 10px;\n display: flex;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-control {\n display: flex;\n position: absolute;\n bottom: 10px;\n right: 10px;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-control > div {\n cursor: pointer;\n background-color: #000000bf;\n border-radius: 15px;\n align-items: center;\n margin-left: 5px;\n padding: 5px 10px;\n display: flex;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-control .art-icon svg {\n width: 20px;\n height: 20px;\n}\n\n";
},{}],"5dUr6":[function(require,module,exports) {
},{"@parcel/transformer-js/src/esmodule-helpers.js":"8MjWm","bundle-text:./style.less":"1ZB0H"}],"8MjWm":[function(require,module,exports) {
exports.interopDefault = function(a) {
return a && a.__esModule ? a : {
default: a
};
};
exports.defineInteropFlag = function(a) {
Object.defineProperty(a, '__esModule', {
Object.defineProperty(a, "__esModule", {
value: true
});
};
exports.exportAll = function(source, dest) {
Object.keys(source).forEach(function(key) {
if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) return;
if (key === "default" || key === "__esModule" || dest.hasOwnProperty(key)) return;
Object.defineProperty(dest, key, {
enumerable: true,
get: function() {
@@ -332,6 +342,9 @@ exports.export = function(dest, destName, get) {
});
};
},{}]},["3H9sA"], "3H9sA", "parcelRequire4dc0")
},{}],"1ZB0H":[function(require,module,exports) {
module.exports = ".artplayer-plugin-ads {\n z-index: 150;\n width: 100%;\n height: 100%;\n color: #fff;\n background-color: #000;\n font-size: 13px;\n line-height: 1;\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-html {\n width: 100%;\n height: 100%;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-video {\n width: 100%;\n height: 100%;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-timer {\n display: none;\n position: absolute;\n top: 10px;\n right: 10px;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-timer > div {\n cursor: pointer;\n background-color: #000000bf;\n border-radius: 15px;\n align-items: center;\n margin-left: 5px;\n padding: 5px 10px;\n display: flex;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-control {\n display: flex;\n position: absolute;\n bottom: 10px;\n right: 10px;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-control > div {\n cursor: pointer;\n background-color: #000000bf;\n border-radius: 15px;\n align-items: center;\n margin-left: 5px;\n padding: 5px 10px;\n display: flex;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-control .art-icon svg {\n width: 20px;\n height: 20px;\n}\n\n";
},{}]},["gEVO5"], "gEVO5", "parcelRequirea5da")
//# sourceMappingURL=index.js.map