vue-video-player 视频重载问题解决方案

658 阅读1分钟

记录一下

由于业务需要做了自定义进度条开发、视频内试题测验功能开发。导致在操作各种组件时,难免需要触发视频的内部方法。一旦组件跨组件调用视频方法时,视频组件就会自动重载,该问题导致很多功能无法实现。

初次解决该问题时,未找到其更本原因,使用了比较粗暴的方式,给组件加v-once。使视频组件只加载一次。如图:

image.png

以上方案基本解决了该业务,但在实现过程中,发现了如视频框与视频区内部弹窗视图全屏异常、z-index层级异常等问题。


随后在某次版本迭代中,同事也遇到了该问题,便想从根本上解决该问题。

浏览vue-video-player源码后,找到问题的缘由如下图:

image.png

问题出在,当指令触发update时,先卸载了组件,然后再由判断条件决定是否要重新初始化组件。

修改方案如下,由于视频类业务开发频繁,封装至组件中:

www.npmjs.com/package/cus…