风雨天涯

杨帆发表于 2026-8-24 13:23

<html lang="zh-CN">
<head>
<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: 'http://cccimg.com/view.php/d54d1faacf2899f478861aa81836f288.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: 25%; 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://wj.zp68.com/lxx/yunhua/2026/03/06/yun.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>
</body>
</html>

梦江南 发表于 2026-8-24 13:52

{:4_174:}

梦江南 发表于 2026-8-24 13:54

欣赏杨帆的精彩遮罩音画。{:4_187:}

梦江南 发表于 2026-8-24 13:54

歌曲好听，赞！{:4_199:}

梦油发表于 2026-8-24 17:10

欣赏杨帆的精美制作，祝福杨帆天天快乐。

杨帆发表于 2026-8-24 22:55

梦江南发表于 2026-8-24 13:54
歌曲好听，赞！

谢谢江南鼓励，祝开心{:4_204:}

杨帆发表于 2026-8-24 22:55

梦油发表于 2026-8-24 17:10
欣赏杨帆的精美制作，祝福杨帆天天快乐。

谢谢梦兄鼓励，祝开心{:4_190:}

霜染枫丹 发表于 2026-8-25 08:10

扬帆上午好！好听的歌好看的视频。赏心悦目，点赞！{:4_204:}{:4_190:}

杨帆发表于 2026-8-25 11:59

霜染枫丹发表于 2026-8-25 08:10
扬帆上午好！好听的歌好看的视频。赏心悦目，点赞！

谢谢枫丹老师鼓励，祝开心{:4_187:}

梦油发表于 2026-8-25 13:59

杨帆发表于 2026-8-24 22:55
谢谢梦兄鼓励，祝开心

杨帆朋友别客气

红影发表于 2026-8-25 15:11

漂亮的制作，好听的歌曲。欣赏扬帆好帖{:4_199:}

页: [1]

花潮论坛's Archiver

风雨天涯