播放器

亚伦影音工作室

[i=s] 本帖最后由 亚伦影音工作室 于 2025-2-3 21:16 编辑 [/i]

0:00

0:00

红影

是的，挺漂亮的。的确进度没法拖动

秋思梦景

问候老师好！精美播放器佳作，精心制作分享。为您点赞！

马黑黑

关于定位播放器的问题：

（一）需要给 .green-audio-player 选择器加入 position: absolute; 属性设置，这样即可随意定位到帖子任意位置；
（二）由于HTML代码流中，class="green-audio-player" 的标签出现在前面，层级关系上它被后面的元素”覆盖“，故而其上的按钮点击失效，需要提升 z-index 属性值，同样再CSS中设置，在 .green-audio-player 选择其中加入 z-index: 200; 即可。

亚伦影音工作室

马黑黑 发表于 2025-1-20 12:07
关于定位播放器的问题：

（一）需要给 .green-audio-player 选择器加入 position: absolute; 属性设置， ...

这些东西都加上进度条就失效了！

马黑黑

亚伦影音工作室 发表于 2025-1-20 22:20
这些东西都加上进度条就失效了！

这些其实就是HTML元素的布局问题，可以再细细研究一下

亚伦影音工作室

马黑黑 发表于 2025-1-20 22:35
这些其实就是HTML元素的布局问题，可以再细细研究一下

细细看了，也看不出来毛病！人家的代码我不想去改，只是加了歌词，别的没动，现在我没加定位代码一样可以用，用定位反而进度条不灵了！
用margin: 644px auto;来定位还可以。

老师你能不能在这个基础上做个横向音量条！

马黑黑

亚伦影音工作室 发表于 2025-1-21 08:09
细细看了，也看不出来毛病！人家的代码我不想去改，只是加了歌词，别的没动，现在我没加定位代码一样可以 ...

如果不想复杂的定位，那么：

方法一：可以这样处理：帖子中设计一个div标签，用它来包裹你所引入的播放器，然后你仅需要控制那个div的定位；

方法二：可以使用 transform: translate(x,y) 直接控制播放器的定位（这个方法要比margin好）。

至于音量条，横向纵向的其实是简单的，只是目前没有兴趣做，你可以自行研究一下，但不建议再这个播放器基础上做，它的实现方式过于臃肿。

亚伦影音工作室

马黑黑 发表于 2025-1-21 19:53
如果不想复杂的定位，那么：

方法一：可以这样处理：帖子中设计一个div标签，用它来包裹你所引入的播 ...

测试用了很多方法，包括你说的我都试过了，可以加上但这个进度条加上失灵了！就像用了魔法，不再玩他了，伤脑！
不过还是谢谢老师的指导！