HTML短视频切换尝试《化风行万里》演唱：云朵

亚伦影音工作室 发表于 2023-9-17 12:43

本帖最后由亚伦影音工作室于 2024-6-11 10:24 编辑 <br /><br /><style>
#papa { margin: 0px 0 0 calc(50% - 681px); width: 1200px; height: 680px; box-shadow: 0px 0px 0px #000; position: relative; z-index: 1; display: grid; place-items: center; background:#000000 ; overflow: hidden; }
#vid { position: absolute; width: 100%; height: 100%; top:0%; object-fit: cover; pointer-events: none; z-index: 1; opacity: 1; transition: 0.1s all ease;}
#prog { position: absolute; bottom: 85%;left: 4%; width: 300px; height: 2px; border: 0px solid lightblue; border-radius: 2px;background: linear-gradient(to right, #880000, #880000 var(--prg), #cccccc 0); color: #ffffff; --prg: 0%; --state: paused; z-index: 20;}
#prog::before, #prog::after { position: absolute; top: -30px; }
#prog::before { content: attr(data-cu); left: 10px; }
#prog::after { right: 10px; content: attr(data-du); }
#slider { position: absolute; width: 3px; height: 7px; background: snow; left: var(--prg); bottom: -2px;}
#btnplay { position: absolute; top: -32px; left: 45%; opacity: .9;font: normal 3em/0em serif;color:#ffffff; cursor: pointer; animation: rot 10s infinite linear var(--state); }

#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(180deg, #880000, #880000);
position: absolute;z-index: 4;
left: 50%;
transform: translate(-50%);
top: 80%;
font:normal 3em 华文隶书;
color: #0000;
white-space: pre;
-webkit-background-clip: text;
filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
position: absolute;
content: attr(data-lrc);
width: 20%;
height: 100%;
color: transparent;
overflow: hidden;
white-space: pre;
background: var(--bg);

-webkit-background-clip: text;
animation: var(--motion) var(--tt) linear forwards;
animation-play-state: var(--state);
}
@keyframes cover1 { from { width: 0;transform: perspective(120px) rotateY(-90deg); } to { width: 100%;} }
@keyframes cover2{ from { width: 0; transform: perspective(120px) rotateY(90deg); } to { width: 100%;} }
#flyBox { --w: 220px; width: var(--w); overflow: hidden; color: #cccccc; position: absolute; left:30px;bottom: -30px; font-size: 14px; }
#flyBox div { word-break: keep-all; white-space: nowrap; animation: fly 10s linear infinite; background:#0000}
@keyframes fly { from { transform: translateX(100%); } to { transform: translateX(calc(0% - var(--w))); }}

@keyframes rot { to { transform: rotate(-1turn); } }
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:83%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em华文新魏; opacity: 1; cursor: pointer; z-index: 100}
</style>
<div id="papa">
<video id="vid"src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/0febdc4d9660edc6b4576c1c1dbc620c_preview.mp4" muted autoplay></video>
<span id="fullscreen">全屏观赏</span>

<div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>

<div id="prog" data-cu="00:00" data-du="00:00" title="调节进度">
   <span id="btnplay" title="播放/暂停">❊</span>
<span id="slider"></span>
<div id="flyBox"><div>化风行万里演唱：云朵词：聂小慧曲：聂小慧发行：亚伦影音工作室</div></div>
</div>

</div>
<audio id="aud" src="https://s7.krakenfiles.com/uploads/11-06-2024/R7XCdMBZYb/music.m4a" autoplay loop></audio>
<script>
var dts = ["https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/ff54d79ff2ebf815ef1b29d476374829_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/0135bbd36a97756d4b8c7fde87c33efd_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/8edf0b2173b58cc8c2eddb3de64f2070_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/27c30fee1ffb8c47e9477d1c4c64a818_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/a3bfb5843f002e51db4920d75b96bb91_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/e3f4791fe291e9adde6a61fcdf0bc824_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/ab3c4dcdf625245d97ace90a0f262001_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/c8f55c2fd779667044e56e02538c2002_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/ff8c2b263ce04047fde08eb5fdae91f1_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/1a519417f99dbf304d0048ddf90eacf1_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/d5eedb83dfa0119f04df3398aa2bfd43_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/d65daad7a579d1fc29a3b0d6a01dcbee_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/f565a4aa5750c17c260c1d9f19050e7c_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/e92d85e17d878a2e08e19d3c99077a0c_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/4f4e58d63abffd0728203e0a9818695a_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/d37d550b37c346116182b13aceb47d58_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/61a0dfa2894a18d23b1db798ad2bec9a_preview.mp4",
"https://img-baofun.zhhainiao.com/fs/scene/preview_video/38affc2c69d68be013e1ef0873f7b224_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/d560d249cc0d5a93dfd89a06231b9bb4_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/34e7af8cb85f6dff413de471a28bc8e3_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/5f756dea724effb37b93c787a225504e_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/854e4d2236568b9627d4e8cf6161d75a_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/3c6a1e21145f574d42e4be80c5d81c57_preview.mp4"
];

var dt= document.getElementById('vid');

var dtIdx = 1;

