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-iffalse ,再改变为 true(在nextTick里) 将 video-player 先销毁再重建。
看到另一种解决方法是直接更改该组件的 key 触发重新渲染,大家也可以尝试下

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


最后修改:2020 年 07 月 30 日
如果觉得我的文章对你有用,请随意赞赏或留下你的评论~