jx-cms-video-main-plugin

Table of Contents

• Introduction
• Features
• Install
• Usage
• Links
• Contributing
• Contributors
• 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

Features

⬆ Back to Top

Install

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

或者

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

⬆ Back to Top

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

Links

• docs

⬆ Back to Top

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.

⬆ Back to Top

Contributors

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

⬆ Back to Top

License

MIT

⬆ Back to Top