dt.onended = function()    {
   dt.src = dts;
   dtIdx++;
   dtIdx %= dts.length;
}
</script>
<script>
(function() {
let toMin = (val)=> {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if(min < 10) min = '0' + min;if(sec < 10) sec = '0' + sec;return min + ':' + sec;}
let vid = document.querySelector('.vid');
let mState = () => aud.paused ? (lrc.style.setProperty('--state', 'paused'),prog.style.setProperty('--state', 'paused'), vid.pause()) : (lrc.style.setProperty('--state', 'running'),prog.style.setProperty('--state', 'running'), vid.play());
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
aud.addEventListener('timeupdate', () => {
   prog.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%');
   prog.dataset.cu = toMin(aud.currentTime);
   prog.dataset.du = toMin(aud.duration);
});
let mKey = 0, mFlag = true;
(function() {
/*原始lrc歌词*/
let lrcStr = `化风行万里
演唱：云朵
词：聂小慧
曲：聂小慧
编曲：卡个秋@Huijian music
和声：小佑
混音：冯鑫阳
艺术效果：华玮轩
监制：米奇王翔
制作人：聂小慧
发行：亚伦影音工作室
推广：亚伦影音
OP：影音工作室
【未经著作权方许可不得私自翻唱】
我化风行万里飞过千山找寻你
你却似一轮月高挂在遥远天际
我眼里的风景等着说给你来听
而你似那泡影消失在我世界里
就一句对不起结束当初的约定
你转身离开得毫不犹豫
被遗忘的曾经又泛起了涟漪
有多可惜却无能为力
有人提你姓名我假装着不在意
可心里的伤已经抹不去
花凋零的寒季等不来你的归期
你看不见我哭红的眼睛
我化风行万里越过大海找寻你
你却似一场雨落入了我的心底
关于我的一切因你才风和日丽
你怎么狠下心把我丢在黑夜里
我化风行万里飞过千山找寻你
你却似一轮月高挂在遥远天际
我眼里的风景等着说给你来听
而你似那泡影消失在我世界里
有人提你姓名我假装着不在意
可心里的伤已经抹不去
花凋零的寒季等不来你的归期
你看不见我哭红的眼睛
我化风行万里越过大海找寻你
你却似一场雨落入了我的心底
关于我的一切因你才风和日丽
你怎么狠下心把我丢在黑夜里
我化风行万里飞过千山找寻你
你却似一轮月高挂在遥远天际
我眼里的风景等着说给你来听
而你似那泡影消失在我世界里
`;

/*变量：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;

/*函数：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
   let tmpAr = [];
   for(j = 0; j <ar.length - 1; j ++) {
            if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
   }
   let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
   tmpAr.push(aver);
   tmpAr.forEach((item,key) => {
            ar = item > aver ? aver : item;
   });
   return ar;
};

/*函数：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
   let lrcAr = [];
   let calcRule = ;
   for(x of text.split('\n')) {
            let ar = [];
            let re = /\d+[\.:]\d+([\.:]\d+)?/g;
            let geci = x.replace(re,'');
            if(geci) {
                     geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                     let time = x.match(re);
                     if(time != null) {
                           for(y of time) {
                                    let tmp = y.match(/\d+/g);
                                    let sec = 0;
                                    for(z in tmp) sec += tmp * calcRule;
                                    ar = ;
                                    lrcAr.push(ar);
                           }
                     }
            }
   }
   lrcAr.sort((a,b)=> a - b);
   return(lrcTime(lrcAr));
};

/*函数：模拟显示同步歌词*/
let showLrc = (time) => {
   let name = mFlag ? 'cover1' : 'cover2';
   lrc.innerHTML = lrcAr;
   lrc.dataset.lrc = lrcAr;
   lrc.style.setProperty('--motion', name);
   lrc.style.setProperty('--tt', time + 's');
   lrc.style.setProperty('--state', 'running');
   mKey += 1;
   mFlag = !mFlag;
};

/*函数：处理当前歌词索引 mKey*/
let calcKey = () => {
   for (j = 0; j < lrcAr.length; j++) {
            if (aud.currentTime <= lrcAr) {
                     mKey = j - 1;
                     break;
            }
   }
   if (mKey < 0) mKey = 0;
   if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
   let time = lrcAr - (aud.currentTime - lrcAr);
   showLrc(time);
};

/*格式化时间信息*/
let toMin = (val) => {
   if (!val) return '00:00';
   val = Math.floor(val);
   let min = parseInt(val / 60),
   sec = parseFloat(val % 60);
   if (min < 10) min = '0' + min;
   if (sec < 10) sec = '0' + sec;
   return min + ':' + sec;
}

/*函数：关键帧动画状态切换*/
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 < lrcAr.length; j++) {
            if (aud.currentTime >= lrcAr) {
                     cKey = j;
                     if (mKey === j) showLrc(lrcAr);
                     else continue;
            }
   }
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
let fs = true;
   fullscreen.onclick = () => {
            fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
            fs = !fs;
   };
btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>

亚伦影音工作室 发表于 2023-9-17 13:49

本帖最后由亚伦影音工作室于 2023-9-17 16:58 编辑

请教马黑老师能否设计一个淡出转场效果？

红影发表于 2023-9-17 15:13

这么多短视频的切换啊，很多都很好看。欣赏亚伦老师好帖{:4_187:}

红影发表于 2023-9-17 15:15

在切换视频的时候偶尔会有背景图闪现出来，这个感觉很奇怪。

亚伦影音工作室 发表于 2023-9-17 15:34

红影发表于 2023-9-17 15:15
在切换视频的时候偶尔会有背景图闪现出来，这个感觉很奇怪。

是呀请教马黑老师解决！

醉美水芙蓉 发表于 2023-9-17 16:14

红影发表于 2023-9-17 16:50

亚伦影音工作室发表于 2023-9-17 15:34
是呀请教马黑老师解决！

关于有图片的事，也许去掉图片就可以了，但是如何淡入淡出我不会。

页: [1]

花潮论坛's Archiver

HTML短视频切换尝试《化风行万里》演唱：云朵