关于videojs的播放进度事件异常问题

问题:在播放器创建成功成后,通过监听播放进度事件来实现自制进度条功能,发现播放进度并未完成,但却触发了播放结束的事件(我如果直接把进度条往没播放的拖动,又能播放,vlc播放正常),请问有人解决过类似的问题吗?


以下是代码和图片参考

            const self = this
            const techOrder = this.flash ? ['html5', "flash"] : ['html5']
            const _source = { src: source.src, type: source.type }
            this.myPlayer = videojs(this.$refs.video, {
                autoplay: true,
                poster: this.poster,
                techOrder,
                muted: true,
                // preload: 'none',
                language: "zh-CN",
                // notSupportedMessage: '播放失败',
                inactivityTimeout: 0,
                ...this.option,
                sources: [_source],
                controls: false
            }, function onPlayerReady() {
                    self.loading = false
                    videojs.log('player is ready!')
                    this.on("playing", function() { // 监听播放
                        videojs.log("开始播放")
                        self.$emit('playing')
                        self.myPlayer.muted(false)
                        self.$set(self.videoControlForm, 'play', true)
                    })
                    this.on("pause", function() {
                        self.$set(self.videoControlForm, 'play', false)
                    })
                    this.on("error", function(error) { // 监听错误
                        videojs.log('监听到异常,错误信息:')
                        videojs.log(error)
                        self.$$error('播放失败')
                        self.$emit('error')
                    })
                    this.on('ended', function() {
                        videojs.log('播放结束了!')
                        self.$emit('ended')
                    })

                    if (!self.live) {
                        // 视频播放时间变化事件
                        this.on('timeupdate', function(e) {
                            console.log('timeupdate', this.currentTime(), this.remainingTime(), this.duration())
                            let currentTime = this.currentTime() || 0
                            let remainingTime = this.remainingTime() > 0 ? this.remainingTime() : 0
                            self.$set(self.videoControlForm, 'totalTime', currentTime + remainingTime)
                            self.$set(self.videoControlForm, 'currentTime', currentTime)
                            self.$set(self.videoControlForm, 'remainingTime', remainingTime)
                        })
                    }
                }

微信截图_20200409175858.png
播放器显示状况,此时进度条已停止

阅读 7.4k
1 个回答
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题