资讯专栏INFORMATION COLUMN

DIY audio player - 自定义audio播放器样式

SolomonXie / 3178人阅读

摘要:之前也有用到,大概是生日贺卡,博客音乐,播放语音等场景。哦,可能还会涉及到自动播放。资料为元素,可以初始化多个播放器样式是写在代码里的,如果有需要,可以把代码抠出来放在文件里。然后再化成自己喜欢的样子。来个,打开为移动端模式。

之前也有用到audio,大概是生日贺卡,博客音乐,播放语音等场景。
场景也比较简单,一个按钮加一点动画,再用上Audio的API,基本上就可以搞定了。
哦,可能还会涉及到自动播放。【这里】

DIY

以上场景,我们一般都看不到Audio的样式,基本都被隐藏了。因为对于新时代的我们来说,暂时还没有get它的美。

但是,我们要控制音频的播放,直观的看到时间进度等,那就需要展示这东西了。世上没有丑audio,只有懒audio.

我们给它化个妆就好了。淡妆,淡妆。

【code here】

资料

HTML/Element/audio

Media_events

Use
$(selector).initAudioPlayer();  // select 为audio元素,可以初始化多个

播放器样式是写在js代码里的,如果有需要,可以把代码抠出来放在CSS文件里。然后再化成自己喜欢的样子。或者你产品经理喜欢的样子。

DEMO

来个demo,PC 打开为移动端模式。

手机扫描二维码:

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/97729.html

相关文章

  • DIY audio player - 定义audio放器样式

    摘要:之前也有用到,大概是生日贺卡,博客音乐,播放语音等场景。哦,可能还会涉及到自动播放。资料为元素,可以初始化多个播放器样式是写在代码里的,如果有需要,可以把代码抠出来放在文件里。然后再化成自己喜欢的样子。来个,打开为移动端模式。 之前也有用到audio,大概是生日贺卡,博客音乐,播放语音等场景。场景也比较简单,一个按钮加一点动画,再用上Audio的API,基本上就可以搞定了。哦,可能还会...

    cpupro 评论0 收藏0
  • DIY video player - 定义video放器样式

    摘要:本文基于,自定义视频播放器样式。有的浏览器就是不支持,白名单都没有。来个,打开为移动端模式,的事件是支持的,只是样式需要自个儿来。 DIY 本文基于HTML5 Video API,自定义Web视频播放器样式。 其实吧,原生的video 标签样式挺好看的,但每个人的视觉感受不一样,所以就会有需要改变原生样式的时候。 那就给它化个妆咯。淡妆,淡妆。 【code here】 添加play...

    Carbs 评论0 收藏0
  • DIY video player - 定义video放器样式

    摘要:本文基于,自定义视频播放器样式。有的浏览器就是不支持,白名单都没有。来个,打开为移动端模式,的事件是支持的,只是样式需要自个儿来。 DIY 本文基于HTML5 Video API,自定义Web视频播放器样式。 其实吧,原生的video 标签样式挺好看的,但每个人的视觉感受不一样,所以就会有需要改变原生样式的时候。 那就给它化个妆咯。淡妆,淡妆。 【code here】 添加play...

    BlackHole1 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<