如果爱还在 - 天籁神音【视频无缝链接可控】
本帖最后由 亚伦影音工作室 于 2023-9-19 12:33 编辑 <br /><br /><style>#papa {
margin: 10px -150px;
width: 1164px;
height: 620px;
background:#000000 ;
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
position: relative;overflow: hidden;
z-index: 12345;
}
#mb{ position: absolute; width: 100%; height: 100%; top:0%; opacity: 1;z-index: 2; background:linear-gradient(0deg, #000000 7%,#Ffffff 8%,rgba(2, 2, 2, 0) 2%,rgba(52, 152, 219, 0) 47%,rgba(2, 2, 2, 0) 90%,#Ffffff 90%,black 91%);}
#vid { position: absolute; width: 100%; height: 100%; top:0%; object-fit: cover; pointer-events: none;opacity: 1;z-index: 1; transition: 0.1s all ease;}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#mplayer {z-index: 80;
position: absolute;
left: calc(5% - 15px);
bottom: 5px;
width: 30px;
height: 30px;
border: 2px solid #cccccc;
border-radius: 50%;
opacity: 0;
transition: .7s;
display: grid;
place-items: center;
--disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
border-style: solid;
border-color: #cccccc;
cursor: pointer;
transition: .4s;
}
#mplayer::before {
width: 0;
height: 0;
left: 12px;
border-width: 10px 12px;
border-color: transparent transparent transparent #cccccc;
opacity: var(--disp1);
}
#mplayer::after {
width: 2px;
height: 20px;
border-width: 0 4px 0 4px;
opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#papa:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; top:5%; left:calc(95% - 15px);font: normal 2em/0em 楷体;color:#ffffff; opacity: 0; cursor: pointer; z-index: 111}
</style>
<div id="papa">
<span id="fullscreen">全屏</span>
<div id="mb"></div>
<video id="vid"src="https://img.tukuppt.com/video_show/13839797/00/14/64/5e594433879a1.mp4" muted autoplay></video>
<div id="mplayer"></div>
<divclass="lrc">
<ul id="ullrc">
</ul>
</div>
</div>
<audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=200677867&.mp3" loop autoplay></audio>
<style type="text/css">
.lrc{z-index: 20;
width: 100%;
height: 120px;
overflow: hidden;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
display: block;position: absolute;top:80%; left:0%;
margin: 0 auto;}
.lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
height: 70px;
line-height: 60px;
font-family:华文隶书;
font-size: 0px;
color: #000078;
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
list-style-type: none;
text-align: center;display: block;
width: 100%;
margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
font-size: 40px;
color: #ff0000;}
</style>
<script >
var lrc = ` 如果爱还在 - 天籁神音
作词：九语
作曲：九语
歌手：天籁神音
经过多年以后读懂了好与坏
可是昔日的故事它早已不在
翻阅曾经保留的旧照片
幕幕往事重又回想起来
许多东西都是失去了才会明白
原来丢掉了自己一生的所爱
想要回到过去早已不存在
只能把所有的美好留在脑海
如果爱还在你心中没有离开
多年以后还能大胆说出来
那份陈酿多年
多年的相思酒
一定会是刻骨铭心的真与爱
许多东西都是失去了才会明白
原来丢掉了自己一生的所爱
想要回到过去早已不存在
只能把所有的美好留在脑海
如果爱还在你心中没有离开
多年以后还能大胆说出来
那份陈酿多年
多年的相思酒
一定会是刻骨铭心的真与爱
如果爱还在你心中没有离开
多年以后还能大胆说出来
那份陈酿多年
多年的相思酒
一定会是刻骨铭心的真与爱
带着满是疲惫的期待
也许未来的梦它从未醒来
缘聚缘散早有安排
把握现在才是最好的存在
把握现在才是最好的存在
`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
parts = getLrcObj(parts);
}
return parts;
function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts.substr(1);
var timeParts = time.split(":");
var seconds = +timeParts;
var min = +timeParts;
seconds = min * 60 + seconds;
var words = twoParts;
return{
seconds: seconds,
words: words,
};
}
}
var lrcArray = getLrcArray();
function inputLrc() {
for (let index = 0; index < lrcArray.length; index++) {
var li = document.createElement("li");
li.innerText = lrcArray.words;
$("ullrc").appendChild(li);
}
}
inputLrc();
function setPosition() {
var index = getLrcIndex();
if (index == -1) {
return;
}
var lrc_li_height = 70, lrc_ul_height = 60;
var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {top = 0;}$("ullrc").style.marginTop = -top + "px";
var activeLi = $("ullrc").querySelector(".active");
if(activeLi){
activeLi.classList.remove("active");}
$("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("aud").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray.seconds > time) {
return index - 1;
}
}
}
$("aud").ontimeupdate = setPosition;
(function(){let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
fs = !fs;
};
(function() {let vid = document.querySelector('vid');
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>
<script>
var dts = ["https://img.tukuppt.com/video_show/13839797/00/14/64/5e594433879a1.mp4",
"https://img.tukuppt.com/video_show/00/09/33/64dbc7287c431.mp4",
"https://img.tukuppt.com/video_show/8321488/00/14/84/5e64c3f1bc0fa.mp4",
"https://img.tukuppt.com/video_show/13839797/00/14/72/5e5e257f1ffa1.mp4",
"https://img.tukuppt.com/video_show/13839797/00/14/76/5e5fd0035b3b8.mp4",
"https://img.tukuppt.com/video_show/2475824/00/01/58/5b46b44249e6b.mp4",
"https://img.tukuppt.com/video_show/2629112/00/01/31/5b3f253fc2c79.mp4"
];
var dt= document.getElementById('vid');
var dtIdx = 1;
dt.onended = function() {
dt.src = dts;
dtIdx++;
dtIdx %= dts.length;
}
</script>
欣赏老师精彩制作！ 好美的帖，欣赏问好老师！:victory: 这个作品漂亮！！！！ 这个作品漂亮！！！！
页:
[1]