1. 切记：安装vue-video-player插件一定要用npm安装，不可使用cnpm安装，否则会报下面这个错误

“The "flash" tech is undefined.
Skipped browser support check for that tech”

2. 将vue-video-player播放器的语言设置为中文


import 'video.js/dist/lang/zh-CN';  // 手动引入中文js文件

videoOption 里设置

language: 'zh-CN'

3. 播放rtmp流和hls流

如果需要播放 RTMP 流，需要安装 videojs-flash 插件
如果需要播放 HLS 流，需要安装 videojs-contrib-hls 插件，非原生支持的浏览器，直播服务端需要开启 CORS
如果两个流都需要播放，flash 插件需要安装到 hls 插件之前
ps:


vue-video-player中已经安装了这两个插件，在vue文件里直接import 即可

import 'videojs-flash'
import 'videojs-contrib-hls'

4. 切换或者设置视频流地址sources.src

使用如下方法：


通过ref引用组件video-player

this.$refs[`videoPlayer`][0].player.src(videoUrl)
this.$refs[`videoPlayer`][0].player.load(videoUrl)

有时候使用上面的操作切换了视频流地址，但是视频画面仍然不会变 （卡住），
解决方法就是改变 v-if 为 false ，再改变为 true（在nextTick里） 将 video-player 先销毁再重建。
看到另一种解决方法是直接更改该组件的 key 触发重新渲染，大家也可以尝试下

附上 vue-video-player 插件原项目的 git 地址 vue-video-player

最后修改：2020 年 07 月 30 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏或留下你的评论~