最近做一个音视频播放器, 考虑对 IE11 的兼容性, 视频播放器改为引用 video.JS 来处理. 音频播放器在网上搜索后, 准备使用原生的 audio+suorce 标签来处理.
如下:
- <audio
- controls='true'
- controlsList='nodownload'
- preload='auto'
- >
- <source
- type='audio/mpeg'
- src={image}
- >
- </audio>
controls='true' controlsList='nodownload' 这两个属性是展示音频播放器得到操作按钮, 但是禁止下载, 可根据自己项目情况调整.
preload='auto' 这里有个坑, 如果不添加, 在谷歌音频播放正常, 但是在 IE 音频播放到一半突然停止, 再点击播放并不执行. 并且这个问题只有在线上, 加载外部链接后才会重现, 如果是本地资源不会复现这种情况!! 考虑是页面加载音频出现的问题, 所以尝试加了这个属性, 一下就好了~ 所以在 IE 出现此类情况的, 一定要加上这个属性啊!!
type='audio/mpeg' 兼容性的重中之重! 此前 audio 根本不显示样式, 加上这个音频格式属性基本可以在 IE11 使用了, 除了上面说的音频加载的问题.
PS:
IE11 的默认样式差异和谷歌的较大, 记得处理.
之前使用了 embed 标签处理兼容性, 确实在 IE11 播放效果很好, 但是!! 这个标签在页面组件销后仍在后台播放, 处理停止播放又很难, 具坑... 慎用.
来源: http://www.jianshu.com/p/3a5d0b2ad067