白雪 - 千古绝唱
<style>@import 'https://638183.freep.cn/638183/web/tz/tz.v3.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/qgji.webp') no-repeat center/cover; }
.vid { width: 15%; height: auto; border-radius: 50%; mix-blend-mode: screen; cursor: pointer;
box-shadow: 0 0 0 5px rgba(0, 200, 0, .25); }
</style>
<div id="pa" class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js';
import lrc2HC from 'https://638183.freep.cn/638183/web/tz/lrc2hc.js';
const tz = TZ.TZ('pa');
const gc = lrc2HC(`...（清唱过门）\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梁山伯祝英台\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千古绝唱唱到今`);
tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=27946560' });
tz.add('video', '', 'vid', {
src: 'https://img.tukuppt.com/video_show/2475824/00/01/90/5b4d5ec6e96e0.mp4',
DisablePictureInPicture: 'true'
}).playmp3();
tz.lrc(gc).style('bottom: 60px').style('--border: 0');
tz.bgprog().style('bottom: 20px');
tz.fs().style('right: 20px; top: 20px');
</script> 帖子代码
<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.v3.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/qgji.webp') no-repeat center/cover; }
.vid { width: 15%; height: auto; border-radius: 50%; mix-blend-mode: screen; cursor: pointer;
box-shadow: 0 0 0 5px rgba(0, 200, 0, .25); }
</style>
<div id="pa" class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js';
import lrc2HC from 'https://638183.freep.cn/638183/web/tz/lrc2hc.js';
const tz = TZ.TZ('pa');
const gc = lrc2HC(`...（清唱过门）\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梁山伯祝英台\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千古绝唱唱到今`);
tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=27946560' });
tz.add('video', '', 'vid', {
src: 'https://img.tukuppt.com/video_show/2475824/00/01/90/5b4d5ec6e96e0.mp4',
DisablePictureInPicture: 'true'
}).playmp3();
tz.lrc(gc).style('bottom: 60px').style('--border: 0');
tz.bgprog().style('bottom: 20px');
tz.fs().style('right: 20px; top: 20px');
</script>
视频用作小播，使用 .vid 选择器重新设置所需属性：宽、高、融合模式（去掉黑色背景）、指针样式、阴影（模拟边框）。
视频HTML标签有画中画，默认会自动开启，关闭它可在 tz.add() 指令加入视频时添加 DisablePictureInPicture 属性，值设为 false，此设置将等同于 <video ... DisablePictureInPicture="false" ...> 中的红色部分 欣赏黑黑老师的精彩制作。学习了！{:4_187:} 早安吉祥！打开电脑就看到马黑黑老师在花潮论坛分享的音画，瞬间被这“雪境+古风+绝唱”的组合戳中了！ 画面里，雪落枝头、素衣临风，古风意境铺得极雅；《千古绝唱》的旋律一响，那句“千古绝唱，唱尽人间沧桑”便在雪意中漾开，与画面里的静谧、苍茫感相融，像给“雪夜听歌”添了层诗意的滤镜。 马老师的制作的音画搭配，把“雪境的冷寂”和“歌声的深情”调和得妙极，让听者仿佛置身雪夜，跟着旋律触摸到“千古”的厚重，又在雪意里寻到一丝温柔的共鸣～ 感谢马老师在花潮论坛的分享，让这“音画+古风”的组合有了更多人共鸣，也让更多人感受到传统文化在现代表达里的鲜活感～ 期待马老师后续更多有温度、有质感的创作，也祝在花潮论坛的交流氛围越来越热，大家都能在这片文化天地里，找到属于自己的“精彩”～ 太棒了！玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】
愿马老师事事如意吉祥，幸福快乐绵长。 很好听的歌，很好看的图，感谢老师分享，上午好{:4_204:}{:4_178:}
霜染枫丹 发表于 2025-11-25 11:24
很好听的歌，很好看的图，感谢老师分享，上午好
{:4_191:} 偶然~ 发表于 2025-11-25 08:47
期待马老师后续更多有温度、有质感的创作，也祝在花潮论坛的交流氛围越来越热，大家都能在这片文化天地里， ...
{:4_191:} 梦江南 发表于 2025-11-25 08:25
欣赏黑黑老师的精彩制作。学习了！
{:4_190:} 马黑黑 发表于 2025-11-25 11:42
{:4_180:} 马黑黑 发表于 2025-11-25 08:02
视频用作小播，使用 .vid 选择器重新设置所需属性：宽、高、融合模式（去掉黑色背景）、指针样式、阴影（模 ...
黑黑老师，这MP4它会自动适应MP4高的。我本来还在愁呢。 梦江南 发表于 2025-11-25 15:12
黑黑老师，这MP4它会自动适应MP4高的。我本来还在愁呢。
如果需要完整覆盖你所设置的宽高，还需要一个属性：
object-fit: cover; 漂亮~谢谢马老师精彩示范{:4_191:} 马黑黑 发表于 2025-11-25 17:35
如果需要完整覆盖你所设置的宽高，还需要一个属性：
object-fit: cover;
这样正 好。
页:
[1]
2