mpegts.js 播放flv视频报错:PIPELINE_ERROR_DECODE: video decode error!
关于mpegts.js播放flv视频的方法这里就不过多叙述了,可以参考:vue 直播播放器 mpegts.js这篇文章,今天主要是记录一下在播放过程中报:PIPELINE_ERROR_DECODE: video decode error!这个错误的处理方法。
因服务器网络抖动或者其他原因,在生产flv视频的时候会出现丢包或掉帧的情况,这个时候使用mpegts.js再去播放该视频,就会出现视频在掉帧或丢包的地方停止播放,而我们的需求是希望视频能够自动跳过继续播放,这里就记录一下曲线救国的方法,如果大家有更好的方法,可以发出来让我学习一下:
<video ref="videoRef" muted controls @error="handleVideoInfo" @durationchange="handleVideoInfo"></video>
这里需要使用video的error和durationchange这两个方法,error这个方法就不多介绍了,播放报错会触发该方法;durationchange这个方法是在视频总时长发生变化时触发,后面会在使用的时候讲一下为什么用这个方法。
handleVideoInfo(e) {if (e.type == 'error') {//这里记录一下当前报错的播放时间,+1s是为了跳过当前报错this.playTime = e.target.currentTime + 1//这里是判断是否需要更新播放时间this.isJump = true//以下两个方法都是之前文章:vue 直播播放器 mpegts.js中的方法//销毁播放器this.destoryVideo(this.video)//初始化播放器this.initVideo(this.videoSrc)}//这里说明一下为什么要使用durationchange这个方法,该方法在播放器初始化完成时触发一次,在获取到视频总时长时再次触发(这个时候视频已经预加载完成),在修改video的currentTime时,跳转的时间必须是视频已经预加载,否则会跳转到视频预加载的最大时间//e.target.currentTime在第一次触发durationchange这个方法的时候e.target.currentTime=0,我们只考虑第二次触发,要排除第一次if (e.type == 'durationchange' && e.target.currentTime > 0 && this.playTime > 0 && this.isJump) {this.isJump = falsethis.$refs.videoRef.currentTime = this.playTimethis.playTime = 0}},
至于为什么在播放出错,停止时要销毁并重新初始化播放器,是因为出错停止时video会停止播放,并返回错误,这个错误会一直保存在video中,只要这个错误存在video就不能再次播放视频,即便是手动拖动进度条也不会重新播放,只能销毁并重新初始化。
以上就是在碰到:PIPELINE_ERROR_DECODE: video decode error!错误时的曲线救国方法,不过在播放错误的地方会闪一下(video要重新初始化),大家如果有更好的方法可以提供一下