学马老师代码制作的播放器 戏歌：半树梨花
本帖最后由 霜染枫丹 于 2025-11-26 22:45 编辑 <br /><br /><style>@import 'https://638183.freep.cn/638183/web/tz/tz.v3.css';
.pa {
--offsetX: 81px;
--bg: url('https://cccimg.com/view.php/348ed74c57e828e12693351e0eeb629f.jpg') no-repeat center/cover;
position: relative; /* 作为定位容器，必须保留 */
overflow: hidden;
min-height: 400px; /* 可选：确保容器有足够高度，避免按钮被压缩 */
}
.bg-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.4;
z-index: -1;
pointer-events: none;
}
.vid {
width: 8%;/* 原15% → 改为8% */
height: 15%; /* 新增：保持宽高比例一致 */
/* 其他样式保持不变 */
border-radius: 50%;
mix-blend-mode: screen;
cursor: pointer;
box-shadow: 0 0 0 3px rgba(0, 200, 0, .25); /* 可选：缩小阴影范围 */
position: absolute;
right: 20px; /* 原30px → 改为20px */
bottom: 20px; /* 原30px → 改为20px */
z-index: 10;
margin: 0;
}
/* 确保其他控件在视频层上方 */
.tz-lrc, .tz-bgprog, .tz-fs {
position: relative;
z-index: 10;
}
/* 确保其他控件在视频层上方 */
.tz-lrc, .tz-bgprog, .tz-fs {
position: relative;
z-index: 10;
}
</style>
<div id="pa" class="pa">
<video class="bg-video" autoplay loop muted playsinline>
<source src="https://cccimg.com/view.php/a1ab407014be8051a3bf175bf5aba844.mp4" type="video/mp4">
<img src="https://cccimg.com/view.php/fda2e0a5d321ca19cde9cf051d9948be.jpg" alt="背景图" style="width:100%;height:100%;object-fit:cover;">
</video>
</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
Oh\n
yeah\n
漫天如雪潇洒洒\n
一妹飘飘花花落\n
花影重重\n
满庭香气在人间\n
看淡树梨花\n
细雨春秋\n
说人间冬夏\n
几时纷纷\n
不再年色\n
上千起\n
OK.`);
tz.add('audio', '', '', { src: 'https://cccimg.com/view.php/75186491bad620e11c71bc1057666050.mp3' });
tz.add('video', '', 'vid', {
src: 'https://cccimg.com/view.php/9a8863c81eb713269c95da49dd9220c4.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');
document.addEventListener('DOMContentLoaded', function() {
const bgVideo = document.querySelector('.bg-video');
bgVideo.play().catch(err => {
bgVideo.muted = true;
bgVideo.play();
});
bgVideo.onloadeddata = function() {
bgVideo.style.opacity = '0.4';
};
});
</script> 本帖最后由 霜染枫丹 于 2025-11-26 10:43 编辑
学着制作，在色彩搭配上没有基本功，觉得可以，搭配到一起就不顺眼，勉强这样，背景是我自己拍摄的梨花。学了这2款，体会挺多的，难度不在操作上，难在做不出来想要的样子。这就是基本功中的“德不配位”，没有提高的基础。{:4_189:}
霜染枫丹 发表于 2025-11-25 22:34
学着用自己拍摄的照片制作，在色彩搭配上没有基本功，觉得可以，搭配到一起就不顺眼，勉强这样，背景是我自 ...
那烟气很美啊，飘飘荡荡在梨树间，如仙气一般呢。梨花的拍摄也好美{:4_187:}
做小播的花朵单独看也很漂亮，不过这帖主要是表现梨花的，小播花朵抢镜头了{:4_173:} 红影 发表于 2025-11-25 23:31
那烟气很美啊，飘飘荡荡在梨树间，如仙气一般呢。梨花的拍摄也好美
做小播的花朵单独看也很漂 ...
哈哈，我这还换了好几次呢。这真是说对了，我看着就乐{:4_189:}{:4_187:}
来欣赏霜染枫丹精品佳作！
太棒了！玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】
期待霜染枫丹佳作频出！
愿你事事如意吉祥，幸福快乐绵长。
感谢支持花潮论坛，辛苦了，祝霜染枫丹和家人岁岁安康，幸福吉祥！ 偶然~ 发表于 2025-11-26 00:01
感谢支持花潮论坛，辛苦了，祝霜染枫丹和家人岁岁安康，幸福吉祥！
谢谢偶然！！新的一天开始了，祝您每天都安好！
我学着做，总是有点拧巴，就算熟悉代码了。有时间继续练手{:4_187:}{:4_190:}
霜染枫丹 发表于 2025-11-26 00:07
谢谢偶然！！新的一天开始了，祝您每天都安好！
我学着做，总是有点拧巴，就算熟悉代码了。有时间继续 ...
很好，祝你创作愉快 唱的好听 阿狄丽娜 发表于 2025-11-26 08:09
唱的好听
谢谢你的支持，上午好~~我挺喜欢这二位的戏歌。{:4_204:}
霜染枫丹 发表于 2025-11-25 23:39
哈哈，我这还换了好几次呢。这真是说对了，我看着就乐
呀，修改后很漂亮啊，色彩协调，小播等的布置得当，这一版比前面那版好很多，尤其色彩搭配上{:4_199:} 背景画面有朦胧感，如梦如幻。歌曲很好听。欣赏点赞！{:4_199:} 霜染枫丹 发表于 2025-11-25 22:34
学着制作，在色彩搭配上没有基本功，觉得可以，搭配到一起就不顺眼，勉强这样，背景是我自己拍摄的梨花。学 ...
枫丹老师视频制作技术棒棒哒，学做代码帖也如此漂亮，祝开心天天{:4_204:} 红影 发表于 2025-11-26 11:50
呀，修改后很漂亮啊，色彩协调，小播等的布置得当，这一版比前面那版好很多，尤其色彩搭配上
红影中午好！哈哈~·我早上上来一看，就想笑，那个播放器我换了好几个素材都不顺眼，就重新在AI上做了一个，缩小了一圈，拖到下边来了，在中间怎么看和背景不协调。自己拍的照片和歌曲梨园也不搭，哈哈~~就都换了。
谢谢红影关照，得到肯定有进步特别高兴，下次好好做在放出来{:4_189:}{:4_204:}{:4_190:}
梦江南 发表于 2025-11-26 12:07
背景画面有朦胧感，如梦如幻。歌曲很好听。欣赏点赞！
谢梦江南的支持，一个小制作竟然折腾了好多遍。这基本功是真吐鲁番水平。{:4_189:}有你的支持特高兴，我继续努力快点掌握。{:4_189:}
杨帆 发表于 2025-11-26 13:26
枫丹老师视频制作技术棒棒哒，学做代码帖也如此漂亮，祝开心天天
这个东东我没基础，得看教程才明白一行行都是在做什么的，马老师是针对有基础的在讲课，他说的我看就是天书。哈哈~~看着还挺眼馋想做，只好找教程慢慢对照着看慢慢的做，记不住，弄得满桌面记下的文档。也挺好玩，疯了挺大的功夫做出来还看不顺眼。{:4_189:}就想笑。
谢扬帆支持！能一起玩真高兴，中午好~~{:4_204:}{:4_190:}
欣赏，美好享受！曾经也是票友，多年不听了。{:4_190:}
页:
[1]
2