醉美水芙蓉 发表于 2026-8-24 22:27:28

此去经年(苦乐人生版)

<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Long+Cang&family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet">
<title>此去经年</title>
<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.v5.css';
#papa{position:relative;display:grid;place-items:center;margin:30px 0;width:1280px;height:750px;left:calc(50% - 81px);transform:translateX(-50%);box-shadow:3px 3px 6px gray;overflow:hidden;z-index:1;--bg1:#000 url('https://pic1.imgdb.cn/i/0342wtL8Dg0gOTeDaE7y6Z.gif') no-repeat center/cover;--bg2:#000 url('https://pic1.imgdb.cn/i/0349grPJkpgAlDUtKn9tln.jpg') no-repeat center/cover;background:var(--bg1);transition:opacity 0.3s ease;}
#mutedbnt{position:absolute;z-index:10;width:100px;height:100px;bottom:10%;right:calc(5% + 62.5px);cursor:pointer;}
.vid{position:absolute;width:120%;height:120%;top:-10%;left:-10%;object-fit:cover;pointer-events:none;mix-blend-mode:screen;z-index:2;}
#intro{margin:0;z-index:1;width:100%;height:100%;position:absolute;background-color:#220080;pointer-events:none;background-size:cover;opacity:0.6;mix-blend-mode:soft-light;animation:hue-rotate 6s linear infinite var(--state);}
@keyframes hue-rotate{0%{filter:hue-rotate(-360deg);}100%{filter:hue-rotate(360deg);}}
#pMaskV{position:absolute;width:100%;height:100%;top:0;left:0;object-fit:cover;opacity:0;mask:url("https://pic1.imgdb.cn/i/0348v2wqq8phgSqDTOEli1.png") no-repeat center/50% 50%;-webkit-mask:url("https://pic1.imgdb.cn/i/0348v2wqq8phgSqDTOEli1.png") no-repeat center/50% 50%;transition:opacity 0.4s ease;z-index:1;}
</style>
<div id="papa">
   <div id="intro"></div>         
   <video id="pMaskV" autoplay loop preload="auto" playsinline muted></video>
   <img src="https://pic1.imgdb.cn/item/6a03cf00c05e72d91720910b.gif" id="mutedbnt" title="暂停" onClick="pc()"/>
</div>
<script>
const papa = document.getElementById('papa');
const pic = document.getElementById("mutedbnt");
const bg1 = getComputedStyle(papa).getPropertyValue('--bg1');
const bg2 = getComputedStyle(papa).getPropertyValue('--bg2');
const vid = document.getElementById('pMaskV');
const gc = `此去经年(苦乐人生版)
那一夜睡意朦胧中转身
斑驳的月光映着枕边人
恍然惊觉青丝已成白发
才知半生风雨不过一瞬
春花秋月何时了
往事知多少
你笑颜如初陪我走过暮暮朝朝
时光啊时光你啊你慢些走
让我再看一眼少年时的温柔
红尘路漫漫曾共你惊鸿一隅
如今回首已是暮年渡口
我多年后常念起那时的模样
逐梦的年华缀满星光也洒落惆怅
人生若只如初见何须叹秋凉
只是岁月于书里都写在了脸上
回首往事半生路
七分酸楚三分甜
七星有你陪我把苦辣尝遍
时光啊时光你你慢些走
让我再握一次年少时的滞留
世间安得双全法
不负岁月不负卿
是斜阳西下
烟霞满山头
青山不老少人难
少年放下遗憾安度五万年
我们的故事写满人间烟火与青天
早平两岸阔风正一帆悬
不求地老天荒只愿此刻心安
那一夜梦回惊鸿初遇
醒来时你仍在身边笑语依稀岁月无言
红尘一梦回首往事已是最美风景
不问红尘是与非只愿你我都无惧
此生已尽心又何惧来去
`;
function loadJs(url, callback) {
    const script = document.createElement('script');
    script.charset = 'utf-8';
    script.src = url;
    script.onload = function () {
      if (callback) callback();
    };
    document.head.appendChild(script);
}
loadJs('https://638183.freep.cn/638183/tzmaker/tz.v5.min.js', tzRun);
let audioEl = null;
let videoEl = null;

