视频采集和管理是多模态大数据应用场景必不可少的环节,在基于Vue2前端框架实现的Web界面如何进行视频的展示和播放是开发人员会遇到的一个主要技术问题。本文提供基于Vue2+video.js实现视频的预览的方案。
采集的视频数据在前端视频管理模块列表中展示,然后用弹窗查看视频详情并预览播放。最开始使用 vue-mini-player 组件,可轻松实现视频在编辑界面的弹窗中播放,但是遇到两个问题:1)弹窗中播放着视频,关闭窗口后,视频流不会停止。2)关闭窗口,重新打开新的视频编辑窗口后,依旧是继续播放之前的视频。其原因应该是关闭旧的窗口后,视频播放的控件没有销毁,导致新打开的控件其实还是旧控件的实例。查了很多关于vue-mini-player的文档和使用样例,没有找到如何销毁vue-mini-player控件。