虹桥 - 欢乐水吧 - 花潮论坛 - Powered by Discuz! Archiver

马黑黑 发表于 2023-1-4 12:18

虹桥

马黑黑 发表于 2023-1-4 12:18

本帖最后由马黑黑于 2023-1-4 12:38 编辑

播放器插件的封装有点匆忙，尚未细细推敲，也许会有冗余和错误：(function(mkPlayer) {let defaults = {lrcAr: [ ],lrc_css: 'top: 20px; left: 50%; transform: translateX(-50%);',player_css: 'bottom: 20px; left: calc(50% - var(--ww) / 2);', total: 20,playerCode: `<style>#mplayer {--ww: 200px;--bg: linear-gradient(180deg,gold,lightblue,yellow);--bc: #000;position: absolute;width: var(--ww);height: var(--ww);display: grid;place-items: center;transform: rotateZ(15deg);transform-style: preserve-3d;animation: rot 10s infinite linear;cursor: pointer;}.mline {width: var(--ww);height: var(--ww);border-radius: 50%;border: 1px dotted var(--bc);background: var(--bg);position: absolute;opacity: .75;}#btnMsg { position: absolute; color: snow; background: green; opacity: 0; border: 2px solid snow; border-radius: 8px; padding: 4px; transition: all .75s; cursor: pointer; z-index: 901; }#lrc { --motion: cover2; --tt: 1s; --state: running; --bg: linear-gradient(180deg,hsla(100,10%,50%,.75),hsla(100,100%,20%,.65)); position: absolute; font: bold 2.4em sans-serif; color: hsl(100, 100%, 90%); white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 100%, 0%, .85)); z-index: 900; }#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: var(--bg); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }@keyframes cover1 { from { width: 0; }to { width: 100%; } }@keyframes cover2 { from { width: 0; } to { width: 100%; } }@keyframes rot { to { transform: rotateZ(15deg) rotateY(1turn); } }</style><div id="lrc" data-lrc="HCPlayer">HCPlayer</div><div id="mplayer"></div><span id="btnMsg">全屏观赏</span>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;let mKey = 0, mFlag = true, fs = false, msize = mplayer.offsetWidth, tnow = Date.now(), timerId;;[...Array(data.total).keys()].forEach( (item,key) => {item = document.createElement('span');item.className = 'mline';item.style.transform= `rotateY(${360/data.total*key}deg)`;mplayer.appendChild(item);});mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();btnMsg.onclick = () => fs ? document.exitFullscreen() : papa.requestFullscreen();papa.onmousemove = (e) => {clearTimeout(timerId);btnMsg.style.opacity = '.95';timerId = setTimeout('btnMsg.style.opacity = "0"', 3000);};document.addEventListener("fullscreenchange", () => {if (document.fullscreenElement !== null) {fs = true;mplayer.style.setProperty('--ww', msize*1.5 + 'px');btnMsg.innerText = '退出全屏';} else {fs = false;mplayer.style.setProperty('--ww', msize + 'px');btnMsg.innerText = '全屏观赏';}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'), mplayer.style.animationPlayState='paused') : (lrc.style.setProperty('--state','running'), mplayer.style.animationPlayState='running');aud.addEventListener('timeupdate', () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {if (mKey === j) showLrc(data.lrcAr);else continue;}}});let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.lrcAr);showLrc(time);};};mkPlayer.HCPlayer = playCode;})(this);A. 接口参数说明：

一、lrcAr 和以往的插件一样（略）；

二、lrc_css 和以往的插件一样（略）；

三、player_css ：

① CSS变量 --ww 是为播放器尺寸（例如：--ww: 160px; ）；
② CSS变量 --bg 是为播放器的“弧片”颜色，支持纯色（例如：#ffcc00 ）和（例如：--bg: linear-gradient(blue,snow,lightblue); ）；
③ CSS变量 --bc 是为播放器额“弧片”边框颜色，仅支持纯色（例如：--bc: blue; ）；
④ total 变量是为播放器“弧片”总数，数字越大立体球的边框线就越多，建议在 10 ~ 100 之间（例如：total: 20, ）

B. 插件调用举例：

<script >
(function() {
//插件代码放在这里
let lrcAr = [,];
HCPlayer({
lrcAr: lrcAr,
lrc_css: '--bg: linear-gradient(blue,lightblue); top: 15px; left: 20px;',
player_css: '--ww: 160px; --bg: linear-gradient(blue,snow,lightblue); --bc: blue; top: 20px;',
total: 20,
});
})();
</script>

马黑黑 发表于 2023-1-4 12:18

本帖最后由马黑黑于 2023-1-4 12:39 编辑

全屏观赏时，播放器会自动放大 1.5 倍，位置不改变

梦油发表于 2023-1-4 16:18

全屏欣赏时更漂亮。

马黑黑 发表于 2023-1-4 18:14

梦油发表于 2023-1-4 16:18
全屏欣赏时更漂亮。

嗯，就是图片品质一般，我再压缩时下手狠了一点

梦油发表于 2023-1-4 20:20

马黑黑发表于 2023-1-4 18:14
嗯，就是图片品质一般，我再压缩时下手狠了一点

你的制作技巧很熟练，游刃有余。

樵歌发表于 2023-1-4 20:22

这灯笼超级大！

马黑黑 发表于 2023-1-4 20:24

樵歌发表于 2023-1-4 20:22
这灯笼超级大！

还可以吧？资本运作的结果

马黑黑 发表于 2023-1-4 20:26

梦油发表于 2023-1-4 20:20
你的制作技巧很熟练，游刃有余。

就是资源载体有限。以前我有自己的空间，后来因为备案问题，空间不能维持下去

千羽发表于 2023-1-4 20:39

这个画面很壮观啊，黑黑老师棒棒哒{:4_187:}

红影发表于 2023-1-4 20:44

这个播放器的配色太美了，有了个播放器，让背景一下灵动了许多，充满梦幻的感觉{:4_199:}

红影发表于 2023-1-4 20:44

前面但看这个求形播放器还没什么，放在帖子里竟然这么美妙的{:4_199:}

樵歌发表于 2023-1-4 20:55

马黑黑发表于 2023-1-4 20:24
还可以吧？资本运作的结果

一看那楼盘就是钱钱堆积的{:4_173:}

马黑黑 发表于 2023-1-4 21:11

樵歌发表于 2023-1-4 20:55
一看那楼盘就是钱钱堆积的

不缺钱

马黑黑 发表于 2023-1-4 21:11

红影发表于 2023-1-4 20:44
前面但看这个求形播放器还没什么，放在帖子里竟然这么美妙的

{:4_170:}

马黑黑 发表于 2023-1-4 21:12

千羽发表于 2023-1-4 20:39
这个画面很壮观啊，黑黑老师棒棒哒

你更是棒棒的呢{:4_187:}

马黑黑 发表于 2023-1-4 21:12

红影发表于 2023-1-4 20:44
这个播放器的配色太美了，有了个播放器，让背景一下灵动了许多，充满梦幻的感觉

越做越木有灵感了，都是简简单单的

红影发表于 2023-1-4 22:43

马黑黑发表于 2023-1-4 21:12
越做越木有灵感了，都是简简单单的

简单而奇幻，才更棒呢{:4_187:}

马黑黑 发表于 2023-1-4 22:51

红影发表于 2023-1-4 22:43
简单而奇幻，才更棒呢

不一定的

梦油发表于 2023-1-5 09:36

马黑黑发表于 2023-1-4 20:26
就是资源载体有限。以前我有自己的空间，后来因为备案问题，空间不能维持下去

那可真遗憾，现在还有没有挽回的余地啊？你的才华应该得到充分的发挥，否则也是一种人才的浪费。

页: [1] 2 3 4 5 6 7 8 9

花潮论坛's Archiver

虹桥