Html5 audio标签样式的修改


Posted in HTML / CSS onJanuary 28, 2016

先给大家介绍下HTML5中的新元素标签
src:音频文件路径。
autobuffer:设置是否在页面加载时自动缓冲音频。
autoplay:设置音频是否自动播放。
loop:设置音频是否要循环播放。
controls:属性供添加播放、暂停和音量控件。
由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,所以我简单的把它进行了封装,效果如下:

Html5 audio标签样式的修改

作为技术实现,它的原理比较简单,就是把原生的audio隐藏,然后用div来显示播放器的效果,然后调用它的click事件来触发play和stop,然后是时长duration,这个值有时能够获取,有时不行,比较坑,所以建议在audio标签上自定义duration属性存放时长,这时,如果组件获取不到时会来取这个值。

复制代码
代码如下:

this.settings.target.on('loadedmetadata', function() {
_this.duration = _this.audio.duration;
if (_this.duration != "Infinity") {
_this.durationContent.html(Math.floor(_this.duration) + 's');
} else {
var attr = $(_this.settings.target).attr('duration');
if(attr){
_this.durationContent.html($(_this.settings.target).attr('duration')+"s");
}else{
_this.durationContent.html('');
}
}
});

以上内容给大家介绍了Html5 audio标签样式的修改 ,希望对大家有所帮助。

HTML / CSS 相关文章推荐
对CSS3选择器的研究(详解)
Sep 16 HTML / CSS
纯css3显示隐藏一个div特效的具体实现
Feb 10 HTML / CSS
css3 border旋转时的动画应用
Jan 22 HTML / CSS
css3遮罩层镂空效果的多种实现方法
May 11 HTML / CSS
CSS3 实现图形下落动画效果
Nov 13 HTML / CSS
HTML5中的nav标签学习笔记
Jun 24 HTML / CSS
详解Html5中video标签那些属性和方法
Jul 01 HTML / CSS
使用css如何制作时间ICON方法实践
Nov 12 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 HTML / CSS
前后端结合实现amazeUI分页效果
Aug 21 HTML / CSS
css弧边选项卡的项目实践
May 07 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
Jan 27 #HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
Jan 27 #HTML / CSS
HTML5实现简单图片上传所遇到的问题及解决办法
Jan 20 #HTML / CSS
Html5实现二维码扫描并解析
Jan 20 #HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 #HTML / CSS
HTML5 History API 实现无刷新跳转
Jan 11 #HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
Jan 11 #HTML / CSS
You might like
解析mysql left( right ) join使用on与where筛选的差异
2013/06/18 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
php自定文件保存session的方法
2014/12/10 PHP
详解PHP+AJAX无刷新分页实现方法
2015/11/03 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
JavaScript 通过模式匹配实现重载
2010/08/12 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
2010/12/28 Javascript
用JS控制回车事件的代码
2011/02/20 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
对Jquery中的ajax再封装,简化操作示例
2014/02/12 Javascript
js如何判断用户是在PC端和还是移动端访问
2014/04/24 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
2015/02/25 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
jQuery超简单遮罩层实现方法示例
2018/09/06 jQuery
Python tkinter实现的图片移动碰撞动画效果【附源码下载】
2018/01/04 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
python中scikit-learn机器代码实例
2018/08/05 Python
python的concat等多种用法详解
2018/11/28 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
Python小程序之在图片上加入数字的代码
2019/11/26 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
python如何实现图片压缩
2020/09/11 Python
python 实现非极大值抑制算法(Non-maximum suppression, NMS)
2020/10/15 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
无畏的旅行:Intrepid Travel
2017/12/20 全球购物
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
建筑工地大门标语
2014/06/18 职场文书
工作态度恶劣检讨书
2015/05/06 职场文书
毕业实习证明范本
2015/06/16 职场文书
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python