npm package: @layen-king/jx-cms-video-main-plugin
Description: [![Build Status](https://badgen.net/travis/@layen-king/jx-cms-video-main-plugin/master)](https://travis-ci.com/layen-king/jx-cms-video-main-plugin) [![NPM Download](https://badgen.net/npm/dm/@layen-king/jx-cms-video-main-plugin)](https://www.npmjs.com/pac
Author: https://github.com/layen-king
Latest version: 2.2.3

# jx-cms-video-main-plugin

[![Build Status](https://badgen.net/travis/@layen-king/jx-cms-video-main-plugin/master)](https://travis-ci.com/layen-king/jx-cms-video-main-plugin)
[![NPM Download](https://badgen.net/npm/dm/@layen-king/jx-cms-video-main-plugin)](https://www.npmjs.com/package/@layen-king/jx-cms-video-main-plugin)
[![NPM Version](https://badge.fury.io/js/@layen-king/jx-cms-video-main-plugin.svg)](https://www.npmjs.com/package/@layen-king/jx-cms-video-main-plugin)
[![NPM License](https://badgen.net/npm/license/@layen-king/jx-cms-video-main-plugin)](https://github.com/layen-king/jx-cms-video-main-plugin/blob/master/LICENSE)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/layen-king/jx-cms-video-main-plugin/pulls)
[![Automated Release Notes by gren](https://img.shields.io/badge/%F0%9F%A4%96-release%20notes-00B2EE.svg)](https://github-tools.github.io/github-release-notes/)

## Table of Contents

- [Introduction](#introduction)
- [Features](#features)
- [Install](#install)
- [Usage](#usage)
- [Links](#links)
- [Contributing](#contributing)
- [Contributors](#contributors)
- [License](#license)

## Introduction

jx-cms-video 项目播放器主界面,支持 GB、PG 设备根据 NO 播放。
后台需要 RTMB、RTSP 流转 webSocket-flv、http-flv 格式。
webSocket-flv 可以绕过浏览器同时播放 6 路限制。
支持 1、4、9、16、36、64 分屏。
PG 摄像机支持 3D 云镜功能。
支持窗格放大、全屏等。
支持自定义播放器功能。

[⬆ Back to Top](#table-of-contents)

## Features

[⬆ Back to Top](#table-of-contents)

## Install

```
npm install @layen-king/jx-cms-video-main-plugin
```

或者

```
yarn add @layen-king/jx-cms-video-main-plugin
```

[⬆ Back to Top](#table-of-contents)

## 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格式字符串                              |

[⬆ Back to Top](#table-of-contents)

## Links

- [docs](https://layen-king.github.io/jx-cms-video-main-plugin/)

[⬆ Back to Top](#table-of-contents)

## 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](https://github.com/FEMessage/.github/blob/master/CONTRIBUTING.md).

[⬆ Back to Top](#table-of-contents)

## Contributors

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore -->
<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

[⬆ Back to Top](#table-of-contents)

## License

[MIT](./LICENSE)

[⬆ Back to Top](#table-of-contents)