vue-video-player
-
安装插件
npm install vue-video-player --save
npm install --save videojs-flash
-
局部引入插件
<videoPlayer class="vjs-custom-skin videoPlayer" ref="videoplayer"
:playsinline="true" width="90%" :options="playerOptions"
customEventName="changed" >
</videoPlayer>
// videojs-flash必须要放在vue-video-player的后面
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
import 'videojs-flash'
export default {
name: "video",
components: {
videoPlayer
},
-
播放器相关属性设置
data() {
return {
playerOptions: {
width: "800", // 播放器宽度
height: "400", // 播放器高度
language: 'zh-CN', // 播放器语言
techOrder: ['flash'], // 播放插件优先顺序
muted: true,
autoplay: true, // 自动播放
controls: false,// 直播流设置不显示暂停、声音、进度条组件
loop: true,
sources: [{
type: 'rtmp/mp4', // 视频流格式
src: 'rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp' // 后端提供的rtmp流地址，一般是接口返回
}],
}
};
},
-
注意
这里只有支持并且下载了flash才能播放视频，这里使用的360极速浏览器并安装flash，重启浏览器之后就可以播放了。但是如果是Chrome浏览器则会提示不再支持flash插件
PS：
Q1: 控制台报错 The "flash" tech is undefined. Skipped browser support check for that tech.
A1: 出现该问题主要是由于video.js和vue-flash-player插件中的video.js同名文件在查找时版本不一出现的问题。
（1）有博客中写改为：
"dependencies": {
"vue-video-player": "5.0.1",
"videojs-flash": "2.1.0"
}
该版本解决问题。（无效）
（2）删除 node_modules，再用 npm 安装；（无效）
（3）手动卸载video.js
npm uninstall video.js
（4）根源解决
配置第三方模块的查找顺序，优先查找本身安装的videojs
// webpack.config.js
resolve: {
modules: [path.resolve('node_modules'), 'node_modules'],
}
// vue.config.js
configureWebpack: {
name: name,
resolve: {
modules: [path.resolve("node_modules"), "node_modules"], // 添加此行代码
alias: {
"@": resolve("src"),
},
},
},
Q2: 项目运行报错：无法找到相关 loader
A2: 引入 videojs-swf@5.4.1 的插件，需要在 vue.config.js 中加入 chainwebpack 配置
// vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('swf')
.test(/.swf$/)
.use('url-loader')
.loader('url-loader')
.options({
limit: 10000
})
}
}
\
