H5之audio标签放音兼容所有浏览器方法
前端交流群,群文件提供大量文档、书籍和资料。期待你的加入!群号:127768464
由于项目需要,最近刚做了一个网页放音的功能,使用到了H5新标签<audio></audio>,但是audio只能支持IE8以上的浏览器,低版本浏览器如何支持呢?下面我就来介绍一下我的解决办法。
通过上网搜集资料,找到了两套方案,一种是在页面head中引入<script src="//api.html5media.info/1.1.8/html5media.min.js"></script>处理兼容,另外一种是搭配<embed></enbed>标签使用。经过实际测试,第一种引入js的貌似达不到预期效果,感兴趣的朋友也可以试试,有可能是我的操作不对。我使用的是第二种方法,使用<audio></audio>和<embed></enbed>搭配使用,IE8以上的浏览器统一使用<audio></audio>来放音,IE8及以下的浏览器则使用<embed></enbed>。
通过实际观察,我发现IE8及以下浏览器中的embed标签嵌入的实际上是Windows自带的播放器Windows media player,js操作播放、暂停、停止的方法也就是操作Windows media player的方法,这里有点小坑,我发现embed标签的autostart="false"在其他浏览器支持不是很好,就是在页面加载的时候会自动放音,此问题的处理方法我用的是 [if lte IE 8] 来判断浏览器版本,只有在IE8及以下的浏览器则使用<embed></enbed>,IE8以上的浏览器不加载<embed></enbed>标签。实际代码如下:
<div style="display:none">
<audio id="a_player_audio" src="a.mp3"></audio>
<audio id="b_player_audio" src="b.mp3"></audio>
<audio id="c_player_audio" src="c.mp3"></audio>
<audio id="d_player_audio" src="d.mp3"></audio>
<audio id="e_player_audio" src="e.mp3"></audio>
</div>
<!--[if lte IE 8]>
<div style="display:none">
<embed id="a_player_ie8" type="audio/mpeg" src="a.mp3" autostart="false"></embed>
<embed id="b_player_ie8" type="audio/mpeg" src="b.mp3" autostart="false"></embed>
<embed id="c_player_ie8" type="audio/mpeg" src="c.mp3" autostart="false"></embed>
<embed id="d_player_ie8" type="audio/mpeg" src="d.mp3" autostart="false"></embed>
<embed id="e_player_ie8" type="audio/mpeg" src="e.mp3" autostart="false"></embed>
</div>
<![endif]-->
js 的控制方法稍有不同,播放都是play()方法,关于停止播放,audio只提供了暂停方法pause(),Windows media player则提供了暂停pause()方法和停止stop()方法。
以上都是自己总结的经验,有错误的地方欢迎大佬指正,或者有好的方法也可以交流一下。、
前端交流群,群文件提供大量文档、书籍和资料。期待你的加入!群号:127768464
H5之audio标签放音兼容所有浏览器方法的更多相关文章
- h5 的 audio 标签知识点
因为音频格式有版权,各浏览器使用不同的音频格式. 音频格式兼容性 音频格式 Chrome Firefox IE9 Opera Safari MP3 支持 不支持 支持 不支持 支持 OGG 支持 支持 ...
- 微信h5页面audio标签在ios下不能自动播放
背景介绍:在一个h5页面中,当用户提交表单到后台,后台返回的结果成功的话,开始自动播放背景音乐 出现的问题:在安卓手机上正常,iOS中没有反应 后来网上一番搜索后了解到时因为iOS不允许自动播放音乐, ...
- 【转】HTML5新增元素兼容旧浏览器方法
ref:http://www.jb51.net/html5/163906.html 问题:如何让IE8-兼容这些标签?(需要设计JS中的DOM) 代码如下: <span style=" ...
- requestNextAnimationFrame兼容主浏览器方法
window.requestNextAnimationFrame = (function () { var originalRequestAnimationFrame = undefined, wra ...
- html5中的video标签和audio标签
不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...
- HTML5 Audio标签方法和函数API介绍
问说网 > 文章教程 > 网页制作 > HTML5 Audio标签方法和函数API介绍 Audio APIHTML5HTML5 Audio预加载 HTML5 Audio标签方法和函数 ...
- H5页面实现一个Audio标签加载多个音频文件,并进行播放和展示音频长度
最近微信项目中有需求,要将微信端发送过来的amr格式的语音文件,在项目中的页面上进行展示和播放,实现方式如下: 1.首先java后台收到微信端的消息推送的时候,使用 ffmpeg将amr格式的音频文件 ...
- H5 audio标签
37-audio标签 注意点: audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样 只不过有3个属性不能用, heig ...
- 论HTML5 Audio 标签歌词同步的实现
HTML5草案里面其实有原生的字幕标签(<track> Tag)的,但使用的是vtt格式的文件,非常规的字幕(.sub, .srt)或歌词文件(.lrc). 用法如下(代码来自W3Scho ...
随机推荐
- Aspose.Words导出图片 表格 Interop.Word
先定义一个WORD 模板, 然后替换文本.域 ,定位开始表格 文本和段落 // Specify font formatting Aspose.Words.Font font = builder.Fon ...
- NPOI 操作EXCEL 小计
由于需要做一个生成下载Excel的功能,查了一下 常用的操作有 NPOI Spire DOCX,于是便下载了NPOI试了一下,发现确实好用,但是还是有几个比较坑的地方 1.不能直接删除列 虽然提供了 ...
- IDEA中使用spring官方模板+@Controller
视图层处理http请求用@Controller时,要配合模板的使用,模板类似javaweb中的jsp,但是模板的引擎用的是 thymeleaf ,但是并不推荐. 现在的开发模式都是前后端分离,做后端只 ...
- Errors while uninstall the reporting extensions
"Microsoft.crm.setup.Srsdataconnector UnregisterServer Action操作失败:Requested value 'geo' was not ...
- selenium grid 使用方法
代码和selenium driver相同 只是 启动环境方式不同.至少启动一个hub 一个 node .如需要多个,可以使用端口进行区分. java -jar selenium-server-stan ...
- IPV4基本知识介绍
转自华为官网 1.1 介绍 定义 IPv4(Internet Protocol Version 4)协议族是TCP/IP协议族中最为核心的协议族.它工作在TCP/IP协议栈的网络层,该层与OSI参考 ...
- 五环之歌之PHP分页
根据以往的经验,对于很多初学者,分页功能实现起来还是有一定的困难的,为了帮大家解决这样的问题:特此献上五环之歌.从此分页功能便是如小岳岳唱歌一样简练,漂亮,精干.哈哈,不闲扯了.正式进入千锋PHP五环 ...
- Git基本操作(add,commit的理解)
1.创建仓库 ——创建工作目录(Working Directory):git三种副本:工作目录(Working Direcotry),暂存区域(Stage,索引(Index)),仓库(History) ...
- 使用extentreports美化报告
无意之间在整理testng 报告输出的文档时,发现一个美化testng的报告的插件,感觉确实“漂亮”,但是还不确定是否实用,案例来自官方网站自己添了一些内容,更改了存放路径,本地目前已确定可正常运行, ...
- JAVA对list集合进行排序Collections.sort()
对一个集合中的对象进行排序,根据对象的某个指标的大小进行升序或降序排序.代码如下: // 进行降序排列 Collections.sort(list, new Comparator<ResultT ...