华灯初上（测试帖子自动居中）

凡哥

凡哥

帖子代码

1. <style>
   
2.     @import 'https://638183.freep.cn/638183/web/tz/tz.v5.css';
   
3.     .pa { --bg: url('https://638183.freep.cn/638183/t24/w7/hxdg.webp') no-repeat center/cover; }
   
4.     .vid { width: 5vw; height: 5vw; border-radius: 50%; mix-blend-mode: screen; bottom: 60px; cursor: pointer; }
   
5. </style>
   
6. 
   
7. <div class="pa"></div>
   
8. 
   
9. <script type="module">
   
10.     import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v5.js';
    
11.     const tz = TZ.TZ('pa');
    
12.     tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=1344119453' });
    
13.     tz.add('video', '', 'pd-vid', { src: 'https://img.tukuppt.com/video_show/2418175/00/02/20/5b51f6ceb2cde.mp4' });
    
14.     tz.add('video', '', 'vid', {
    
15.             disablePictureInPicture: 'true',
    
16.             src: 'https://img.tukuppt.com/video_show/2475824/00/08/36/5d1ec038a435c.mp4'
    
17.         }).playmp3();
    
18.     tz.bgprog().style('bottom: 40px; color: #fefefe; width: 240px;');
    
19.     tz.fs().style('right: 20px; top: 20px;');
    
20.     tz.autoMid();
    
21. </script>

复制代码

凡哥

帖子所使用的 JS 模块应配套使用同版本的 CSS 样式表，都是 tz.v5.*，分别是 tz.v5.js 和 tz.v5.css。

帖子自动居中通过 JS 计算并驱动实现。里面可能涉及到一些细节问题，居中的精准度存在一些误差，影响的因素主要是浮点数取整、滚动条厚度差异等。不管怎样，不用去设置帖子所在父元素的视口偏移量，一套代码发布多个平台，无需改变任何数据，这时便利。

模块居中功能刚刚写好，应该存在一些问题。

凡哥

云端漫步 发表于 2026-2-14 21:40
谢谢凡哥分享音画代码，代码整体逻辑梳理清晰，播放音频、调整控件位置、自适应居中，并对这些元素进行样式 ...

醉美水芙蓉

欣赏马黑黑老师精彩播放器！

醉美水芙蓉

谢谢老师分享代码，㊗️马老师新年快乐！

雨声

凡哥 发表于 2026-2-14 21:29
帖子所使用的 JS 模块应配套使用同版本的 CSS 样式表，都是 tz.v5.*，分别是 tz.v5.js 和 tz.v5.css。

帖 ...

谢谢凡哥的细致的讲解，我这笨人慢慢消化和学习~

雨声

问好凡哥，新年快乐。马年吉祥~

凡哥

雨声 发表于 2026-2-15 19:43
问好凡哥，新年快乐。马年吉祥~