jx-cms-video-main-plugin
Table of Contents
Introduction
jx-cms-video 项目播放器主界面,支持 GB、PG 设备根据 NO 播放。 后台需要 RTMB、RTSP 流转 webSocket-flv、http-flv 格式。 webSocket-flv 可以绕过浏览器同时播放 6 路限制。 支持 1、4、9、16、36、64 分屏。 PG 摄像机支持 3D 云镜功能。 支持窗格放大、全屏等。 支持自定义播放器功能。
Features
Install
npm install @layen-king/jx-cms-video-main-plugin
或者
yarn add @layen-king/jx-cms-video-main-plugin
Usage
如果 .vue 页面使用
@vue/cli3 +
<template>
<div id="app" style="min-height:400px;overflow:hidden">
<jxCmsPluginVideoMain
ref="videoMain"
cmsUrl="http://192.168.7.119:8080"
cmsWsUrl="ws://192.168.7.119:8080"
userName="wangyl12345"
passWord="12345"
:isFloatMode="false"
:isSimpleMode="false"
:videoData="videoData"
:defaultWindowNum="1"
style="height:600px"
>
<template v-slot:waiting></template>
<template v-slot:PTZ3D></template>
<template v-slot:errorMessage></template>
<template v-slot:toolBar></template>
</jxCmsPluginVideoMain>
<input type="button" @click="playList" value="播放列表" />
<input type="button" @click="playOne" value="播放1个" />
</div>
</template>
<script>
import jxCmsPluginVideoMain from "@layen-king/jx-cms-video-main-plugin";
export default {
name: "app",
components: { jxCmsPluginVideoMain },
data() {
return {
maxWindowNum: 16,
currentVideoIndex: 0,
videoData: [],
videoCommand: null
};
},
created() {},
mounted() {},
methods: {
playOne() {
this.videoData = { videoNo: 1010010030100001, name: "#1高速球机(网络)" };
},
playList() {
this.videoData = [
{ videoNo: 1010010030102002, name: "#1固定机(网络)" },
{ videoNo: 1010010030100001, name: "#1高速球机(网络)" },
{ videoNo: 1010010030102003, name: "#2固定机(网络)" },
{ videoNo: 1010010030102004, name: "#3固定机(网络)" },
{ videoNo: 1010010030102005, name: "#4固定机(网络)" },
{ videoNo: 1010010030102006, name: "#5固定机(网络)" }
];
}
}
};
</script>
如果直接使用在 html 页面,必须下载 video-main-plugin 和 video-plugin js 引入 .umd.js 文件 并且安装缺失的全局函数:axios 等
配置项说明
参数 | 类型 | 是否必须 | 说明 |
---|---|---|---|
cmsWsUrl | String | 是 | 连接的服务器 webSocket 地址 |
cmsUrl | String | 是 | 连接的服务器 http 请求地址 |
userName | String | 是 | 登录服务器的用户名 |
passWord | String | 是 | 登录服务器的密码 |
videoData | Array or Object | 是 | 对象或者数据,默认数据参照上方 demo,需要播放设置 videoNo |
defaultWindowNum | Number | 否 | 默认选中窗口 Index,默认为 1 |
isSimpleMode | Boolean | 否 | 是否简单模式,简单模式下无控制,分页,切换宫格,与悬浮模式互斥 |
isFloatMode | Boolean | 否 | 是否悬浮模式,悬浮模式下可以拖动并且进行鼠标滚轮缩放,放置于页面 body 后 |
videoIcon | string | 否 | 播放器背景显示的图标,必须base64格式字符串 |
Links
Contributing
For those who are interested in contributing to this project, such as:
- report a bug
- request new feature
- fix a bug
- implement a new feature
Please refer to our contributing guide.
Contributors
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!