function safeVideoPlay(videoDom){
    const playPromise = videoDom.play();
    if(playPromise){
      playPromise.catch(err=>{
            if(
                err.name === "AbortError"
                || err.message.includes("play() request was interrupted")
                || err.message.includes("save power")
            ){
                return;
            }
            console.warn("其他视频异常：", err);
      })
    }
}
function tzRun() {
    tz = TZ('papa');
    tz.add('audio', '', '', {src: 'https://i.uik.cc/view.php/7435e69e804e8aa82dff6f848c5422f1.mp3'});
    tz.add('video', '', 'vid', {src: 'https://img2.tukuppt.com/video_show/15653652/00/80/83/60d04564c32f7.mp4'});
    tz.add('video', '', 'vid', {src: 'https://img2.tukuppt.com/video_show/7165162/00/18/05/5ed870ed14fc5.mp4'});
    tz.add('video', '', 'vid', {src: 'https://img2.tukuppt.com/video_show/15653652/01/23/79/62204e70cf64d.mp4'});
    tz.add('video', '', 'vid', {src: 'https://img2.tukuppt.com/video_show/2475824/00/01/52/5b44f4d7298d6.mp4'}).style('left:-10%;top:-10%;width:120%;height:120%;mask:linear-gradient(to top,red 15%,transparent 38%);-webkit-mask:linear-gradient(to top,red 15%,transparent 38%);');
    tz.bgprog().style('bottom: 40px; right: 80px;color: #00BFFF; cursor: pointer;width: 240px;z-index:30;');
    tz.fs().style('right: 20px; top: 20px;').style('z-index:10;');   
    tz.lrc(tz.lrc2HC(gc), '', true).style('top: 15%; left: 5%; writing-mode: vertical-rl; text-orientation: upright; letter-spacing:6px;white-space: pre;padding: 0px; font-weight:100;font-size:3.2em;font-family:"ZCOOL KuaiLe","Ma Shan Zheng","Long Cang","华文行楷","SimHei","Arial","sans-serif"; filter: drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);   --rect: 0 0 100% 0; --border: 0;');
const mvs = [
"https://video-qn.51miz.com/vcg/video/preview/51miz42N1147539749.mp4",
"https://video-qn.51miz.com/preview/video/00/00/68/48/V-684880-802FACCC.mp4",
"https://video.shipin520.com/videos/17/36/71/b_KSyZ5ujXfz7R1567173671.mp4",
"https://video-qn.51miz.com/vcg/video/preview/00/00/68/93/51miz_V689333_NWML4eozl.mp4" ,
"https://video-qn.51miz.com/preview/video/00/00/68/10/V-681019-541C9333.mp4" ,
"https://video-qn.51miz.com/preview/video/00/00/65/86/V-658610-3FC7FB1B.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/986a9dd02101875a4ad765334bca0b03_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/b2b2d7852642be6394f57c8cab702bb0_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/7abe3fd5095bc1027d571313853692c0.mp4",
"https://video-qn.51miz.com/preview/video/00/00/64/54/V-645461-656EAE90.mp4"
];
let imgIdx = 0;
let isLoading = false;
const SWITCH_SEC = 8;
let lastSwitchTime = 0;
let switchTimer = null;
function switchMaskVideo(){
    if(isLoading) return;
    isLoading = true;
    vid.pause();
    vid.removeAttribute('src');
    vid.load();
    const nextSrc = mvs;
    imgIdx = (imgIdx + 1) % mvs.length;
    let settled = false;
    const done = () => {
      if(settled) return;
      settled = true;
      vid.removeEventListener('canplay', onReady);
      safeVideoPlay(vid);
      isLoading = false;
    };
    const onReady = () => done();
    vid.addEventListener('canplay', onReady);
    vid.src = nextSrc;
    vid.load();
    setTimeout(done, 1500);
}
setTimeout(()=>{
    audioEl = papa.querySelector('audio');
    videoEl = papa.querySelector('.vid');
    if(audioEl){
      audioEl.addEventListener('timeupdate',()=>{
    if(audioEl.paused){      
      vid.style.opacity = '0';
      vid.pause();
      return;
    }   
    vid.style.opacity = '1';
    if(vid.paused && !isLoading){
      safeVideoPlay(vid);
    }
    const now = audioEl.currentTime;
    if(now < lastSwitchTime){
      lastSwitchTime = now;
    }
    if(now - lastSwitchTime >= SWITCH_SEC){
      lastSwitchTime = now;
      switchMaskVideo();
    }
});
audioEl.addEventListener('play',()=>{
    lastSwitchTime = audioEl.currentTime;
    if(vid.paused && !isLoading){
      safeVideoPlay(vid);
    }
    if(!vid.getAttribute('src')){
      switchMaskVideo();
    }
});
      audioEl.addEventListener('play',()=>{
            if(vid.src === ''){
                lastSwitchTime = audioEl.currentTime;
                switchMaskVideo();
            }
      });
      document.addEventListener('visibilitychange',()=>{
            if(!document.hidden && audioEl && !audioEl.paused){
                safeVideoPlay(vid);
            }
      });
    }
},120);
}   
function pc() {
      if(!audioEl || !videoEl || !vid) return;
    if (audioEl.paused) {
      audioEl.play().catch(e=>console.warn('音频播放失败:',e));
      videoEl.play();
      vid.play();      
      pic.title="暂停";
      pic.src = "https://pic1.imgdb.cn/item/6a03cf00c05e72d91720910b.gif";
      papa.style.background = bg1;
    }else{
      audioEl.pause();
      videoEl.pause();
      vid.pause();
      pic.title="播放";
      pic.src = "https://pic1.imgdb.cn/item/68e9c0c2c5157e1a886337ae.png";
      papa.style.background = bg2;
    }
}
window.pc = pc;
['contextmenu', 'dragstart','selectstart'].forEach(type =>
    document.getElementById('papa').addEventListener(type, e => e.preventDefault())
);
</script>

klxf 发表于 2026-8-25 00:02:38

好听好看，谢谢醉美管理员精彩分享

醉美水芙蓉 发表于 2026-8-25 13:16:04

klxf 发表于 2026-8-25 00:02
好听好看，谢谢醉美管理员精彩分享

谢谢友友支持！
页: [1]
查看完整版本: 此去经年(苦乐人生版)