秋恋
<style>#tz {
margin: 130px 0 30px calc(50% - 721px);
width: 1280px;
height: 720px;
background: url('https://638183.freep.cn/638183/t24/4/qqlm.jpg') no-repeat center/cover;
box-shadow: 0 0 8px gray;
overflow: hidden;
z-index: 1;
display: grid;
place-items: center;
position: relative;
}
#tz > video {
position: absolute;
width: 100%;
height: calc(100% + 200px);
object-fit: cover;
mix-blend-mode: screen;
pointer-events: none;
}
</style>
<div id="tz" class="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1945704217" autoplay loop></audio>
<video src="https://img.tukuppt.com/video_show/2269348/00/14/14/5e1bba05658f4.mp4" autoplay loop muted></video>
</div>
<script>
var geci = `云娃 - 秋恋\n那一片秋叶轻轻落下\n回忆未曾失去\n那伤害流在我心里\n痛彻心底\n还记得那年你的话语\n散落午后的大地\n大地它带走我记忆\n沉沦中我把你忘记\n忘记你可爱的脸\n还有爱你的思绪\n思绪它牵牵绊绊\n剪不断我的情思缠绵\n还记得那年你的话语\n散落午后的大地\n大地它带走我记忆\n沉沦中我把你忘记\n忘记你可爱的脸\n还有爱你的思绪\n思绪它牵牵绊绊\n剪不断我的情思缠绵\n忘记你可爱的脸\n还有爱你的思绪\n思绪它牵牵绊绊\n剪不断我的情思缠绵\n无论思绪它怎样的牵绊\n也剪不断我的情思缠绵`;
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js2024/tube_yslrc.js';
document.body.appendChild(sf);
sf.onload = () => {
HCPlayer({
papa: '#tz',
geci: geci,
skip: 0,
average: 3.5,
lrc_css: 'top: 20px; --bg: linear-gradient(transparent, #ff0000c0); color: lightblue;',
player_css: 'width: 260px; height: 10px; bottom: 20px; --prog: red; --track: gray; --color: yellow; --bg: url("https://638183.freep.cn/638183/t22/btn/g1.png") no-repeat center/cover',
fs_css: '--bg: transparent; --color: snow;'
});
};
</script>
<h2>帖子代码</h2>
<div class="hE"><pre>
<style>
#tz {
margin: 130px 0 30px calc(50% - 721px);
width: 1280px;
height: 720px;
background: url('https://638183.freep.cn/638183/t24/4/qqlm.jpg') no-repeat center/cover;
box-shadow: 0 0 8px gray;
overflow: hidden;
z-index: 1;
display: grid;
place-items: center;
position: relative;
}
#tz > video {
position: absolute;
width: 100%;
height: calc(100% + 200px);
object-fit: cover;
mix-blend-mode: screen;
pointer-events: none;
}
</style>
<div id="tz" class="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1945704217" autoplay loop></audio>
<video src="https://img.tukuppt.com/video_show/2269348/00/14/14/5e1bba05658f4.mp4" autoplay loop muted></video>
</div>
<script>
var geci = `云娃 - 秋恋\n那一片秋叶轻轻落下\n回忆未曾失去\n那伤害流在我心里\n痛彻心底\n还记得那年你的话语\n散落午后的大地\n大地它带走我记忆\n沉沦中我把你忘记\n忘记你可爱的脸\n还有爱你的思绪\n思绪它牵牵绊绊\n剪不断我的情思缠绵\n还记得那年你的话语\n散落午后的大地\n大地它带走我记忆\n沉沦中我把你忘记\n忘记你可爱的脸\n还有爱你的思绪\n思绪它牵牵绊绊\n剪不断我的情思缠绵\n忘记你可爱的脸\n还有爱你的思绪\n思绪它牵牵绊绊\n剪不断我的情思缠绵\n无论思绪它怎样的牵绊\n也剪不断我的情思缠绵`;
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js2024/tube_yslrc.js';
document.body.appendChild(sf);
sf.onload = () => {
HCPlayer({
papa: '#tz',
geci: geci,
skip: 0,
average: 3.5,
lrc_css: 'top: 20px; --bg: linear-gradient(transparent, #ff0000c0); color: lightblue;',
player_css: 'width: 260px; height: 10px; bottom: 20px; --prog: red; --track: gray; --color: yellow; --bg: url("https://638183.freep.cn/638183/t22/btn/g1.png") no-repeat center/cover',
fs_css: '--bg: transparent; --color: snow;'
});
};
</script>
</pre></div>
<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script> 本帖最后由 马黑黑 于 2024-8-14 15:03 编辑
原生lrc歌词同步之管状进度条：
average 参数用于调节歌句演唱用时平均值，具体请参阅 原生lrc歌词同步之管状进度条播放器 (52qingyin.cn) 的相关说明
老师辛苦了！谢谢带来分享！{:4_187:} 又一个漂亮的原生歌词播放器封装，可以按需要选择来做帖子了{:4_199:} 制作漂亮，歌曲好听。欣赏黑黑好帖{:4_187:} 梦江南 发表于 2024-8-14 13:53
老师辛苦了！谢谢带来分享！
{:4_190:} 红影 发表于 2024-8-14 14:51
制作漂亮，歌曲好听。欣赏黑黑好帖
感谢支持 怡人的秋色，太美了 茉莉 发表于 2024-8-14 17:48
怡人的秋色，太美了
晚上嚎{:4_190:}{:4_190:} 醉美水芙蓉 发表于 2024-8-14 17:19
欣赏老师带来的精彩！
晚上好 马黑黑 发表于 2024-8-14 15:03
感谢支持
这种原生歌词做帖子更方便了。 黑黑为不会做花潮歌词编辑器的朋友提供了这个原生态歌词同步，特别棒！{:4_199:} 小辣椒 发表于 2024-8-14 23:01
黑黑为不会做花潮歌词编辑器的朋友提供了这个原生态歌词同步，特别棒！
{:4_191:} 马黑黑 发表于 2024-8-14 23:51
黑黑晚上好{:4_187:} 马老师的制作个个精彩，冬雨先欣赏了，暂时没有时间玩
页:
[1]