你的位置:首页 > 软件开发 > 网页设计 > H5之audio标签放音兼容所有浏览器方法

H5之audio标签放音兼容所有浏览器方法

发布时间:2017-08-18 14:00:08
前端交流群,群文件提供大量文档、书籍和资料。期待你的加入!群号:127768464 由于项目需要,最近刚做了一个网页放音的功能,使用到了H5新标签<audio></audio>,但是audio只能支持IE8以上的 ...

前端交流群,群文件提供大量文档、书籍和资料。期待你的加入!群号:127768464     

      由于项目需要,最近刚做了一个网页放音的功能,使用到了H5新标签<audio></audio>,但是audio只能支持IE8以上的浏览器,低版本浏览器如何支持呢?下面我就来介绍一下我的解决办法。

      通过上网搜集资料,找到了两套方案,一种是在页面head中引入<script src='/images/loading.gif' data-original="http://www.cnblogs.com///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='/images/loading.gif' data-original="a.mp3"></audio>  <audio id="b_player_audio" src='/images/loading.gif' data-original="b.mp3"></audio>  <audio id="c_player_audio" src='/images/loading.gif' data-original="c.mp3"></audio>  <audio id="d_player_audio" src='/images/loading.gif' data-original="d.mp3"></audio>  <audio id="e_player_audio" src='/images/loading.gif' data-original="e.mp3"></audio> </div> <!--[if lte IE 8]> <div >  <embed id="a_player_ie8" type="audio/mpeg" src='/images/loading.gif' data-original="a.mp3" autostart="false"></embed>  <embed id="b_player_ie8" type="audio/mpeg" src='/images/loading.gif' data-original="b.mp3" autostart="false"></embed>  <embed id="c_player_ie8" type="audio/mpeg" src='/images/loading.gif' data-original="c.mp3" autostart="false"></embed>  <embed id="d_player_ie8" type="audio/mpeg" src='/images/loading.gif' data-original="d.mp3" autostart="false"></embed>  <embed id="e_player_ie8" type="audio/mpeg" src='/images/loading.gif' data-original="e.mp3" autostart="false"></embed> </div> <![endif]-->

js 的控制方法稍有不同,播放都是play()方法,关于停止播放,audio只提供了暂停方法pause(),Windows media player则提供了暂停pause()方法和停止stop()方法。

      以上都是自己总结的经验,有错误的地方欢迎大佬指正,或者有好的方法也可以交流一下。、

  前端交流群,群文件提供大量文档、书籍和资料。期待你的加入!群号:127768464

原标题:H5之audio标签放音兼容所有浏览器方法

关键词:浏览器

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。