最近做一个音视频播放器,考虑对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播放效果很好,但是!!这个标签在页面组件销后仍在后台播放,处理停止播放又很难,具坑...慎用。