视频无缝链接且可控

亚伦影音工作室 发表于 2024-3-9 17:31

本帖最后由亚伦影音工作室于 2024-9-21 19:16 编辑 <br /><br /><style>
#papa {
margin: 120px -300px;
width: 1164px;
height: 620px;
background:#000000 url('https://')no-repeat center/cover;
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
position: relative;overflow: hidden;
z-index: 12345;
}
#vid { position: absolute; width: 100%; height: 100%; top:0%; left:0%;object-fit: cover; pointer-events: none;opacity: 1;z-index: 1; }
audio {position:absolute;top:580px;z-index: 50;
width: 98%;
height: 40px;
outline: none;
filter: invert(180);
}
audio::-webkit-media-controls-enclosure {
background:transparent ;
border-radius: 4px;
}
.media-controls-container,
.media-controls-container * {
background: rgb(129, 73, 200);
//滤镜反转为 rgba(0, 162, 255, 1);rgba(255, 93, 0, 0.8)#7eb637
border-radius: 4px;
}

audio::-webkit-media-controls-current-time-display {
order: 1; //设置弹性盒对象元素的顺序
color: #ffffff;
text-shadow: unset;
}

audio::-webkit-media-controls-time-remaining-display {
order: 2;
color: #000000;
text-shadow: unset;
}
#lrc{left: 10%;top: 75%;}#lrcc {right:10%;top: 85%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, #880000, #880000);border:0px solid black;position: absolute;z-index: 2;font:bold 3em 楷体;color: #000078;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 -1px 0);}
#lrcc::before,#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;}to {width: 100%;}}@keyframes cover2 {}
</style>
<div id="papa">
<video id="vid"muted="" autoplay=""></video>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/94/e5/03/91ca6733d7423dca393c8008d7aa0374/audio.mp3" style="width:100%;" autoplay="autoplay" controls="controls" height="100%" loop="loop"></audio>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
</div>

