网络上 videojs 的用法有很多,但是没有搜到直播时网络异常的状态函数。
通过对 video.js 官网的第一个例子打开控制台查看dom节点状态变化,找到如下几个函数名称,可以对状态进行监听并显示自己想要的样式。
...
setUrl() {
let that = this
if (this.player) {
this.player.dispose()
}
this.$refs.video.innerHTML = `<video id="player" class="video-js" preload="auto" width="750px" height="350px" controls></video>`
this.player = videojs('player', this.option, function () {
this.on('play', function () {
// 播放器准备完毕
console.log('play')
that.play()
})
this.on('pause', function () {
// 播放暂停(点击暂停按钮或调用暂停方法)
console.log('pause')
})
this.on('waiting', function () {
// 播放过程中由于网络或其他原因产生的等待,此时视频播放暂停,等网络恢复后会自动执行【playing】自动播放
console.log('waiting')
that.pause()
})
this.on('playing', function () {
// 每次画面开始播放或是恢复播放都会执行
console.log('≈')
that.playing()
})
})
this.player.src(this.getSrc())
this.player.load()
}