正文  软件开发 > html5 >

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

H5之audio标签放音兼容所有浏览器方法,h5audio标签放音前端交流群,群文件提供大量文档、书籍和资料。期待你的加入!群号:127768464 由于项目需要,最近刚做了...

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

前端交流群,群文件提供大量文档、书籍和资料。期待你的加入!群号: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>-->

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

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

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

http://www.bkjia.com/HTML5/1223107.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/1223107.htmlTechArticleH5之audio标签放音兼容所有浏览器方法,h5audio标签放音 前端交流群,群文件提供大量文档、书籍和资料。期待你的加入!群号:127768464 由于...