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

update

Browse Source
This commit is contained in:
Harvey committed 2022-06-20 17:23:05 +08:00
1 parent 9716f97a51
commit 3dea070ade
4 files changed
+165 -22
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/uncompiled/artplayer-plugin-ads/index.js
+63 -8
View File
@@ -149,11 +149,12 @@ var _styleLess = require("bundle-text:./style.less");
var _styleLessDefault = parcelHelpers.interopDefault(_styleLess);
function artplayerPluginAds(option) {
return (art)=>{
const { template: { $player } , constructor: { utils: { query , append , setStyle } , } , } = art;
const { template: { $player } , icons: { volume , volumeClose , fullscreenOn , fullscreenOff } , constructor: { utils: { query , append , setStyle } , } , } = art;
let $ads = null;
let $timer = null;
let $close = null;
let $countdown = null;
let $control = null;
let time = 0;
let timer = null;
let isEnd = false;
@@ -166,7 +167,6 @@ function artplayerPluginAds(option) {
}
function play() {
if (isEnd) return;
setStyle($timer, "display", "flex");
timer = setTimeout(()=>{
time += 1;
const playDuration = option.playDuration - time;
@@ -184,7 +184,7 @@ function artplayerPluginAds(option) {
if (isEnd) return;
clearTimeout(timer);
}
function show() {
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>`);
$timer = append(art.template.$ads, `<div class="artplayer-plugin-ads-timer">
@@ -193,24 +193,79 @@ function artplayerPluginAds(option) {
</div>`);
$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-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);
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", ()=>{
$ads.muted = !$ads.muted;
if ($ads.muted) {
setStyle($volume, "display", "none");
setStyle($volumeClose, "display", "inline-flex");
} else {
setStyle($volume, "display", "inline-flex");
setStyle($volumeClose, "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", ()=>{
art.fullscreen = !art.fullscreen;
if (art.fullscreen) {
setStyle($fullscreenOn, "display", "inline-flex");
setStyle($fullscreenOff, "display", "none");
} else {
setStyle($fullscreenOn, "display", "none");
setStyle($fullscreenOff, "display", "inline-flex");
}
});
art.proxy($ads, "click", ()=>{
if (option.url) window.open(option.url);
art.emit("artplayerPluginAds:click", option);
});
return $ads;
art.proxy($detail, "click", ()=>{
if (option.url) window.open(option.url);
art.emit("artplayerPluginAds:click", option);
});
}
art.on("ready", ()=>{
art.once("play", ()=>{
show();
init();
art.pause();
if (option.video) {
art.proxy($ads, "ended", skip);
art.proxy($ads, "error", skip);
art.proxy($ads, "loadedmetadata", ()=>{
play();
$ads.play();
setStyle($timer, "display", "flex");
});
} else play();
} else {
play();
setStyle($timer, "display", "flex");
}
});
art.proxy(document, "visibilitychange", ()=>{
if (document.hidden) pause();
else play();
});
});
return {
@@ -266,7 +321,7 @@ exports.export = function(dest, destName, get) {
};
},{}],"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 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 font-size: 14px;\n line-height: 1;\n display: none;\n position: absolute;\n top: 10px;\n right: 10px;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-timer .artplayer-plugin-ads-close {\n cursor: pointer;\n background-color: #000000bf;\n border-radius: 15px;\n margin-right: 5px;\n padding: 5px 10px;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-timer .artplayer-plugin-ads-countdown {\n background-color: #000000bf;\n border-radius: 15px;\n padding: 5px 10px;\n}\n\n";
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")