HTML5技术

H5之audio标签放音兼容所有浏览器方法 - 键盘敲飞

字号+ 作者:H5之家 来源:H5之家 2017-08-18 15:01 我要评论( )

前端交流群,群文件提供大量文档、书籍和资料。期待你的加入!群号:127768464 由于项目需要,最近刚做了一个网页放音的功能,使用到了H5新标签audio/audio,但是audio只能支持IE8以上的浏览器,低版本浏览器如何支持呢?下面我就来介绍一下我的解决办法。

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

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

      通过上网搜集资料,找到了两套方案,一种是

      通过实际观察,我发现IE8及以下浏览器中的embed标签嵌入的实际上是Windows自带的播放器Windows media player,js操作播放、暂停、停止的方法也就是操作Windows media player的方法,这里有点小坑,我发现embed标签的autostart="false"在其他浏览器支持不是很好,就是在页面加载的时候会自动放音,此问题的处理方法我用的是 [if lte IE 8] 来判断浏览器版本,只有在IE8及以下的浏览器则使用<embed></enbed>,IE8以上的浏览器不加载<embed></enbed>标签。实际代码如下:

[if lte IE 8]> <div> <embed type="audio/mpeg" src="a.mp3" autostart="false"></embed> <embed type="audio/mpeg" src="b.mp3" autostart="false"></embed> <embed type="audio/mpeg" src="c.mp3" autostart="false"></embed> <embed type="audio/mpeg" src="d.mp3" autostart="false"></embed> <embed type="audio/mpeg" src="e.mp3" autostart="false"></embed> </div> <![endif]-->

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

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

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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML的正确入门姿势——基本结构与基本标签 - Realsdg

    HTML的正确入门姿势——基本结构与基本标签 - Realsdg

    2017-08-07 12:00

  • 解决HTML5的Video标签,有部分MP4无法播放的问题 - 我们都是程序猿

    解决HTML5的Video标签,有部分MP4无法播放的问题 - 我们都是程序猿

    2017-07-26 14:00

  • 关于meta标签中的http-equiv属性使用介绍 - 予沫笙

    关于meta标签中的http-equiv属性使用介绍 - 予沫笙

    2017-07-18 15:00

  • HTML5新增标签 - 小君君的博客

    HTML5新增标签 - 小君君的博客

    2017-07-12 12:00

网友点评