<script>
var video = document.getElementById("vid");
var videos = [
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/11534fcd8bf6b044380002f9307b69f1_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/502353537f95b305e6c86256dd5b5825_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/678bfa9dbaec0c235b420e817e00fbd4_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/8b3ad6d3e1e0ea6419ab6e846c22b5b2_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/1f2858bd46a020d12177008e09399ab4_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/5325cab550ac57fabef3f508e1537694_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/d87523f549e0f256e02678db5dc49597_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/a8c6a19ee81e8e15f4cab6a3e12daefc_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/5e786660e7b7d2dc7f84f6128c1e8f60_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/2b772b2eaeba47b31e1c0ddcae810cca_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/37325a0ce1af4817ee5a84826997e888_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/74927ed4e4fb64c2f2ddc1c57b67a09a_preview.mp4"];
var index = 0;
video.addEventListener("ended", function() {
   index++;
   if (index == videos.length) {
         index = 0;
   }
   video.src = videos;
   video.addEventListener("loadedmetadata", function() {
         video.currentTime = 0;
         video.play();
   });
});

video.src = videos;
video.addEventListener("loadedmetadata", function() {
   video.play();
});

let mState = () => aud.paused ?vid.pause() : vid.play();
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>

<span id="lrcStr" style="visibility: hidden;">
忘情水 - 刘德华
亚伦影音工作室
曾经年少爱追梦
一心只想往前飞
行遍千山和万水
一路走来不能回
蓦然回首情已远
身不由己在天边
才明白爱恨情仇
最伤最痛是后悔
如果你不曾心碎
你不会懂得我伤悲
当我眼中有泪
别问我是为谁
就让我忘了这一切
啊给我一杯忘情水
换我一夜不流泪
所有真心真意
任它雨打风吹
付出的爱收不回
给我一杯忘情水
换我一生不伤悲
就算我会喝醉
就算我会心碎
不会看见我流泪
曾经年少爱追梦
一心只想往前飞
行遍千山和万水
一路走来不能回
蓦然回首情已远
身不由己在天边
才明白爱恨情仇
最伤最痛是后悔
如果你不曾心碎
你不会懂得我伤悲
当我眼中有泪
别问我是为谁
就让我忘了这一切
啊给我一杯忘情水
换我一夜不流泪
所有真心真意
任它雨打风吹
付出的爱收不回
给我一杯忘情水
换我一生不伤悲
就算我会喝醉
就算我会心碎
不会看见我流泪
啊给我一杯忘情水
换我一夜不流泪
所有真心真意
任它雨打风吹
付出的爱收不回
给我一杯忘情水
换我一生不伤悲
就算我会喝醉
就算我会心碎
不会看见我流泪
就算我会喝醉
就算我会心碎
不会看见我流泪
</span>
<script >
(function() {
/*变量：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,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 arr="";
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) => {
lrca=lrcAr;
lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
let Y=String(mKey/2).indexOf(".");
if (Y == -1)
{
0==mKey&&(lrc.innerHTML=lrca);
lrc.dataset.lrc = lrca;
lrcc.innerHTML = lrcb;
lrcc.dataset.lrc = "";
lrc.style.setProperty('--motion', 'cover1');
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
lrcc.style.setProperty('--motion', 'cover2');
}
else
{
lrc.innerHTML = lrcb;
lrcc.dataset.lrc = lrca;
lrc.dataset.lrc = "";
lrcc.style.setProperty('--motion', 'cover1');
lrcc.style.setProperty('--tt', time + 's');
lrcc.style.setProperty('--state', 'running');
lrc.style.setProperty('--motion', 'cover2');
}
mKey += 1;
};
/*函数：处理当前歌词索引 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 mState = () =>aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused"),mplayer.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.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.innerHTML); /*获得歌词数组*/
})();
</script >

老谟深虑 发表于 2024-3-9 18:25

欣赏老师的佳作，点赞！老师，你给我整理的代码我试了，只能显示一张图片，其他的图片都不显示，不知啥原因？

亚伦影音工作室 发表于 2024-3-9 18:45

老谟深虑发表于 2024-3-9 18:25
欣赏老师的佳作，点赞！老师，你给我整理的代码我试了，只能显示一张图片，其他的图片都不显示， ...

photo:nth-child(....) 逐个将:前移不得有距离！

樵歌发表于 2024-3-9 20:25

高难度精彩制作！{:4_199:}

红影发表于 2024-3-9 20:58

漂亮的制作，歌曲好听，视频好看。欣赏亚伦老师好帖{:4_199:}

老谟深虑 发表于 2024-3-10 16:55

亚伦影音工作室发表于 2024-3-9 18:45
photo:nth-child(....) 逐个将:前移不得有距离！

谢谢老师，我去试试。

老谟深虑 发表于 2024-3-10 18:47

亚伦影音工作室发表于 2024-3-9 18:45
photo:nth-child(....) 逐个将:前移不得有距离！

我试了，还是只显示一张图片。

小辣椒 发表于 2024-3-10 20:41

亚伦这个是新的创意了{:4_186:}

咋是新人帖

小辣椒 发表于 2024-3-10 20:45

老谟深虑发表于 2024-3-10 18:47
我试了，还是只显示一张图片。

问好老谟深虑

你试一下发帖的时候，html打开下面没有打勾的，一个一个打上试一下，特别这个（禁用链接识别）勾上试试看

小辣椒 发表于 2024-3-10 20:46

亚伦这样感觉视频出来速度太快了，可以调节慢一点吗

老谟深虑 发表于 2024-3-12 15:24

小辣椒发表于 2024-3-10 20:45
问好老谟深虑

你试一下发帖的时候，html打开下面没有打勾的，一个一个打上试一下，特别这个（禁用链接 ...

谢谢老师的告知，我说的不是在花潮论坛，是在离退休论坛不能显示。

小辣椒 发表于 2024-3-12 20:36

老谟深虑发表于 2024-3-12 15:24
谢谢老师的告知，我说的不是在花潮论坛，是在离退休论坛不能显示。

你在离退休论坛试了？一样的道理啊

老谟深虑 发表于 2024-3-13 18:44

小辣椒发表于 2024-3-12 20:36
你在离退休论坛试了？一样的道理啊

谢谢老师，弄好了。

执著发表于 2024-3-13 20:50

欣赏了老师的杰作！

小辣椒 发表于 2024-3-14 17:07

老谟深虑发表于 2024-3-13 18:44
谢谢老师，弄好了。

弄好了，成功就好，不客气

小辣椒 发表于 2024-3-14 17:08

执著发表于 2024-3-13 20:50
欣赏了老师的杰作！

谢谢啊，我也是许多不会，还在学习中，我们一起学习{:4_187:}

页: [1]

花潮论坛's Archiver

视频无缝链接且可控