—— 分享前端技术,记录生活点滴

Video或audio标签无法监听error事件

  在公司开发维护微信内 H5 播放器一年多,前几天我接到一个新需求:直播/点播服务以播放流量计费。需求一出,会心一笑。对在视频服务行业中跌跌撞撞摸爬滚打的小团队来说,不按流量收费,就会被流量成本按在地上摩擦。

  流量的统计和计费,都是后台去做的,我只负责在合适的时机调取接口,即我需要在开始播放(play)、暂停(pause)、播放结束(ended)以及播放错误(error)中开始或暂停统计。最开始我想到的是在播放中(timeupdate)持续调用,一劳永逸,但是转念一想,服务器受不了吧!哈哈。

  随后在开发过程中,我遇到一个小而精的 bug,印象深刻。这里我想说的是播放错误这个事件。

  本来是很简单的功能:video.onerror = callback,结果呢,回调函数总是不执行。

  我随手写了一个 demo,demo 中只写播放器 video 标签,然后给它一个不存在的 src,监听 error,发现回调函数会触发。

1
2
3
4
5
6
7
8
<video class='video' src=""></video>
<script>
var a = document.getElementsByClassName('video')[0];
a.src = 'xxx.mp4';
a.onerror = function() {
alert()
}
</script>

  反观项目里的代码,我开始怀疑是不是全局阻止默认事件的原因。全局查找 onerror,也没有可疑的地方。

  随后我跳出细节,整体再审视一下自己的代码,我发现项目中和 demo 里,video 是有书写区别的:demo 中将 src 属性直接写在 video 标签上,而项目中,video 标签内没有写 src 属性,而是将这一属性写在了 source 里

  我们知道 source 标签,它的作用是为媒介元素(比如 <video><audio>)定义媒介资源,并且可以并列写多条,规定不同的 src 以及 MIME 类型等,浏览器则将优先选择自己支持的那一条。所以这是提高浏览器兼容性很实用的一个细节。

1
2
3
4
5
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

  但就是因为这个 source 标签,我没有在 video 上加 src,导致无法监听 error 事件。我给 video 标签写入 src 属性,再次测试后,error 执行了。就是这样一个细节,我排查许久,所以写在这里,帮助遇到同样问题的骚年,避免在这个坑里纠结太久。

  以上便是本次分享的内容,希望对你有所帮助,感谢关注阿晋的网络日志。

支付宝打赏 微信打赏

如果觉得我的文章对您有用,请随意赞赏 :)

留言