如果你监听NETWORK_ERROR监听不到,不要强求
我不知道怎么回事,这种监听器监听不到:
this.flvPlayer.on(flvjs.ErrorTypes.NETWORK_ERROR, () => {
console.log('NETWORK_ERROR');
});
网上搜了搜,改用'error'事件是可以的,它的err参数是一个字符串,会告诉你是网络错误还是媒体错误等。于是乎,凑合用吧。
this.flvPlayer.on('error', err => {
console.log('err', err);
});
在vue的beforeDestroy周期要执行this.flvPlayer.destroy()
强烈建议执行这一句。
在视频上方中央附加按钮
比如附加一个“重新播放”按钮。
首先给<video>
和这个按钮加一个容器,比如<div style="position: relative"></div>
。
按钮要写在<video>
的下方。
然后给按钮附加样式:
width: 70px;
height: 40px;
margin: auto !important;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
这也是水平垂直居中的一个极强兼容性的方案,缺点是必须声明width和height。
销毁播放器
当只需要销毁播放器,或是在原组件上播放新的视频地址,那么一定要先销毁原播放器。
根据摸索,必须是这种写法,不然会有莫名报错:
this.flvPlayer.pause()
this.flvPlayer.unload()
this.flvPlayer.detachMediaElement()
this.flvPlayer.destroy()
this.flvPlayer = null