雨洛

马黑黑

马黑黑

帖子代码

1. <style>
   
2.     @import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
   
3.     .pa {--offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/6/yl.jpg') no-repeat center/cover;}
   
4. </style>
   
5. 
   
6. <div class="pa">
   
7.     <div id="player" class="wrap200" style="right: 20px; bottom: 20px">
   
8.         <svg id="msvg" width="200" height="200">
   
9.             <path id="track" d="M10 100 A1 1 0 0 0 190 100" fill="none" stroke="lightblue" stroke-width="8" />
   
10.             <path id="prog" d="M10 100 A1 1 0 0 0 190 100" fill="none" stroke="lightgreen" stroke-width="8" />
    
11.         </svg>
    
12.     </div>
    
13. </div>
    
14. 
    
15. <script type="module">
    
16.     import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v4.js';
    
17.     const tz = TZ.TZ('pa');
    
18.    
    
19.     tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=1911835887'});
    
20.     tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/2418175/01/29/76/62a7571a73dc2.mp4'});
    
21.     tz.add('img', '', 'rot-ani', {
    
22.         src: 'https://638183.freep.cn/638183/small/2025/2501.webp',
    
23.         alt: '',
    
24.         style: 'width: 160px; clic-path: circle(40%); cursor: pointer'
    
25.     }).playmp3().to('player');
    
26.     tz.svgprog('msvg', 'track', 'prog');
    
27.     tz.fs().style('left: 20px; bottom: 20px; color: lightblue');
    
28. </script>

复制代码

马黑黑

帖子主要演示在已有父元素基础上实现播放器系列功能：播放控制器的加入、进度条的加入。

已有父元素：一，id="palyer" 的 div，二，id="msvg" 的 svg。svg 已经将进度条绘制好。

小播的容器已经存在，所以，创建小播时，使用 to 链式指令，具体代码在第 25 行。to(id) 指令的参数是容器的 id。

而进度条所在的 svg 本就在 id="player" 的 div 里面，只需通过 id 配置 svgprog() 指令即可，具体代码在第 26 行。

清茶煮雪

这个下雨效果真好看！

清茶煮雪

这个下雨效果真好看！

清茶煮雪

黑黑老师还分享了代码，真好！空了来套用

清茶煮雪

谢谢无私奉献的黑黑老师，分享辛苦了！

马黑黑

清茶煮雪 发表于 2025-12-5 21:24
这个下雨效果真好看！

视频效果

马黑黑

清茶煮雪 发表于 2025-12-5 21:24
这个下雨效果真好看！

重要的话要说三遍

马黑黑

清茶煮雪 发表于 2025-12-5 21:25
谢谢无私奉献的黑黑老师，分享辛苦了！

奉献说大了，玩玩，相互学习交流

清茶煮雪

马黑黑 发表于 2025-12-5 21:26
重要的话要说三遍

可能是网络原因，评论弹出相同的两个，这会手机看的，下次电脑上来欣赏～

清茶煮雪

马黑黑 发表于 2025-12-5 21:26
奉献说大了，玩玩，相互学习交流

代码编辑很费精力的，您为大家提供了这么多漂亮可直接套用的代码，这就是无私精神值得大家尊重。

杨帆

谢谢马老师精彩示范与演示~

在已有父元素基础上实现播放控制器的加入、进度条的加入，使得 TZ功能日趋完善

在未增加脚本（JS）体量的同时，使得HTML 结构更加丰满，也增强了制帖的自主性、扩展性与灵活性

马黑黑

清茶煮雪 发表于 2025-12-5 21:29
可能是网络原因，评论弹出相同的两个，这会手机看的，下次电脑上来欣赏～

貌似论坛今天的网速不太好

小辣椒

这个播放器也是有进度条的，黑黑现在出图速度真快，，每天都有新产品出来

马黑黑

杨帆 发表于 2025-12-5 21:44
谢谢马老师精彩示范与演示~

在已有父元素基础上实现播放控制器的加入、进度条的加入，使得 TZ ...

这个 to 指令早有的，应该是第一个版本就有

小辣椒

马黑黑 发表于 2025-12-5 21:20
帖子主要演示在已有父元素基础上实现播放器系列功能：播放控制器的加入、进度条的加入。

已有父元素：一 ...

要记住这些备注

马黑黑

清茶煮雪 发表于 2025-12-5 21:31
代码编辑很费精力的，您为大家提供了这么多漂亮可直接套用的代码，这就是无私精神值得大家尊重。

言重了，玩玩而已

马黑黑

小辣椒 发表于 2025-12-5 22:09
这个播放器也是有进度条的，黑黑现在出图速度真快，，每天都有新产品出来

喝完酒玩玩，没啥快不快

马黑黑

小辣椒 发表于 2025-12-5 22:10
要记住这些备注

一个简单的 to 指令而已。tzMaker 模块玩法很灵活的